JavaScript バンドルサイズ最適化：500 KB から 80 KB へ

JavaScript はウェブで最もコストの高いリソースです — バイト単位で見ると、JavaScript ファイルは 同等のサイズの画像よりコストが高く、デコードするだけでなくパースと実行が必要なためです。 500 KB の JavaScript バンドルは、中級スマートフォンでメインスレッドを 2〜4 秒間ブロックする 可能性があります。100 KB 未満にする方法を解説します。

ステップ 1: 現状を測定する

最適化の前に現在のバンドルを監査します。npx @next/bundle-analyzer を実行します。next.config.js で ANALYZE=true npm run build で有効にします。 ツリーマップはどのパッケージが最も大きく、どのページがどのモジュールを含むかを示します。

ステップ 2: 未使用の依存関係を削除する

ステップ 3: ツリーシェイキング

• バレルファイルからのデフォルトインポートではなく、名前付きインポートを使用する。
• ユーティリティモジュールでのサイドエフェクトインポートを避ける。
• ライブラリの package.json で sideEffects: false を確認する。

ステップ 4: コード分割

Next.js はページレベルで自動的にコードを分割します。サブページ分割には動的インポートを 使用します。リッチテキストエディター・チャートライブラリ・PDF ビューアー・マップコンポーネント・ タブやモーダルの後ろにある初期ロード時に非表示のコンポーネントが良い候補です。

ステップ 5: サードパーティスクリプトの最適化

Next.js の <Script> コンポーネントをサードパーティスクリプトに使用します:strategy="lazyOnload"（他のすべての後）、strategy="afterInteractive"（ハイドレーション後、ほとんどのアナリティクスに適切）、strategy="worker"（Web Worker 内、メインスレッドから完全に分離）。

Before / After: 実際の数値