序章

Webアプリの読み込みパフォーマンスを向上させるための最も重要な要素の1つは、バンドルサイズです。 webpack のような最新のモジュールバンドラーは、デッドコードを排除するためにツリーシェイクを実行します。

ただし、大規模なアプリでは、ツリーシェーキングによって一部の不正なインポートが適切に処理されない場合があり、これらによりバンドルサイズが肥大化します。 または、特定のモジュールが遅延読み込みを適切に行わず、メインバンドルに肥大化を追加する場合があります。

この記事では、アプリのバンドルサイズを分析するための2つのツールwebpack-bundle-analyzerとsource-map-explorerを紹介します。

前提条件

この記事をフォローしたい場合は、次のものが必要になります。

このチュートリアルは、ノードv16.2.0、npm v7.18.1、@angular/cli v12.0.5、@angular/core v12.0.5、webpack-bundle-analyzer v4.4.2、およびsource-map-explorerv2.5.2。

webpack-bundle-analyzerを使用する

webpack-bundle-analyzer は、アプリのビルド時にAngularCLIが自動的に生成できるwebpack統計JSONファイルを分析するツールです。

まず、開発依存関係としてプロジェクトにwebpack-bundle-analyzerをインストールする必要があります。

  1. npm install webpack-bundle-analyzer@4.4.2 --save-dev

次に、Angular CLIを使用して本番用のアプリをビルドし、--stats-jsonを指定して、webpack統計データがdistフォルダーにエクスポートされるようにします。

  1. ng build --configuration=production --stats-json

次に、 npx を使用して、stats.jsonファイルに対してローカルwebpack-bundle-analyzerを実行します。

  1. npx webpack-bundle-analyzer dist/*/stats.json

これにより、本番アプリバンドルのインタラクティブな FoamTreeマップを使用して、ポート8888でローカルサーバーが起動します。

サンプルのAngularアプリの結果の例を次に示します。

A screenshot of the results for webpack-bundle-analyzer. Modules are represented by differently-sized boxes indicating their file size. Most of the boxes in the main bundle appear to be are related to Angular. Other modules appear to be in a separate chunk.

この視覚化を操作して、表示するバンドル（メイン、ベンダー、チャンクなど）を選択できます。

package.jsonでは、オプションで、webpack-bundle-analyzerを呼び出す新しいnpmスクリプトを作成できます。

package.json
"scripts": {
  "stats": "webpack-bundle-analyzer dist/*/stats.json",
},

これで、本番ビルドの統計にアクセスするときはいつでも、次のコマンドを使用できます。

  1. npm run stats

このコマンドはwebpack-bundle-analyzer dist/*/stats.jsonを実行します。

注：npmスクリプトは最初にローカルのnode_modulesフォルダーを検索するため、ここでnpxを使用する必要はありません。

これでwebpack-bundle-analyzerの紹介は終わりです。

source-map-explorerを使用する

source-map-explorer は、バンドルで生成されたソースマップファイルを使用して、バンドラーのサイズと構成を分析し、バンドルの視覚化をレンダリングするツールです。

開始するには、最初にdev依存関係としてプロジェクトにパッケージをインストールします。

  1. npm install source-map-explorer@2.5.2 --save-dev

次に、本番用にアプリをビルドし、--source-mapフラグを使用して、JavaScriptバンドルごとにソースマップファイルが生成されるようにします。

  1. ng build --configuration=production --source-map

この後、バンドルからJavaScriptファイルの1つをポイントすることにより、ビジュアライゼーションを生成して起動できます。 たとえば、メインバンドルを見ることができる場合、次のようになります。

  1. npx source-map-explorer dist/*/main.*.js

サンプルのAngularアプリの結果の例を次に示します。

A screenshot of the results for source-map-explorer. Modules are represented by differently-sized boxes indicating their file size. Most of the boxes in the main bundle appear to be are related to Angular.

これでsource-map-explorerの紹介は終わりです。

結論

この記事では、アプリのバンドルサイズを分析するための2つのツールwebpack-bundle-analyzerとsource-map-explorerを紹介しました。

これらのツールは、プロジェクトで使用されているすべてのモジュールを識別し、カスタマイズまたは代替パッケージとの交換によって手動で対処できる特に大きなモジュールがあるかどうかを判断するのに役立ちます。

webpack-bundle-analyzerを使用して、アプリケーションのバンドルサイズを縮小するで学習を続けてください。