Webpack Bundle Analyzer

The analyzer reports several types of module sizes. You can control which is shown by default using defaultSizes:

• stat: The "input" size of your files, before any transformations like minification. Obtained from Webpack's stats object.
• parsed: The "output" size of your files (e.g., the minified size after using Uglify/Terser).
• gzip: The size of the parsed bundles/modules after gzip compression.
• brotli: The size of the parsed bundles/modules after Brotli compression.
• zstd: The size of the parsed bundles/modules after Zstandard compression (requires Node.js 22.15.0+).

To visualize your bundles during the webpack build process, import BundleAnalyzerPlugin and add it to your webpack.config.js plugins array.

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

You can install the package via npm or yarn as a development dependency.

# NPM
npm install --save-dev webpack-bundle-analyzer

# Yarn
yarn add -D webpack-bundle-analyzer

Once the report is open, you can filter the displayed chunks:

• Sidebar: Click the > button at the top left. Under "Show chunks", select or deselect specific chunks.
• Chunk Context Menu: Right-click (or Ctrl-click) a specific chunk to:
  • Hide chunk: Hides the selected chunk.
  • Hide all other chunks: Hides everything except the selected chunk.
  • Show all chunks: Resets the view to show all chunks.

You can control how the analyzer outputs data using the analyzerMode option:

• server (Default): Starts a local web server (e.g., at http://127.0.0.1:8888) to host the interactive visualization. This is ideal for development.
• static: Generates a standalone HTML file in your Webpack output directory. This is useful for CI/CD pipelines or sharing reports.
• json: Generates a JSON report file. Useful if you want to process the bundle data programmatically.
• disabled: Prevents the analyzer from running. This can be useful to toggle the plugin via environment variables.

// Example: Generate a static HTML report instead of a server
new BundleAnalyzerPlugin({
  analyzerMode: 'static',
  reportFilename: 'report.html'
})

If you want to save the raw Webpack stats data (the JSON output from stats.toJson()) in addition to the visual report, set generateStatsFile to true and provide a statsFilename.

The file will be saved to your Webpack output directory.

new BundleAnalyzerPlugin({
  generateStatsFile: true,
  statsFilename: 'my-stats.json',
  // You can also pass custom Webpack stats options
  statsOptions: {
    assets: true,
    modules: true,
  }
})

If your static HTML report appears blank in Jenkins, it is due to Jenkins' Content Security Policy (CSP) blocking the JavaScript required to render the report.

To resolve this, you must relax the Jenkins CSP for Directory Browser Support by adjusting the hudson.model.DirectoryBrowserSupport.CSP setting.

If you only see stat sizes and not gzip or parsed sizes, it is likely because the files do not exist on your file system. This commonly happens when using webpack-dev-server, which keeps files in RAM.

If running via CLI, you will see: Error parsing bundle asset "your_bundle_name.bundle.js": no such file.

To fix this, ensure the files are actually written to disk before running the analyzer.

By default, reportFilename and statsFilename are relative to the webpack output.path. To write files outside of the bundle directory, provide absolute paths using path.resolve.

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"),
    }),
  ],
};

The BundleAnalyzerPlugin constructor accepts an optional options object to customize the report generation and server behavior.

new BundleAnalyzerPlugin(options?: object)