シングルページアプリケーション向けJavaScriptバジェット
React、Vue、Angularで構築されたSPA向けに効果的なJavaScriptバジェットを設定。フレームワークサイズ、コード分割、ツリーシェイキングがJSバジェット配分に与える影響を解説。
Category Budget
詳細な説明
SPA向けJavaScriptバジェット
JavaScriptは一般的にシングルページアプリケーションで最も大きく、最もコストの高いアセットカテゴリです。単にデコードして表示する画像とは異なり、JavaScriptはダウンロード、パース、コンパイル、実行が必要で、各ステップがユーザーのデバイスのCPU時間を消費します。
フレームワークのベースラインコスト
アプリケーションコードを一行も書かない前に、フレームワークがすでにJSバジェットの一部を消費しています：
| フレームワーク | 最小バンドル（gzip） | ルーター込み |
|---|---|---|
| React 18 | ~44 KB | ~52 KB |
| Vue 3 | ~33 KB | ~40 KB |
| Svelte | ~2 KB | ~5 KB |
| Angular 17 | ~60 KB | ~70 KB |
| Preact | ~4 KB | ~8 KB |
| Solid.js | ~7 KB | ~12 KB |
SPA向け推奨JSバジェット
| バジェットティア | JSバジェット | 適用先 |
|---|---|---|
| タイト | 150-200 KB | シンプルなCRUDアプリ、モバイルファースト |
| 適度 | 200-300 KB | 機能豊富なアプリ、デスクトップオーディエンス |
| 余裕あり | 300-400 KB | 複雑なダッシュボード、内部ツール |
これらは転送サイズ（圧縮後）です。非圧縮サイズは3-4倍大きくなります。
コード分割戦略
400 KBの総JSバジェットは、初期読み込みが400 KBでなければならないという意味ではありません。コード分割により、現在のルートに必要なものだけを読み込めます：
初期バンドル: 80-120 KB（フレームワーク + 共有コード + 現在のルート）
ルートチャンク: 各20-60 KB（ナビゲーション時に読み込み）
ベンダーチャンク: 30-80 KB（必要時に読み込み）
ツリーシェイキングの影響
ツリーシェイキングはバンドルから未使用のコードを削除します。ライブラリによって効果は異なります：
- lodash —
import _ from 'lodash'の代わりにimport { debounce } from 'lodash-es'を使用すると~70 KB節約 - moment.js（72 KB gzip）→ date-fns（ツリーシェイク可能、必要なものだけ使用）
- Material UI — 名前付きインポートでバンドルサイズを50%以上削減可能
ユースケース
JavaScriptバジェットはSPAチームにとって重要です。JSは読み込み時間とインタラクティビティに最も影響を与えるアセットだからです。ReactベースのECプラットフォームを構築するチームは、初期ページ読み込みに250 KBのJSバジェット、後続のルートごとに50 KBを設定するかもしれません。これにより、どのライブラリを含めるか、初期ビューにサーバーサイドレンダリングを使用するか、コード分割をどれだけ積極的に行うかの判断が強制されます。JSバジェットなしでは、SPAは日常的に1-2 MBのJavaScriptを出荷します。