コード分割とルートレベルパフォーマンスバジェット
コード分割戦略でルートごとのパフォーマンスバジェットを設定。webpack、Vite、Rollupベースのアプリケーションで共有チャンク、ベンダーバンドル、ルート固有コードサイズを追跡。
Advanced
詳細な説明
コード分割とルートレベルバジェット
コード分割は大きなJavaScriptバンドルをオンデマンドで読み込む小さなチャンクに分割します。これは複雑なアプリケーションでパフォーマンスバジェットを満たすために不可欠です。
ルートレベルバジェット戦略
単一のグローバルJSバジェットの代わりに、ルートごとにバジェットを設定：
| ルート | 共有 | ルート固有 | 合計 |
|---|---|---|---|
| /home | 120 KB | 60 KB | 180 KB |
| /product/:id | 120 KB | 100 KB | 220 KB |
| /cart | 120 KB | 80 KB | 200 KB |
| /checkout | 120 KB | 150 KB | 270 KB |
よくある落とし穴
- 過度な分割 — 小さすぎるチャンクが多すぎるとリクエストオーバーヘッドが増加
- 共有チャンクの肥大化 — 共有コード内の1つの大きなインポートがすべてのルートを膨張させる
- ウォーターフォール読み込み — ネストされたダイナミックインポートが直列読み込みチェーンを作成
- プリフェッチの欠如 — コード分割されたルートはリンクホバー時にプリフェッチすべき
ユースケース
ルートレベルバジェットは、エントリポイントバジェットは満たしているが個々のルートが肥大化した大規模SPAに不可欠です。バジェットトラッカーで各ルートのチャンクサイズを追跡することで、チームはどのページが最適化を必要とするか特定し、チェックアウトや商品ページなどパフォーマンスが重要なルートに具体的な目標を設定できます。