Next.jsの開発サーバー（next dev）と本番ビルド（next build/next start）の内部動作の違いを解説する記事が公開されています。next devはアクセス時にその場でコンパイルするJIT（Just-In-Time）方式、next buildは全ルートを事前にコンパイル・最適化するAOT（Ahead-Of-Time）方式という設計哲学の違いがあると説明しています。
開発環境でレイアウトファイルを変更した際に感じる遅さの主因は、barrel import（ライブラリ全体を読み込むインポート方式）によるモジュール数の爆発的増加だとしています。モジュール数の多さがモジュールグラフの構築や変換処理のコストを増大させるためです。
加えて、開発環境では検証コード入りのReactビルドが使われ、StrictModeによってコンポーネントが意図的に二重実行される点、キャッシュ・プリレンダー・プリフェッチが無効化されている点も、本番にはない「重り」として挙げられています。webpackとTurbopackの性能差にも触れています。
出典が伝えている要点
- next dev（開発サーバー）はJIT（Just-In-Time）コンパイル方式で、ページに初回アクセスした時点で必要な分だけその場でコンパイルする
- next build（本番ビルド）はAOT（Ahead-Of-Time）方式で、全ルートを事前にコンパイル・最適化してファイル化する
- 開発環境ではレイアウトファイルを変更すると、影響を受ける全ページの初回コンパイルに遅延が生じる
- コンパイル遅延の主な原因はbarrel import（バレルインポート）経由でライブラリ全体を読み込んでしまうことによるモジュール数の増加である
- モジュール数の多さがモジュールグラフ構築や変換処理のコストを増大させ、コンパイル時間に影響する
- webpackとTurbopackでビルド・コンパイル性能に差がある
- 開発環境では検証コードを含む開発用Reactビルドが使用される
- React の StrictMode により、開発環境では意図的にコンポーネントが二重実行される
- 開発環境ではキャッシュ・プリレンダー・プリフェッチの機能が無効化されている
原文より
注文を受けてから調理するレストラン」vs「作り置きのビュッフェ」という比喩で、dev/prodの設計哲学の違いを表現している
コンパイル時間 ≒ モジュール数 × ファイル変換コスト、という関係で性能を説明している
出典: zenn.dev