Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
minify の効果を最大限に引き出す TypeScript コードを書く
Search
jsakamoto
November 21, 2024
Technology
2
280
minify の効果を最大限に引き出す TypeScript コードを書く
クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング LT
jsakamoto
November 21, 2024
Tweet
Share
More Decks by jsakamoto
See All by jsakamoto
いいね が燃料! 「自分のOSS」で1億ダウンロード突破の開発者が語る OSS 開発のリアル
jsakamoto
0
46
JavaScript 以外の言語によるフロントエンド Web 開発が既に実用段階である話
jsakamoto
0
2.5k
ベクトル化を使った意味検索を、簡単にアプリケーションに搭載できる時代になっていた件。
jsakamoto
2
240
CSR? SSR? C# で作る Web アプリフレームワーク Blazor のレンダリング方式を整理する
jsakamoto
0
730
UI コンポーネントカタログ “Storybook” を、C# で SPA が作れる Blazor で再実装した話
jsakamoto
0
1.4k
Evolution of Blazor in .NET 8 - Exploring the Multi-Page Apps Implementation by Blazor!
jsakamoto
1
900
C#でSPAを実装する Blazor で UI コンポーネントカタログ Storybook を使いたい! “Blazing Story” の紹介
jsakamoto
0
830
C#でSPAを作る Blazor WebAssembly の進化 - そしてその先へ
jsakamoto
2
190
WebAssemblyが切り拓くフロントエンドWeb開発の未来
jsakamoto
0
43
Other Decks in Technology
See All in Technology
オフィスビルを監視しよう:フィジカル×デジタルにまたがるSLI/SLO設計と運用の難しさ / Monitoring Office Buildings: The Challenge of Physical-Digital SLI/SLO Design & Operation
bitkey
1
290
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
300
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
120
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
140
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
microCMSではじめるAIライティング
himaratsu
0
110
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
1
600
Operating Operator
shhnjk
1
640
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
270
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
330
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
190
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
2
180
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Raft: Consensus for Rubyists
vanstee
140
7k
Music & Morning Musume
bryan
46
6.7k
Speed Design
sergeychernyshev
32
1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Unsuck your backbone
ammeep
671
58k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Embracing the Ebb and Flow
colly
86
4.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Transcript
minify の効果を 最大限に引き出す TypeScript コードを書く クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング LT
https://jsakamoto.github.io/Toolbelt.Blazor.SplitContainer/
オリジナルのコード
None
2,197 bytes
クラスからクロージャーへ
クラスからクロージャーへ • 課題 • 大量の “this.” • クラスのメンバーは minify されない
• ヒント • 変数名は minify される • 解決 • アロー関数を const 変数に格納してこれを参照すれば minify される • class は使わず、状態変数を参照するクロージャーで実装する
None
1,446 bytes
文字列定数と null の重複排除
文字列定数と null の重複排除 • 課題 • イベント名の文字列定数が addEventListener 用と removeEventListener
用 とで 2 回出現する • null 値も 3 回出現する • ヒント • 変数名は minify される • 解決 • 繰り返し出現する文字列定数や null 値を const 変数に格納してから、これを参 照することで、minify された変数名での参照で重複を排除
None
1,421 bytes
メソッドを bind して関数化
メソッドを bind して関数化 • 課題 • 同じ要素に対する addEventListener 呼び出しと removeEventListener
呼 び出しが多数発出現する • ヒント • アロー関数に格納してそれを参照すれば minify される • しかしこれは同じ要素に対するメソッド呼び出し • 解決 • bind を使ってオブジェクトに束縛済みの関数にしてしまってから、const 変数 に格納して使う
None
1,336 bytes
状態オブジェクトを辞書化
状態オブジェクトを辞書化 • 課題 • 状態オブジェクトのプロパティ名は minify されない • 解決 •
プロパティアクセスの代わりに辞書形式でのアクセスを使う • キーを const enum にすることで、TypeScript から JavaScript への トランスパイルにより、キーが数字の即値になる • TypeScript の言語機能を活用し型安全になるよう実装
None
1,212 bytes
改めて結果比較
2,197 1,446 1,421 1,336 1,212 オリジナル クラスからクロージャーへ 文字列定数の重複排除 メソッドをbind 状態オブジェクトの辞書化
bytes bytes bytes bytes bytes
まとめ • じゅうぶん保守可能、且つ、型安全な TypeScript コードでも、 minify をより効果的にすることができ たと思う • とはいえ、その
100 bytes を削ることに意味があるのか? • ”minify” という意図を知らないと「なぜこんなことしているの?」と思われるので、 チーム開発での採用は慎重に • しかし class ではなくクロージャーで実装するのは効果絶大 & さほど変な Hack じゃな いので、これはやっておいて良さそう
Learn, Practice, Share.