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