コード分割
アプリケーションのJavaScriptを、起動時に1つの大きなバンドルとして読み込む代わりに、必要に応じて読み込まれる複数の小さなバンドル(チャンク)に分ける手法である。初回のダウンロード量が減って表示が速くなる、Webパフォーマンスの要だ。
問題はこうである。大きなアプリを1ファイルにまとめると、ユーザーは何かが動く前に全コードをダウンロードし、ブラウザは解析しなければならない。一度も開かないかもしれないページや機能のコードまで含めてだ。コード分割はこれを細かく切る。典型的な境界は、ルート単位(訪れたページのコードだけ読み込む)、コンポーネント単位(重いモーダルやチャートのライブラリを使うときだけ読み込む)、そしてベンダー分割(ほとんど変わらない依存を切り出してキャッシュを効かせる)である。
仕組みの土台は動的 import() で、Vite、webpack、esbuildなどのバンドラーがこれを見つけて別チャンクに自動で分割する。初期バンドルが小さくなれば、Time to InteractiveとCore Web Vitalsが改善する。ただし、チャンクを細かくしすぎるとネットワークの往復が増える。現代のWebアプリで最も重要な性能手法の一つである。