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

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

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

Ivan Akulov

アプリのサイズを可能な限り小さくするように webpack を構成する場合でも、webpack の追跡と内容の把握は重要です。そうでない場合は、アプリのサイズを 2 倍にする依存関係をインストールできます。

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

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

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

webpack-dashboard

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

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

構成するには:

最大サイズを確認する

アプリを最適化して、できるだけ小さくします。本番環境ビルドを実行します。

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 を構成します。（GitHub でプロジェクトを開発している場合は、bundlesize を GitHub と統合します）。

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

bundlesize の出力のスクリーンショット。すべてのビルド結果が「Pass」とマークされている

失敗した場合は、次のようにします。

bundlesize の出力のスクリーンショット。一部のビルド結果に「Fail」と表示される

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

バンドルを詳しく調べて、どのモジュールがスペースを使用しているかを確認することもできます。webpack-bundle-analyzer について説明します。

（github.com/webpack-contrib/webpack-bundle-analyzer のスクリーンレコーダー）

webpack-bundle-analyzer はバンドルをスキャンし、バンドル内のものを可視化します。この可視化を使用して、サイズの大きい依存関係や不要な依存関係を見つけます。

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

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

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

// 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 でサイズの増加要因を詳しく調べる