ミニファイとは? 本番向けにコードを縮小する

ミニファイは、空白やコメントを取り除き名前を短縮することで、何をするかを変えずにコードを可能な限り小さく書き換えます。

あなたが書くコードは、空白やコメント、説明的な名前を伴い、人間向けに整形されています。そのどれもブラウザには関係ありません。ミニファイは非本質的なものをすべて取り除き、識別子を短い名前に書き換えることで、ファイルがより速くダウンロードされるようにします。これはあらゆる本番フロントエンド build の標準ステップであり、source map が存在する主な理由です。

ミニファイが取り除き書き換えるもの

空白、改行、コメント。
数文字に短縮された長いローカル変数名。
より短い等価物へ畳み込まれた冗長な構文。
到達不能だと証明できるデッドブランチ。

ミニファイ vs 圧縮

ミニファイはソースそのものに対する build 時の変換です。gzip や brotli のような圧縮は、サーバーや CDN 上での転送時に行われます。両者は重なります。ミニファイされたコードはさらに圧縮され、どちらもユーザーがダウンロードする量を減らします。

一般的なミニファイア

Terser は標準的な JavaScript ミニファイアです。esbuild と SWC は bundling の一部として高速にミニファイします。CSS には cssnano のような独自のミニファイアがあります。ほとんどのバンドラーは本番モードで自動的にミニファイを有効にします。

なぜ source map と対になるのか

ミニファイされたコードは読めないため、スタックトレースはノイズを指すことになります。ミニファイされた出力とともに source map を生成すると、デバッグやエラー追跡のために元のソースへのリンクが復元されます。

CI/CD でのミニファイ

ミニファイは本番 build でのみ実行され、bundling の最後に CPU 時間を加えます。与えられた入力に対して決定的であるため、build 出力を cache しておけば、変更のないコードは再ミニファイをスキップできます。ミニファイされハッシュされたファイルこそが、pipeline が deploy するものです。

重要なポイント

ミニファイは空白を取り除き名前を短縮することで、挙動を変えずにコードを縮小します。
gzip や brotli のようなサーバーサイドの圧縮と重ねて効きます。
ミニファイされた出力が本番でデバッグ可能であり続けるには source map が必要です。