WebpackBundleAnalyzerまたはsource-map-explorerを使用してAngularAppBundleのサイズを分析する方法

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

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

npm install [email protected] --save-dev

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

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

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

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

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

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

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

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

package.json

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

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

npm run stats

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

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

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

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

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

npm install [email protected] --save-dev

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

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

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

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

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

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

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

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