Webpack バンドルの追跡と分析に使用するツール
アプリをできる限り小さくするように 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 と統合して、アプリが大きすぎるときに通知されるようにします。
次のように構成します。
最大サイズを確認する
アプリを最適化して、できる限り小さくします。本番環境ビルドを実行します。
次のように
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 すると、出力ファイルが
小型化する:
失敗した場合:
関連情報
- Alex Russell が語る実際の読み込み時間について 目標
バンドルが非常に大きい理由を分析する
バンドルを詳しく調べて、どのモジュールがスペースを使用しているかを確認することもできます。Google Meet webpack-bundle-analyzer:
<ph type="x-smartling-placeholder">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
で何がサイズになっているかを調べる