Webpack バンドルの追跡と分析に使用するツール
アプリを可能な限り小さくするように 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 と統合して、アプリが大きくなりすぎたときに通知されるようにします。
設定方法は次のとおりです。
最大サイズを確認する
アプリを最適化して、できる限り小さくします。製品版ビルドを実行します。
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 すると、出力ファイルが十分に小さいかどうかを確認できます。
障害が発生した場合は、次のようにします。
参考資料
- Alex Russell: 目標となる実際の読み込み時間について
バンドルが非常に大きい理由を分析する
バンドルを深く掘り下げて、どのモジュールが容量を占めているかを確認することをおすすめします。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
を使用して、サイズを構成する要因を調べる