JSファイルサイズ破壊

#JavaScript #Demoscene #圧縮 #Deflate #zopfli #terser

参考文献

https://zenn.dev/mizchi/scraps/fee64e76afc10d

Tree Shaking

現代JavaScriptのサイズ削減といえばTree Shaking

モジュールの必要とならないコードを自動的に削除してくれる機能

Webpack, Rollup, esbuild などのバンドラーはやってくれる

クラスメソッドなど、Tree Shakingが効かないものがあるので注意

とりあえず全部素のfunctionで実装だ！

GLの定数を埋める

gl.COLOR_ATTACHMENT0 より 36064 のほうが短い

とはいえ、マジックナンバーをそのままぶち込めと言っているわけではない

以下のようなモジュールを作っておくと、必要な変数だけビルド時に展開してくれるので、これでよし

code:js

export const GL_ACTIVE_ATTRIBUTES = 0x8b89;

export const GL_ACTIVE_TEXTURE = 0x84e0;

export const GL_ACTIVE_UNIFORM_BLOCKS = 0x8a36;

export const GL_ACTIVE_UNIFORMS = 0x8b86;

export const GL_ALIASED_LINE_WIDTH_RANGE = 0x846e;

// ...

Object.entries(WebGL2RenderingContext) とかやると定数一覧が出てくるのでこれを使いましょう

GL_COMPLETION_STATUS_KHR とか、拡張の定数は必要だったら適宜追加で

完成済みのものがこちらです

https://gist.github.com/0b5vr/34241a24c3f145bb46595cfed3614440

terserができることを把握する

Terserができることを把握しておく

Options: https://terser.org/docs/api-reference

https://try.terser.org/ で手を動かして、自分で何ができて何ができないかを見ることもできる

✅ 改行消したりスペース消したりなどは基本

✅ 変数名短くしてくれる（mangle）

✅ if(false) で囲われたデッドコードを消してくれる

compress.global_defs オプションで指定した定数を組み合わせると DEBUG 時のみコードを含めるみたいなのができる

✅ 定数の宣言を省略して直接ぶちまけてくれる

❌ function a(){...} を const a=()=>{...} とかにはしてくれない……ことが多い

❌ Web APIやDOM APIの呼び出し等はどうあがいても短くならない

deleteFramebuffer が deleteFramebuffer より短くなることはない

gl.COLOR_ATTACHMENT0 も短くならないので、定数で埋め込むのがベター（前述）

mangleオプション

mangleでドラスティックにお名前を破壊

オプションの mangle.properties.regex を /.+/ にしちゃおう

mangle.properties.reserved に変えたくないお名前を入れられます

mangle.properties.builtins を true にしないと、 position , rotation みたいなプロパティが破壊されない

exhaustiveなlistはこちら: https://github.com/terser/terser/blob/a88f4faded370c2f1e1af7417dcda2bb9c63da65/tools/domprops.js

DOM APIでこれらのプロパティを利用していない場合は要注意

このリストをフォークしてきて要らないプロパティを消す路線が良いかもしれない

mangle.properties.debug を true にしてどのお名前を破壊してよいか探る

format.max_line_len を true にすると改行が入ってどこの行で壊れたかわかりやすい

エントロピー

→ 情報量

細かいやつ

Array.forEach より Array.map のほうが短い

統一させたほうが当然圧縮効率も高い

ただし Map.forEach は Map.map にならないので注意

（あまり関係ないが） forEach より map のほうが速いという都市伝説も存在するが自分でちゃんと計測しようね