JavaScriptの圧縮 — JSファイルサイズの削減

JavaScriptの圧縮の仕組み

JavaScriptの圧縮（minification）は、人間が読めるソースコードを、実行時に同一の動作をするより小さな形式に変換するプロセスです。適切に設定された圧縮ツールは、JavaScriptファイルのサイズをgzip圧縮前に**40-70%**削減できます。

圧縮ツールが除去するもの

JavaScriptの圧縮ツールは複数の変換を適用します：

// 圧縮前
function calculateTotalPrice(items, taxRate) {
  // 全アイテムの価格を合計
  let subtotal = 0;
  for (let i = 0; i < items.length; i++) {
    subtotal += items[i].price * items[i].quantity;
  }
  // 税を適用
  const total = subtotal * (1 + taxRate);
  return total;
}

圧縮後：

function calculateTotalPrice(t,a){let e=0;for(let l=0;l<t.length;l++)e+=t[l].price*t[l].quantity;return e*(1+a)}

主な変換

1. 空白の除去 — 構文上不要なスペース、タブ、改行がすべて削除されます。
2. コメントの除去 — 単一行（//）および複数行（/* */）コメントが削除されます。
3. 変数名のマングリング — ローカル変数とパラメータ名が1文字に短縮されます（subtotalがeに）。オブジェクトのプロパティ名は外部から参照される可能性があるため、マングリングされません。
4. デッドコードの排除 — 到達不能なコードパスと未使用の変数が除去されます。
5. 定数畳み込み — 1 + 2のような式が3に事前計算されます。
6. 文の簡素化 — const total = expr;の後のreturn total;がreturn expr;に統合されます。

主要なJavaScript圧縮ツール

• Terser — ES6+コードの事実上の標準。webpack、Vite、Rollupで使用されます。
• esbuild — Goで記述され、非常に高速。バンドルと圧縮の両方を処理します。
• SWC — Rustで記述され、Next.jsのプロダクションビルドで使用されます。
• UglifyJS — ES5用のレガシー圧縮ツール。古いツールチェーンで使用されています。

注意すべき危険な変換

圧縮ツールにはコードを壊す可能性のある積極的な最適化があります：

• トップレベルのマングリングはexportを改名する可能性があります。
• **eval()とnew Function()**は実行時に変数名に依存します。
• Function.prototype.toString()への依存は名前が変更されると壊れます。

デプロイ前に必ず圧縮後の出力をテストしてください。