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
2
バンドルサイズを半減させた話 @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
200
Browser and UI #2 HTML/ARIA
ken7253
2
290
PEPCは何を変えようとしていたのか
ken7253
3
470
Browser and UI #1 CSS
ken7253
0
130
レビューのやり方を(ちょっと)整理した話
ken7253
1
530
オーバーロード関数の話 @Mita.ts #2
ken7253
0
120
フロントエンドカンファレンス北海道参加レポート
ken7253
0
56
カスタムHooksと単体テストの共通点について
ken7253
0
410
検索エンジン最適化はWebサイトのすべてなのか
ken7253
0
64
Other Decks in Programming
See All in Programming
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
100
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
チームの境界をブチ抜いていけ
tokai235
0
210
Pythonに漸進的に型をつける
nealle
1
120
マンガアプリViewerの大画面対応を考える
kk__777
0
140
What's new in Spring Modulith?
olivergierke
1
170
Developer Joy - The New Paradigm
hollycummins
1
360
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
640
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
790
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
880
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Balancing Empowerment & Direction
lara
5
700
Facilitating Awesome Meetings
lara
57
6.6k
Mobile First: as difficult as doing things right
swwweet
225
10k
4 Signs Your Business is Dying
shpigford
185
22k
Automating Front-end Workflow
addyosmani
1371
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
How GitHub (no longer) Works
holman
315
140k
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