Install

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

Usage (as a plugin)

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

It will create an interactive treemap visualization of the contents of all your bundles.

This module will help you:

1. Realize what's really inside your bundle
2. Find out what modules make up the most of its size
3. Find modules that got there by mistake
4. Optimize it!

And the best thing is it supports minified bundles! It parses them to get real size of bundled modules. And it also shows their gzipped, Brotli, or Zstandard sizes!

Options (for plugin)

new BundleAnalyzerPlugin(options?: object)

Absolute output paths

reportFilename and statsFilename can be absolute paths. Use absolute paths when you want the generated report or stats file to be written outside webpack's output.path. Relative paths are resolved against the bundle output directory.

const path = require("node:path");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      reportFilename: path.resolve(__dirname, "reports/report.html"),
      generateStatsFile: true,
      statsFilename: path.resolve(__dirname, "reports/stats.json"),
    }),
  ],
};

Usage (as a CLI utility)

You can analyze an existing bundle if you have a webpack stats JSON file.

You can generate it using BundleAnalyzerPlugin with generateStatsFile option set to true or with this simple command:

webpack --profile --json > stats.json

If you're on Windows and using PowerShell, you can generate the stats file with this command to avoid BOM issues:

webpack --profile --json | Out-file 'stats.json' -Encoding OEM

Then you can run the CLI tool.

webpack-bundle-analyzer bundle/output/path/stats.json

Options (for CLI)

webpack-bundle-analyzer <bundleStatsFile> [bundleDir] [options]

Arguments are documented below:

bundleStatsFile

Path to webpack stats JSON file

bundleDir

Directory containing all generated bundles.

options