Terserの圧縮で何が削られるのか｜minify結果を読み解く

minifyは「3つの仕事」をしている

JS Formatter の「圧縮」ボタンは内部でTerserを呼んでいます。Terserは大きく3つの処理を順番に適用します:

1. mangle — 変数名・関数名を短くする
2. compress — コードを書き換えて短くする
3. format — 改行・空白を削る

それぞれ何をしているか、具体例で見ていきます。

---

1. mangle: 名前を短縮する

入力:

function calculatePrice(quantity, unitPrice) {
  const subtotal = quantity * unitPrice;
  return subtotal;
}

出力（mangle後）:

function calculatePrice(n,t){return n*t}

• ローカル変数 quantity → n、unitPrice → t
• ローカル変数 subtotal は1度しか使わないので消滅
• 関数名 calculatePrice は残る（外部から呼ばれる可能性があるため、デフォルトでトップレベル名は保持）

ポイントは「ローカルスコープのみ短縮」する点。グローバルや export された名前は保護されます。

---

2. compress: コードを書き換える

デッドコード除去

if (false) {
  console.log("never");
}
const x = 1;

↓

const x=1;

if (false) の中身は到達不能なので丸ごと削除されます。

定数畳み込み

const SECONDS = 60;
const MINUTES = 60;
const HOUR = SECONDS * MINUTES;

↓

const o=3600;

定数同士の演算はコンパイル時に計算して埋め込まれます。

短い等価表現への置き換え

元	圧縮後
true	!0
false	!1
undefined	void 0
if (x) { a() }	x&&a()
if (x) a; else b;	x?a:b
return undefined	return

「真偽値リテラル true を !0 に置き換える理由」は、!0 の方が1文字短いから。可読性は犠牲にしてバイト数を稼ぎます。

return の早期化

function f(x) {
  if (x > 0) {
    return "pos";
  } else {
    return "neg";
  }
}

↓

function f(n){return n>0?"pos":"neg"}

---

3. format: 空白とコメントを削る

最後に改行・インデント・コメントを除去:

// このコメントは消える
const greet = (name) => {
  return `Hello, ${name}`;
};

↓

const greet=n=>`Hello, ${n}`;

JS Formatterの設定では format.comments: false のため、/*! */ 形式のライセンスコメントも含めて全削除されます。ライセンスコメントを残す必要があるOSSライブラリは別途対応が必要です。

---

削られないもの

要素	残る理由
export された名前	外部から参照される
トップレベルの関数・クラス名	mangle の対象外（デフォルト）
文字列リテラルの中身	評価できないので変えられない
動的に参照される名前	obj["foo"] のような書き方は触れない
正規表現	構文を変えると意味が変わるため

---

minify後のサイズが「あまり減らない」ときの原因

症状	よくある原因
30%しか減らない	元から短い変数名で書かれている
ほぼ変わらない	文字列リテラル（HTML/SQL/JSON）が大半を占める
削減ゼロ	既にminify済み

JSロジックよりも文字列リテラルが大半を占めるファイル（テンプレート文字列、巨大なJSON埋め込みなど）では、Terserは文字列の中身を削らないため効果が小さくなります。

---

デバッグするときは

minifyされたコードは n*t のような短い変数名で読めません。本番でエラーが出たら:

1. ブラウザのDevToolsで「Pretty print」（整形）を有効化
2. それでも変数名は短いまま → source map が必要
3. ビルド時に terser --source-map を出してCDNに配置するのが定石

JS Formatterの「圧縮」では sourceMap: false のためsource mapは出力しません。本番ビルドには使わず、**「サイズ感を確認するため」「単発配布スクリプトを縮めるため」**の用途と割り切ってください。

---

関連記事

• JS Formatterの使い方 — 基本操作
• 整形と圧縮の使い分け — どちらを使うか迷ったら

---

minifyは魔法ではなく、機械的な書き換えの積み重ね。中身を理解すれば「なぜそれが削られたか」が見えるようになります。