Webpack Bundle Size Analyzer

3.1.0 verified Sat Apr 25 auth: no javascript maintenance

A CLI tool and webpack plugin that analyzes webpack's JSON output to display a tree of packages included in the bundle, sorted by size contribution. Version 3.1.0 is the latest stable release with no recent updates. It helps identify which dependencies are bloating the bundle. Unlike webpack-bundle-analyzer, it provides a plain text tree view rather than an interactive visualizer, and works with webpack 1–3 only. It supports two usage modes: piping webpack --json output to the CLI or adding a plugin to write a report file. Note: sizes are reported before minification/uglification.

Common errors

error Error: Cannot find module 'webpack-bundle-size-analyzer' ↓

cause Package not installed or global install missing.

fix

Run 'npm install -g webpack-bundle-size-analyzer' or add to devDependencies.

error TypeError: Cannot read property 'modules' of undefined ↓

cause Input JSON from webpack --json is malformed or empty.

fix

Ensure webpack --json is piped correctly and webpack config is valid.

Warnings

gotcha Sizes are reported before minification/uglification, so actual bundle sizes may be smaller. ↓

fix Use webpack-bundle-analyzer for post-minification size analysis.

breaking This tool only works with webpack 1–3; webpack 4+ changed the JSON output format. ↓

fix Use webpack-bundle-analyzer or source-map-explorer for webpack 4+.

deprecated Package is in maintenance mode; no new features or webpack 4+ support planned. ↓

fix Consider migrating to webpack-bundle-analyzer.

Install

npm install webpack-bundle-size-analyzer

yarn add webpack-bundle-size-analyzer

pnpm add webpack-bundle-size-analyzer

Imports

WebpackBundleSizeAnalyzerPlugin

wrong

const WebpackBundleSizeAnalyzerPlugin = require('webpack-bundle-size-analyzer').WebpackBundleSizeAnalyzerPlugin

correct

import { WebpackBundleSizeAnalyzerPlugin } from 'webpack-bundle-size-analyzer'

ESM import works in bundler environments; CommonJS require also works but note the .WebpackBundleSizeAnalyzerPlugin property.

default import

wrong

const webpackBundleSizeAnalyzer = require('webpack-bundle-size-analyzer')

correct

import webpackBundleSizeAnalyzer from 'webpack-bundle-size-analyzer'

There is no default export; the default import is undefined. Use named import instead.

Quickstart

Shows how to add the plugin to a webpack config (TypeScript) to write a size report file.

import { WebpackBundleSizeAnalyzerPlugin } from 'webpack-bundle-size-analyzer';
import { Configuration } from 'webpack';

const config: Configuration = {
  entry: './src/index.js',
  output: {
    path: '/dist',
    filename: 'bundle.js'
  },
  plugins: [
    new WebpackBundleSizeAnalyzerPlugin('./reports/size-report.txt')
  ]
};

export default config;