webpack/webpack-bundle-analyzer

これは何？

主な機能

• 01バンドル内のモジュールをインタラクティブなズーム可能ツリーマップで表示
• 02webpack プラグインとしても、stats ファイルを扱う単体 CLI としても利用可能
• 03minify 済みバンドルを解析して各モジュールの実サイズを表示
• 04stat、parsed、gzip、Brotli、Zstandard の各サイズをレポート
• 05HTTP サーバー、静的 HTML レポート、JSON ファイルとして出力
• 06サイドバーまたはコンテキストメニューからチャンクを絞り込み

ユースケース

• webpack プロジェクトでサイズの大きい依存関係や、誤って含まれた依存関係を見つける
• 最適化の過程でバンドルサイズがどう変化するかを追跡する
• CI やサーバー上で、既存の stats.json を使ってバンドルを調査する
• チームで共有する静的なバンドルレポートを生成する

クイックスタート

1. 1

   npmでプラグインを開発依存関係としてインストールします

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

   webpackの設定のplugins配列にBundleAnalyzerPluginを追加し、webpackを実行します

使う前に知っておきたいこと

• !webpackバンドルのみを解析するため、他のバンドラーの出力には役立ちません。

収録されている特集

トピック

よくある質問

webpack-bundle-analyzer とは？

バンドル内でサイズを占めるモジュールを把握できる、ズーム可能なインタラクティブツリーマップを生成する webpack プラグイン兼 CLI。 Webpack Bundle Analyzer は、webpack の出力に実際に何が含まれているかを確認するためのツールです。バンドルごとに、各モジュールを矩形で表したインタラクティブなズーム可能ツリーマップを描画するため、バンドルサイズへの影響が大きいモジュールを簡単に見つけられます。誤って含まれたモジュールの特定や、最適化する箇所の判断に役立ちます。

webpack-bundle-analyzer は無料で使えますか？ライセンスは？

webpack-bundle-analyzer は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

webpack-bundle-analyzer は今もメンテナンスされていますか？

活発にメンテナンス中。webpack-bundle-analyzer の最終コミットは 2026年11月6日 です。

webpack-bundle-analyzer は何に使えますか？

webpack プロジェクトでサイズの大きい依存関係や、誤って含まれた依存関係を見つける 最適化の過程でバンドルサイズがどう変化するかを追跡する CI やサーバー上で、既存の stats.json を使ってバンドルを調査する チームで共有する静的なバンドルレポートを生成する

webpack-bundle-analyzer のインストール方法は？

npmでプラグインを開発依存関係としてインストールします: npm install --save-dev webpack-bundle-analyzer webpackの設定のplugins配列にBundleAnalyzerPluginを追加し、webpackを実行します

webpack-bundle-analyzer はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/webpack/webpack-bundle-analyzer