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
300
minify の効果を最大限に引き出す TypeScript コードを書く
クラメソさっぽろIT勉強会 (仮) #6:パフォーマンスチューニング LT
jsakamoto
November 21, 2024
Tweet
Share
More Decks by jsakamoto
See All by jsakamoto
UI コンポーネントカタログに MCP サーバー機能を追加する試み、そしてその結果
jsakamoto
1
38
いいね が燃料! 「自分のOSS」で1億ダウンロード突破の開発者が語る OSS 開発のリアル
jsakamoto
0
110
JavaScript 以外の言語によるフロントエンド Web 開発が既に実用段階である話
jsakamoto
0
2.6k
ベクトル化を使った意味検索を、簡単にアプリケーションに搭載できる時代になっていた件。
jsakamoto
2
270
CSR? SSR? C# で作る Web アプリフレームワーク Blazor のレンダリング方式を整理する
jsakamoto
0
780
UI コンポーネントカタログ “Storybook” を、C# で SPA が作れる Blazor で再実装した話
jsakamoto
0
1.6k
Evolution of Blazor in .NET 8 - Exploring the Multi-Page Apps Implementation by Blazor!
jsakamoto
1
930
C#でSPAを実装する Blazor で UI コンポーネントカタログ Storybook を使いたい! “Blazing Story” の紹介
jsakamoto
0
870
C#でSPAを作る Blazor WebAssembly の進化 - そしてその先へ
jsakamoto
2
200
Other Decks in Technology
See All in Technology
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
200
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
260
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
530
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
150
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
590
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Being A Developer After 40
akosma
90
590k
Balancing Empowerment & Direction
lara
3
620
Optimizing for Happiness
mojombo
379
70k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Practical Orchestrator
shlominoach
190
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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.