minify の効果を最大限に引き出す TypeScript コードを書く

クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング LT

1. minify の効果を 最大限に引き出す TypeScript コードを書く クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング LT
2. https://jsakamoto.github.io/Toolbelt.Blazor.SplitContainer/
3. オリジナルのコード
5. 2,197 bytes
6. クラスからクロージャーへ
7. クラスからクロージャーへ • 課題 • 大量の “this.” • クラスのメンバーは minify されない • ヒント • 変数名は minify される • 解決 • アロー関数を const 変数に格納してこれを参照すれば minify される • class は使わず、状態変数を参照するクロージャーで実装する
9. 1,446 bytes
10. 文字列定数と null の重複排除
11. 文字列定数と null の重複排除 • 課題 • イベント名の文字列定数が addEventListener 用と removeEventListener 用 とで 2 回出現する • null 値も 3 回出現する • ヒント • 変数名は minify される • 解決 • 繰り返し出現する文字列定数や null 値を const 変数に格納してから、これを参 照することで、minify された変数名での参照で重複を排除
13. 1,421 bytes
14. メソッドを bind して関数化
15. メソッドを bind して関数化 • 課題 • 同じ要素に対する addEventListener 呼び出しと removeEventListener 呼 び出しが多数発出現する • ヒント • アロー関数に格納してそれを参照すれば minify される • しかしこれは同じ要素に対するメソッド呼び出し • 解決 • bind を使ってオブジェクトに束縛済みの関数にしてしまってから、const 変数 に格納して使う
17. 1,336 bytes
18. 状態オブジェクトを辞書化
19. 状態オブジェクトを辞書化 • 課題 • 状態オブジェクトのプロパティ名は minify されない • 解決 • プロパティアクセスの代わりに辞書形式でのアクセスを使う • キーを const enum にすることで、TypeScript から JavaScript への トランスパイルにより、キーが数字の即値になる • TypeScript の言語機能を活用し型安全になるよう実装
21. 1,212 bytes
22. 改めて結果比較
23. 2,197 1,446 1,421 1,336 1,212 オリジナル クラスからクロージャーへ 文字列定数の重複排除 メソッドをbind 状態オブジェクトの辞書化 bytes bytes bytes bytes bytes
24. まとめ • じゅうぶん保守可能、且つ、型安全な TypeScript コードでも、 minify をより効果的にすることができ たと思う • とはいえ、その 100 bytes を削ることに意味があるのか? • ”minify” という意図を知らないと「なぜこんなことしているの?」と思われるので、 チーム開発での採用は慎重に • しかし class ではなくクロージャーで実装するのは効果絶大 & さほど変な Hack じゃな いので、これはやっておいて良さそう
25. Learn, Practice, Share.