このページは Cloud Translation API によって翻訳されました。

アプリをモニタリング、分析する

Webpack バンドルの追跡と分析に使用するツール

Ivan Akulov

Twitter GitHub ホームページ

アプリを可能な限り小さくするように webpack を構成する場合でも、アプリを追跡し、その内容を把握することは重要です。それ以外の場合は、アプリのサイズを 2 倍にする依存関係をインストールすれば、ユーザーが気づかなくなります。

このセクションでは、バンドルの理解に役立つツールについて説明します。

バンドルのサイズを管理する

アプリのサイズをモニタリングするには、開発中に webpack-dashboard を使用し、CI でバンドルサイズを使用します。

webpack ダッシュボード

webpack-dashboard は、依存関係、進行状況などの詳細サイズで Webpack の出力を強化します。次のように表示されます。

このダッシュボードは、大規模な依存関係を追跡する際に役立ちます。追加すると、すぐに [モジュール] セクションに表示されます。

有効にするには、webpack-dashboard パッケージをインストールします。

npm install webpack-dashboard --save-dev

構成ファイルの plugins セクションにプラグインを追加します。

// webpack.config.js
const DashboardPlugin = require('webpack-dashboard/plugin');

module.exports = {
    plugins: [
    new DashboardPlugin(),
    ],
};

Express ベースの開発サーバーを使用している場合は、compiler.apply() を使用します。

compiler.apply(new DashboardPlugin());

ぜひダッシュボードをお試しいただき、改善の余地がある箇所を見つけてください。たとえば、[モジュール] セクションをスクロールして、大きすぎで小さな代替に置き換えられるライブラリを見つけます。

バンドルサイズ

bundlesize では、webpack アセットが指定されたサイズを超えていないことを確認します。CI と統合して、アプリが大きくなりすぎたときに通知されるようにします。

GitHub の pull リクエストの CI セクションのスクリーンショット。CI ツールには Bundlesize の出力が

設定方法は次のとおりです。

最大サイズを確認する

アプリを最適化して、できる限り小さくします。製品版ビルドを実行します。
bundlesize セクションを package.json に追加し、次の内容を追加します。
```
// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*"
    }
  ]
}
```

npx を指定して bundlesize を実行します。

npx bundlesize

これにより、各ファイルの gzip で圧縮されたサイズが出力されます。

PASS  ./dist/icon256.6168aaac8461862eab7a.png: 10.89KB
PASS  ./dist/icon512.c3e073a4100bd0c28a86.png: 13.1KB
PASS  ./dist/main.0c8b617dfc40c2827ae3.js: 16.28KB
PASS  ./dist/vendor.ff9f7ea865884e6a84c8.js: 31.49KB

各サイズに 10 ～ 20% ずつ追加すれば、最大サイズが得られます。このように 10 ～ 20% のマージンがあれば、アプリのサイズが大きくなりすぎた場合は警告しながら、通常どおりにアプリを開発できます。

bundlesize を有効にする
bundlesize パッケージを開発の依存関係としてインストールします。
```
npm install bundlesize --save-dev
```

package.json の bundlesize セクションで、具体的な最大サイズを指定します。一部のファイル（画像など）では、ファイルごとではなく、ファイル形式ごとに最大サイズを指定することをおすすめします。

// package.json
{
  "bundlesize": [
    {
      "path": "./dist/*.png",
      "maxSize": "16 kB",
    },
    {
      "path": "./dist/main.*.js",
      "maxSize": "20 kB",
    },
    {
      "path": "./dist/vendor.*.js",
      "maxSize": "35 kB",
    }
  ]
}

チェックを実行する npm スクリプトを追加します。

// package.json
{
  "scripts": {
    "check-size": "bundlesize"
  }
}

push ごとに npm run check-size を実行するように CI を構成します。（プロジェクトを開発する場合は、bundlesize を GitHub と統合します）。

これで、npm run check-size を実行するかコードを push すると、出力ファイルが十分に小さいかどうかを確認できます。

Bundlesize の出力のスクリーンショット。すべてのビルド結果に「合格」とマークされます。

障害が発生した場合は、次のようにします。

Bundlesize の出力のスクリーンショット。一部のビルド結果には「不合格」とマークされます。

参考資料

Alex Russell: 目標となる実際の読み込み時間について

バンドルが非常に大きい理由を分析する

バンドルを深く掘り下げて、どのモジュールが容量を占めているかを確認することをおすすめします。webpack-bundle-analyzer を使用する。

（github.com/webpack-contrib/webpack-bundle-analyzer の画面録画）

webpack-bundle-analyzer はバンドルをスキャンし、その中のものを可視化します。この可視化を使用して、大規模な依存関係または不要な依存関係を見つけます。

アナライザを使用するには、webpack-bundle-analyzer パッケージをインストールします。

npm install webpack-bundle-analyzer --save-dev

webpack config にプラグインを追加します。

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

本番環境用ビルドを実行します。プラグインによって、ブラウザで統計ページが表示されます。

デフォルトでは、統計情報ページには解析されたファイルのサイズ（バンドルに表示されるファイルのサイズ）が表示されます。gzip のサイズは実際のユーザーエクスペリエンスに近いため、比較することをおすすめします。サイズを切り替えるには左側のサイドバーを使用します。

レポートで確認する項目は以下のとおりです。

大規模な依存関係。なぜこれほど大きいのか？より小規模な代替手段（React ではなく Preact など）？含まれているコードをすべて使用しているか（Moment.js には、使用されないことが多く、削除できる可能性のあるロケールが多数含まれています）？
依存関係が重複しています。同じライブラリが複数のファイルで繰り返し表示されていますか？（たとえば、webpack 4 では optimization.splitChunks.chunks オプションを使用し、webpack 3 では CommonsChunkPlugin を使用して共通のファイルに移動します）。または、バンドルに同じライブラリの複数のバージョンが存在するかどうか。
類似の依存関係。ほぼ同じ処理を行う類似のライブラリがあるか（例: moment と date-fns、または lodash と lodash-es）。1 つのツールにとどめてみてください。

また、Sean Larkin による webpack バンドルについての優れた分析もご覧ください。

まとめ

webpack-dashboard と bundlesize を使用して、アプリのサイズを把握する
webpack-bundle-analyzer を使用して、サイズを構成する要因を調べる