Registry / devops / webpack-bundle-analyzer

webpack-bundle-analyzer

library5.3.0jsnpmunverified

Webpack Bundle Analyzer is a crucial development tool for visualizing the contents of Webpack output bundles as an interactive, zoomable treemap. It helps developers identify what modules contribute most to bundle size, discover unintentionally included dependencies, and optimize the overall build output. The current stable version, 5.3.0, leverages modern ECMA features and continues to be actively maintained with a regular cadence of minor and patch releases. A key differentiator is its ability to parse minified bundles and display their real, gzipped, Brotli, or Zstandard sizes, providing accurate insights into production build sizes. It functions both as a Webpack plugin and a standalone CLI utility.

devops

npm install webpack-bundle-analyzer

github ↗package ↗

INSTALL

IMPORT

SIG · WEBPACK-BUNDLE-ANA

webpack-bundle-analyzer

devopsjavascriptv5.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

BundleAnalyzerPlugin

✓ import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

✗ import BundleAnalyzerPlugin from 'webpack-bundle-analyzer';

The plugin is a named export, not a default export. Ensure you destructure it correctly.

BundleAnalyzerPlugin (CJS)

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

✗ const BundleAnalyzerPlugin = require('webpack-bundle-analyzer');

For CommonJS, use named destructuring as shown. Importing the entire module directly will not expose the constructor correctly.

CLI Usage

✓ npx webpack-bundle-analyzer

While primarily used as a plugin, it also offers a CLI utility for analyzing existing Webpack stats files.

This Webpack configuration demonstrates how to integrate `webpack-bundle-analyzer` as a plugin, starting an interactive server to visualize your bundle.

import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import path from 'path'; export default { mode: 'production', entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, plugins: [ new BundleAnalyzerPlugin({ analyzerMode: 'server', // 'server', 'static', 'json', 'disabled' analyzerHost: '127.0.0.1', analyzerPort: 8888, openAnalyzer: true, generateStatsFile: false, statsFilename: 'stats.json', logLevel: 'info' // 'info', 'warn', 'error', 'silent' }) ] };

webpack-bundle-analyzer --version

Debug

Known issues

breakingVersion 5.x of `webpack-bundle-analyzer` requires Node.js version 20.9.0 or higher. Older Node.js environments are no longer supported.

fix

Upgrade your Node.js environment to version 20.9.0 or newer, or stick to `webpack-bundle-analyzer` v4.x for older Node.js versions.

affects: >=5.0.0

breakingSupport for Webpack 4 was dropped in `webpack-bundle-analyzer` v5.x. Users of Webpack 4 should remain on `webpack-bundle-analyzer` v4.x.

fix

If using Webpack 4, downgrade to `webpack-bundle-analyzer@4.x.x`. For Webpack 5+, use `webpack-bundle-analyzer@5.x.x`.

affects: >=5.0.0

gotchaWhen `analyzerMode` is set to 'server', the plugin attempts to start an HTTP server on a specified port (default 8888). If this port is already in use by another application, the server will fail to start.

fix

Configure a different `analyzerPort` in the plugin options, for example: `new BundleAnalyzerPlugin({ analyzerPort: 8889 })`.

affects: >=1.0.0

deprecatedOlder versions (prior to v4) had `statPath` and `analyzerPort` with different default values or configurations. Ensure you check the options specific to your major version.

fix

Always consult the documentation for your installed major version to ensure correct option usage, especially for `analyzerPort` and `reportFilename`.

affects: <4.0.0

Errors

Common errors & fixes

Error: Cannot find module 'webpack-bundle-analyzer'

The package was not installed or is not resolvable from the current project context.

fix

Run `npm install --save-dev webpack-bundle-analyzer` or `yarn add -D webpack-bundle-analyzer`.

Error: listen EADDRINUSE: address already in use 127.0.0.1:8888

The default port (8888) for the analyzer's HTTP server is already in use by another process.

fix

Specify a different port in the plugin options: `new BundleAnalyzerPlugin({ analyzerPort: 8889 })`.

TypeError: BundleAnalyzerPlugin is not a constructor

Incorrectly importing the plugin, often by trying to import it as a default export or not destructuring a named export.

fix

Ensure you are using named import/require: `import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';` or `const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');`.

Upgrade

Version history

5.3.0latest on npm

Audit

Dependencies

webpackrequiredRequired peer dependency as it's a Webpack plugin; typically supports recent major Webpack versions.

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/webpack/webpack-bundle-analyzer ↗

packagehttps://www.npmjs.com/package/webpack-bundle-analyzer ↗