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
バンドルサイズを半減させた話 @Browser and UI #3
Search
ken7253
September 24, 2025
Programming
0
1
バンドルサイズを半減させた話 @Browser and UI #3
Browser and UI #3 Network/Performance にて話したスライドです。
ken7253
September 24, 2025
Tweet
Share
More Decks by ken7253
See All by ken7253
CSS polyfill とその未来
ken7253
0
190
Browser and UI #2 HTML/ARIA
ken7253
2
280
PEPCは何を変えようとしていたのか
ken7253
3
460
Browser and UI #1 CSS
ken7253
0
120
レビューのやり方を(ちょっと)整理した話
ken7253
1
530
オーバーロード関数の話 @Mita.ts #2
ken7253
0
120
フロントエンドカンファレンス北海道参加レポート
ken7253
0
54
カスタムHooksと単体テストの共通点について
ken7253
0
400
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
63
Other Decks in Programming
See All in Programming
Serena MCPのすすめ
wadakatu
4
860
実践AIチャットボットUI実装入門
syumai
7
2.4k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
160
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
120
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
310
CSC305 Lecture 04
javiergs
PRO
0
230
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
570
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
480
CSC305 Lecture 03
javiergs
PRO
0
230
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
260
Featured
See All Featured
How GitHub (no longer) Works
holman
315
140k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Designing for Performance
lara
610
69k
It's Worth the Effort
3n
187
28k
Building Applications with DynamoDB
mza
96
6.6k
Transcript
Browser and UI #3 Network/Performance
ブラウザの標準化まわりを追うのが趣味 最近はReactを使ったアプリケーションを書いています。 ユーザーインターフェイスやブラウザが好き。 https://github.com/ken7253 https://zenn.dev/ken7253 https://bsky.app/profile/ken7253.bsky.social ken7253 Frontend developer
Browser and UI とはなにか
フロントエンドエンジニアの勉強会 狭義の
フロントエンドエンジニアの勉強会 話していきたいこと ブラウザの仕様・標準化の話 ブラウザの実装について UI・デザインの話 UI実装を支えるツール フォント・画像とかのアセット系の話とかも 狭義の
フロントエンドエンジニアの勉強会 積極的にはやらないこと ライブラリ・フレームワーク論 (サービス全体の)設計論・アーキテクチャ サーバーサイドの話 技術以外の話 狭義の
お願いしたいこと
お願いしたいこと 誰かを不快にさせる行動・発表はしないでください。 ミニマムな開催にご協力をお願いします。 次回以降の会場提供できそうな人は教えて下さい。 また次回やるので来てください!
バンドルサイズを半減させた話 #3 Network/Performance
組み込みブラウザ上で動作するアプリケーション 古いモデルでChromium 58ぐらいで、一部Safari 11ぐらいの環境も webpack/babelで素朴なSPAを構築 プロジェクトの前提
Q:サイズを削減しやすい環境とは?
A:元のバンドルサイズが大きい
コンパイルターゲットをES5からES6に Terserの設定で mangle:false になっていたのを解消 不要なコードの削除 作業としては上の2つがメイン、コードの削除は段階的に実施 やったこと
コンパイルターゲットをES5からES6に webpackを利用しているのでwebpackの設定を変更 大きめのリリースに混ぜてQAが実施されるのでそれに混ぜてリリース この対応で 6.1MB -> 3.74MB にバンドルサイズを削減。 // webpack.config.js
{ // ... - target: ['web', 'es5'], + target: ['web', 'es6'], // ... }
なぜES5はサイズが大きくなるか
ESMが使えないためTree shakingが効かない アロー関数から関数宣言への変換 Generatorが存在せず非同期処理のコードが冗長になりがち ほとんどのサービスでは意味がないので ES5 へのトランスパイルはやめるべき なぜES5はサイズが大きくなるか
一般的なアプリケーションの指標は?
Baseline(Widely available)にあわせる
特殊な事情がある場合は、 ES2017/ES2020を目指すとよさそう
今回のバンドルサイズ調整ではES2020を目指していた。 Optional chaining(オプショナルチェーン a?.b ) Nullish coalescing(Null 合体演算子 a ??
b ) 上記の機能はES2020で追加されたものでよく使われている。 一方で、トランスパイル時のサイズが増えがちだった。 特殊な事情がある場合
Optional chaining(オプショナルチェーン) Nullish coalescing(Null 合体演算子) 特殊な事情がある場合 // src: 9 Bytes
a?.b?.c // downlevel: 100 Bytes var _a; (_a = a) === null || _a === void 0 || (_a = _a.b) === null || _a === void 0 ? void 0 : _a.c; // minfy: 64 Bytes x7.1! var l;null===(l=a)||void 0===l||null===(l=l.b)||void 0===l||l.c; // src: 7 Bytes a ?? b; // downlevel: 52 Bytes var _a; (_a = a) !== null && _a !== void 0 ? _a : b; // minfy: 34 Bytes x4.8! var l;null!==(l=a)&&void 0!==l||b;
Terserの設定で mangle:false になっていた のを解消
Terserとmangleとは?
Terser JSのminifyを行うツール mangle 変数名などを短くしてminifyを行う方法 Terserとmangleとは?
依存ライブラリの一部がmangleを行うと壊れたため リリースのために一時的に mangle:false されていたのが放置されていた。 調査ログなどが軽く当時のPRに書いてあったのでそれを確認 ライブラリ側のアップデートで修正されていたのが確認 ライブラリをアップデート 記述を削除してリリース 4.11MB ->
2.95MB に削減 なぜ mangle:false になっていたのか
開発中しか利用しないコードのバンドルを防ぐ 重複しているコードを共通化する 不要なコードの削除
開発中しか利用しないコードのバンドルを防ぐ デットコード削除の対象になるようにダイナミックインポートに // mock.ts export const worker = setupWorker(...handlers); /*
============================================ */ // mswのモックを有効化する処理 if (process.env.NODE_ENV === 'development') { if (process.env.ENABLE_MSW === 'true') { import("./mock.ts").then((worker) => worker.start()) } }; const initApp = () => { //... }
ここはほぼおまけ程度 ダイアログやローディングなど共通化できる部分を共通化 リファクタリングの作業を進めていくと自然とコード量が減っていく 型情報から不要だと分かるオプショナルチェーンや初期値の代入を削る 2.95MB -> 2.83MB 重複しているコードを削除・共通化する
ざっくりとバンドルサイズを半減できた
まとめ
ES5に変換してはいけない トランスパイルターゲットもBaseline(Widely available)に合わせていく 特殊な環境の人は頑張って自分たちで答えを出そう ES2017/ES2020が大きな目標かも 定期的にビルド設定の見直しを サポートブラウザと共に定期的に見直す きちんと想定したバージョンにトランスパイルされているか確認する 無駄なコードを書かない 静的解析とレビューでカバー
まとめ
END