本番用には小さなファイルを、デバッグには読みやすいコードを
このツールは本番用にCSS・JavaScript・HTMLを圧縮し、どれだけ削減できたかを正確に表示します。元のサイズ、圧縮後のサイズ、そして訪問者が実際にダウンロードするgzip後のサイズです。JavaScriptは多くのモダンなビルドツールで使われているterserで、CSSは重複ルールの統合も行うcssoで圧縮します。「整形」に切り替えれば、圧縮済みのバンドルやスタイルシートをインデント付きの読みやすいコードに戻せます。コードはブラウザ内で処理され、アップロードされることはありません。
コードを圧縮・整形する手順
- 1言語を選びます：CSS、JavaScript、HTML。
.css、.js、.htmlファイルを入力欄にドロップすると自動で選ばれます。 - 2コードを小さくするなら圧縮、読みやすくするなら整形を選びます。
- 3オプションを調整します。JavaScriptでは名前の短縮と圧縮、CSSではルールの再構成、HTMLではインラインのスタイルとスクリプトの圧縮を切り替えられます。ライセンスコメントはオフにしない限り残ります。
- 4結果の下のサイズ表示で、gzip前後の削減量を確認します。
- 5出力をコピーするか、
.min.js、.min.css、.htmlとしてダウンロードします。
圧縮（Minify）で何が行われるか
圧縮では、ブラウザがコードを実行するのに不要なもの、つまりコメント、インデント、改行、省略可能なセミコロンを取り除きます。優れたツールはさらに踏み込みます。terserはローカル変数を1文字の名前に変え（mangling）、到達不能なコードを削除し、定数式を事前計算し、if文を三項演算子に短縮します。cssoは色を短くし（#ff0000はredに）、ゼロ値の単位を省き、宣言やセレクタが同じルールを統合します。
結果は元のコードとまったく同じように動作しますが、圧縮（gzip）前の段階で一般にJavaScriptは30〜70%、CSSは15〜40%小さくなります。
gzipサイズが重要な理由
WebサーバーやCDNはテキストファイルを送信前にgzipやBrotliで圧縮するため、読み込み時間に影響するのは生のサイズではなく圧縮後のサイズです。圧縮はMinifyが狙う繰り返しの多くをすでに取り除くので、Minifyで60%削減できてもgzip後は20%になることがあります。それでもページ表示のたびに効果があり、特にmanglingは圧縮後も効き続けます。
ここでのgzipの値は、nginxや多くのサーバーの既定であるレベル6で計算しています。Brotliなら通常さらに10〜20%小さくなります。
オプションの説明
- 名前を短縮
- ローカル変数と関数の引数を短い名前に変えます。グローバルな名前やオブジェクトのプロパティは変更しないため、他のスクリプトから呼ばれるコードもそのまま動きます。
- 圧縮
- JavaScriptではterserの最適化処理（デッドコード削除、定数畳み込み、インライン化）。CSSではcssoの再構成で、安全な範囲でルールを統合・並べ替えます。
- ライセンスコメントを残す
- /*! で始まるコメントや @license、@preserve を含むコメントを残します。多くのオープンソースライセンスでは保持が求められます。
- インラインのCSSとJS
- HTML内の<style>要素・<script>要素の中身とstyle属性を圧縮します。JSON-LDブロックも詰められます。その他のtypeのスクリプトはそのままです。
- 属性の引用符を削除
- HTMLで許される場合、class="nav" を class=nav と書きます。有効なHTMLですが、一部のXMLツールやテンプレートシステムでは問題になるため、既定ではオフです。
HTMLの圧縮方法
ここでのHTML圧縮はあえて控えめにしています。コメントは削除しますが、Internet Explorerの条件付きコメントは残します。連続する空白は1つにまとめ、<div>や<p>などブロック要素の隣にあり表示されない空白は削除します。インライン要素の間には必ず空白を1つ残します。削除すると<b>big</b> <i>world</i>が1語につながってしまうためです。<pre>と<textarea>の中身には一切手を加えません。
インラインスクリプトに構文エラーがある場合、ページ全体を失敗させるのではなく、そのスクリプトを元のまま残し、エラーのある行をお知らせします。
圧縮済みコードの整形
整形ではjs-beautifyを使ってコードをインデントし直します。JavaScriptは1行1文、CSSは1行1宣言、HTMLは入れ子のインデントです。圧縮されたサードパーティのスクリプトを読んだり、ブラウザからコピーしたスタイルシートを理解したりするのに最も手早い方法です。Minifyで消えた元の変数名やコメントは戻せませんが、構造は追いやすくなります。
よくある質問
- コードはどこかにアップロードされますか？
- いいえ。terser、csso、js-beautifyはブラウザ内で動作するため、コードはお使いの端末から出ません。
- 圧縮したJavaScriptはそのまま動きますか？
- はい。terserは動作を変えない変更だけを行います。一部のDIフレームワークのように実行時に関数名やクラス名に依存するコードでは、名前の短縮をオフにする必要があるかもしれません。
- モダンなJavaScriptやESモジュールに対応していますか？
- はい。terserはクラス、async/await、オプショナルチェーン、トップレベルawaitなどのモダンな構文を理解します。importやexportを含むファイルはESモジュールとして圧縮されます。
- TypeScriptやJSXを圧縮できますか？
- いいえ。先にTypeScriptやJSXをJavaScriptにコンパイルしてから、その出力を圧縮してください。コードが素のJavaScriptでない場合は、行と列付きの構文エラーが表示されます。
- Minifyとgzipの違いは何ですか？
- Minifyはコード自体を短く書き換えます。gzipはサーバーが送信時にあらゆるファイルにかける圧縮です。両者は併用するもので、まずMinifyし、その後サーバーに圧縮させます。
- JavaScriptやCSSを元に戻せますか？
- はい。「整形」を選ぶと圧縮済みコードをインデントし直せます。元の変数名やコメントは復元できませんが、構造は読めるようになります。
- CSSのルールが統合されたり並べ替えられたりするのはなぜですか？
- cssoの再構成によるもので、宣言やセレクタが同じルールを統合します。通常のスタイルシートでは安全ですが、詳細度が同じセレクタ間の厳密なルール順に依存している場合は「圧縮」をオフにしてください。