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
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
クラシルを支える技術と組織
rakutek
0
190
気づいて!アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
waka12
0
260
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
150
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
120
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
160
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
140
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
140
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
160
Featured
See All Featured
A designer walks into a library…
pauljervisheath
208
24k
Done Done
chrislema
185
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
A better future with KSS
kneath
239
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
The Cost Of JavaScript in 2023
addyosmani
53
9k
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