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

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

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

Ivan Akulov

アプリをできる限り小さくするように webpack を設定する場合でも、何が含まれるか把握したりできますまたは、kubectl の「get」コマンドやユーザーの目に触れることがありませんでした。

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

バンドルサイズをトラッキングする

アプリのサイズをモニタリングするには、次のコマンドを使用します。開発中の 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 セクションのスクリーンショット。比較対象
Bundlesize の出力を

次のように構成します。

最大サイズを確認する

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

次のように bundlesize セクションを package.json に追加します。 content:

// 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:

</ph>

（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 を使わない）？含まれているコードをすべて使用していますか（例: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 で何がサイズになっているかを調べる