web開発やっているとwebpack辺りで適当にminifyしちゃってると思いますが、実際にどの程度minifyで得してるの？というのが気になったので検証です。画像とかは圧縮のメリット大きいと思いますが、元々ファイルサイズが小さい傾向にあるjsファイルってどの程度効果あるんでしょうか？圧縮っていう意味じゃなく、コメント消したり難読化って意味合いが強いのかも？とは思うものの、今回はファイルサイズを比較していきます。
なお私は最近Electron開発をしていますが、個人プロジェクトなので一切minifyしてません。ローカルファイルなのでファイルサイズがネックになることはないし、難読化も外部に公開するわけではないので今のところメリットなし。
そんな感じでminifyに対する熱意は全くないのですが、実際どれくらいファイル小さくなるの？ってことを検証します。
今回はwebpackは使わずにnodejsでgoogle-closure-compilerを使いました。
vscode上からもminifyしてみたかったので、拡張機能のJS & CSS Minifierも使ってみました。
google-closure-compiler
npmで配布もされているので導入も簡単です。
npx google-closure-compiler –js=元ファイル –js_output_file=minify後ファイル
で実行します。
てっきり1ファイルごとにMinifyするのかと思いきや、ESModuleでimportしているファイル群もまとめた状態でminifyされます。なので元ファイルの指定には核となってるindex.jsだけではなく、importしているファイル類も列挙しなければなりませんので注意。
// install
npm install google-closure-compiler -D
// minify
npx google-closure-compiler --compilation_level=ADVANCED --js=./src/js/index.js --js=./src/js/hoge.mjs --js_output_file=./src/js/index.min.js
// compilation_level
// WHITESPACE_ONLY
// SIMPLE
// ADVANCED圧縮段階は3段階から選べます。
空白除去か、Simpleモードか、Advancedモードです。
元ファイル群のサイズは163KB
WHITESPACE_ONLY → 147KB
SIMPLE → 132KB
ADVANCED → 84KB
ADVANCEDを使うと半分くらいまで圧縮してくれました。
こりゃ凄い。
私はソースにほとんどコメントを付けないのですが、それを半分まで圧縮するのは圧巻です。
コメントをたくさん書く人なら1/4とかになるのでは？
ただ、1点だけADVANCEDの圧縮に難がありました。出力されたファイルそのままだと実行できませんでした。
ADVANCEDはコード解析して不要なメソッドを削ってくれたりするらしいのですが、minifyするファイル群から独立したファイルで宣言してるグローバル変数なんかの扱いが怪しくなってるっぽい印象です。
Electronだとpreload.js的なファイルでブラウザ起動直後にメインプロセスへアクセスするためのメソッドを定義しちゃうのですが、これらがminifyされたファイルからは消されてるっぽいのです。なので消さないでーってことをソース上で明示しないといけないんでしょうね。
JS & CSS Minifier
vscode拡張からはこれをエントリー。こっちはimportしていてもファイル結合まではしてくれないようです。1ファイルをminifyしてくれます。
使い方は簡単で、拡張機能をインストールすると、左下の方にMinifyボタンが出現するのでそれを押すだけ。元ファイル名に.minを付けたファイルが生成されます。
若干ハマったのは、?.（オプショナルチェイニング演算子）です。
これがあるとエラーになるので、地道にnullガードに書き換える手間が必要です。オプション等があるのかもしれませんが、日常的に使うわけでもないので手抜きします。
ファイルサイズは
元ファイル → 111KB
Minify後 → 81KB
となり、73%まで減りました。
まとめ
jsファイルをminifyすると、ざっくり20-50%ぐらいの圧縮ができました。
さてこの結果をどう判断しましょうか？
個人的には誤差の範疇かなぁって気がします。
仕事でwebやってる人はminifyしないなんてことはあり得ないと思いますが、jsファイルをminifyする意味って、主として難読化やコメント除去じゃないかと思いました。馬鹿みたいにデカいjsを書くなら価値は大きいかもですが、300kbくらいのファイルなら誤差のうちな気がします。圧縮してもたかが知れてるので優先順位は低そうです。（minifyするなって意味ではないので悪しからず。画像の圧縮と比べて恩恵少ないって意味です）
コメント