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

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

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

Ivan Akulov

アプリのサイズを可能な限り小さくするように 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());

ダッシュボードを自由に操作して、改善の余地があると思われる部分を見つけてください。たとえば [Modules] セクションをスクロールして、大きすぎて置き換え可能なライブラリを見つけます。適しています。

セットサイズ

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

これで完了です。ここで、npm run check-size を実行するかコードを push すると、出力ファイルが小型化する：

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

失敗した場合:

bundlesize の出力のスクリーンショット。一部のビルド結果に「失敗」とマークが付いている

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

バンドルを詳しく調べて、どのモジュールがスペースを使用しているかを確認することもできます。Google Meet 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 サイズで比較することをおすすめします。 experience;サイズを切り替えるには左側のサイドバーを使用します

レポートでは以下の点に注目してください。

依存関係が大きい。なぜこんなに大きいのですか？より小規模な代替手法（例:事前準備 React を使わない）？含まれているコードをすべて使用していますか（例:Moment.js には、使用頻度が低く削除できる言語 / 地域が多数含まれています。
重複する依存関係。同じライブラリが複数のファイルに繰り返されているか（ optimization.splitChunks.chunks オプション（webpack 4 の場合）または CommonsChunkPlugin では、（webpack 3 では）共通のファイルに移動できます）。または、バンドルに同じライブラリの複数のバージョンが含まれていますか？
類似の依存関係。ほぼ同じジョブを行う類似のライブラリはありますか。（例: moment と date-fns、または lodash と lodash-es）。1 つのツールだけにとどめてください。

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

まとめ

webpack-dashboard と bundlesize を使用してアプリのサイズを常に把握する
webpack-bundle-analyzer で何がサイズになっているかを調べる