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
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
技術的負債の正体を知って向き合う
irof
0
230
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
100
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
CSC509 Lecture 07
javiergs
PRO
0
240
Cursorハンズオン実践!
eltociear
2
1.2k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
330
CSC305 Lecture 09
javiergs
PRO
0
310
Developer Joy - The New Paradigm
hollycummins
1
360
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
526
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Facilitating Awesome Meetings
lara
57
6.6k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Side Projects
sachag
455
43k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Designing for humans not robots
tammielis
254
26k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
GraphQLとの向き合い方2022年版
quramy
49
14k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
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