【決定版】AngularにおけるvendorChunkのすべて：メリット・デメリット、設定方法、代替手段まで

2024-06-20

Angularにおける「vendorChunk」の利用：詳細解説

Angularのビルドプロセスにおいて、「vendorChunk」は、サードパーティライブラリ（Bootstrap、jQueryなど）とアプリケーションコードを別々のチャンクに分割するオプションです。開発環境ではデフォルトで有効化されていますが、本番環境では状況に応じて有効化・無効化を判断する必要があります。

「vendorChunk」の利点と欠点

利点

キャッシュの向上: サードパーティライブラリは変更頻度が低いため、別々のチャンクとして配信することで、ブラウザが一度ダウンロードしたライブラリをキャッシュし、再読み込みを抑制できます。これにより、ページの読み込み速度が向上します。
開発効率の向上: 開発中にアプリケーションコードを変更した場合、「vendorChunk」が有効であれば、サードパーティライブラリを再ダウンロードする必要がなくなり、ビルド時間が短縮されます。

欠点

バンドルサイズ増加: 「vendorChunk」を有効化すると、ビルドされるバンドルサイズが大きくなります。これは、特に小型のアプリケーションにおいては問題となる可能性があります。
メンテナンスの複雑化: 「vendorChunk」を有効化すると、ビルド設定やコード管理が複雑化します。また、本番環境と開発環境で設定を切り替える必要が生じる場合もあります。

本番環境において「vendorChunk」を利用するかどうかは、以下の要素を考慮する必要があります。

アプリケーションのサイズ: アプリケーションのサイズが大きい場合、「vendorChunk」を利用することでキャッシュ効果がより顕著になり、パフォーマンスが向上する可能性があります。
サードパーティライブラリの更新頻度: サードパーティライブラリが頻繁に更新される場合、「vendorChunk」を利用すると、ブラウザが古いライブラリを使い続ける可能性があり、問題が発生する可能性があります。
開発頻度: 開発頻度が高い場合、「vendorChunk」を利用すると、ビルド時間が長くなる可能性があります。

一般的には、以下の状況で「vendorChunk」を無効化することが推奨されています。

アプリケーションのサイズが小さい
サードパーティライブラリが頻繁に更新される
開発頻度が高い

「vendorChunk」の利用を判断するツールとして、以下のようなものがあります。

「vendorChunk」は、Angularのビルドプロセスにおける便利なオプションですが、本番環境では状況に応じて利用を判断する必要があります。上記の利点と欠点、そしてアプリケーションの状況を考慮し、最適な設定を選択してください。

補足

Angular CLI 8以降では、「vendorChunk」はデフォルトで無効化されています。

Angularにおける「vendorChunk」のサンプルコード

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "vendorChunk": true
          }
        }
      }
    }
  }
}

この設定の場合、ng build コマンドを実行すると、vendor.jsという名前の別々のチャンクにサードパーティライブラリがビルドされます。

以下のコードは、vendor.jsチャンクをHTMLファイルに読み込む例です。