JavaScriptのminifyと整形
ローカル名を短くするのが最も削れますが、名前を文字列として引くコードは壊れます。eval、new Function、引数名を読むフレームワークなど。心当たりがあれば切ってください。
JavaScriptのminify - よくある質問
よく使われる整形ツール
全期間このツールでできること
JavaScriptのminifyは空白を削ることではありません。置換でやると、見た目は正しく挙動だけが違うファイルができ、その差は本番で表に出ます。このページは、多くのプロジェクトのビルド工程を支えているエンジンTerserを、あなたのブラウザの中で動かします。
使い方
- 1 JavaScriptを枠に貼り付けます。
- 2 対象を選び、名前を短くするかどうかを決めます。
- 3 minifyを押します。縮んだファイルを開き直すなら整形を。
なぜ置換ではなく解析なのか
JavaScriptは、あなたが省いたセミコロンを自分で補います。「return」と値の間の改行を消せば、その関数はundefinedを返すようになります。ファイルは依然として正しく、やることだけが変わるのです。同じ文字が、ある場所では除算、別の場所では正規表現です。これを見分けるには文法が要り、パターンでは足りません。だからこのページは本物の解析器を使います。
実際に小さくなるもの
空白とコメントはそのうちの最も小さな部分です。本当に効くのは、ローカル変数を1文字に付け替え、離れた宣言をひとつにまとめ、定数を畳み、決して動かないコードを捨てることです。どれも木の上の操作で、minifyする側は「2つの名前が同じ束縛を指し、その間で誰も読んでいない」と知っている必要があります。
名前の短縮が噛みつくところ
minifyする側が付け替えられるのは、見えているものだけです。文字列として書かれた名前は見えません。eval("count + 1")、new Function("a", "return a")、あるいは関数の引数名を読んで何を渡すか決めるフレームワーク。これらは古い名前を探し続け、何も見つけられません。これは言語の性質であってツールの欠陥ではありません。だからこのスイッチは黙って入れず、あなたに委ねてあります。
整形しても元のファイルは戻らない
整形は字下げと改行を戻すので、縮んだファイルはまた読めるようになります。しかし捨てられたものは戻りません。コメントは消えており、名前を短くしていればそのままです。「e」がかつて「errorMessage」だったとは、どのツールにも当てられません。本番のファイルをデバッグするなら、元に戻してくれるのはソースマップだけです。