チャンクとは何か？バンドル出力の分割可能な単位

チャンクとは、バンドラーが出力する単一のファイルであり、code splittingがアプリを個別に読み込み可能な部分に分割する際に作成されます。

バンドラーがコードを分割すると、生成されるファイルはチャンクと呼ばれます。各チャンクはブラウザが単独で取得できる単位です。チャンクがあるからこそ、アプリは小さな初期バンドルを読み込み、残りを必要に応じて取得できます。チャンクがどのように命名・グループ化されるかはキャッシュに直接影響し、これはデプロイとCIに関わる関心事です。

チャンクの作成方法

チャンクは動的import、複数のentry point、そしてバンドラーが共有依存関係を切り出すことから生まれます。初期チャンクはページとともに読み込まれ、非同期チャンクはそのコードが必要になったときにオンデマンドで読み込まれます。

vendorチャンクと共有チャンク

バンドラーはしばしばサードパーティライブラリをvendorチャンクに、共有されるアプリコードを共通チャンクに分割します。これらはfeatureのコードよりも変更頻度が低いため、デプロイをまたいでキャッシュされ、繰り返しのダウンロードを節約します。

命名とハッシュ化

本番のチャンクはファイル名にcontent hashを含みます。
ハッシュはチャンクの内容が変わったときのみ変化します。
変更されていないチャンクは名前を保ち、デプロイ後もキャッシュされたままになります。

チャンクが多すぎる、または少なすぎる

非常に大きなチャンクは読み込みを遅らせ、キャッシュ効率も悪くなります。非常に小さなチャンクはリクエストのオーバーヘッドを増やします。チャンク戦略の調整は、キャッシュ効率とリクエスト数のバランスです。

CI/CDにおけるチャンク

buildはすべてのチャンクを出力フォルダに、それぞれcontent hash付きで出力し、pipelineがそれらをCDNにアップロードします。ハッシュは変更されたチャンクについてのみ変わるため、デプロイは最小限のキャッシュを無効化し、安定したvendorチャンクによって再訪ユーザーはほとんどのダウンロードをスキップできます。

重要なポイント

チャンクとはバンドラーが出力する1つのファイルであり、多くの場合code splittingから生じます。
vendorチャンクや共有チャンクはデプロイをまたいでキャッシュされ、ダウンロードを節約します。
content hashを含むチャンク名により、デプロイでは変更されたものだけが無効化されます。