シングルページアプリケーション（SPA）パフォーマンスバジェット
React、Vue、Angularで構築されたSPAのパフォーマンスバジェット戦略。初期読み込みバジェット、ルートレベルコード分割、ハイドレーションコスト、継続的モニタリングアプローチ。
Page Type Budgets
詳細な説明
SPAパフォーマンスバジェット
シングルページアプリケーション（SPA）は独特のパフォーマンス課題を持っています。初期読み込みにはフレームワーク、ルーター、状態管理、そして多くの場合大量のアプリケーションコードが含まれます。
SPAバジェットテンプレート
| カテゴリ | バジェット | 備考 |
|---|---|---|
| 合計初期 | 600 KB | 最初のルートのみ |
| JavaScript | 350 KB | フレームワーク + アプリ + ベンダー |
| CSS | 60 KB | クリティカル + コンポーネントスタイル |
| 画像 | 100 KB | ファーストビュー画像のみ |
| フォント | 60 KB | プリロードされたクリティカルフォント |
| リクエスト | 25 | 初期ページ読み込みリクエスト |
| FCP | 1800 ms | シェルが素早くレンダリング |
| LCP | 2500 ms | 主要コンテンツが表示 |
ルートレベルバジェット
SPAはグローバルだけでなく、ルートごとにバジェットを追跡すべきです：
/home — 80 KB ルート固有JS
/product/:id — 120 KB ルート固有JS
/checkout — 150 KB ルート固有JS（決済ライブラリ）
/dashboard — 200 KB ルート固有JS（チャート、テーブル）
ユースケース
SPAパフォーマンスバジェットは、SPAが急速に成長する傾向があるため重要です。各新機能がコンポーネント、ライブラリ、状態管理ロジックを追加します。バジェットなしでは、SPAが1年の開発で300 KBから2 MBに成長することは珍しくありません。バジェットトラッカーは各追加のコストを可視化します。