Umi Webpack Bundle Analyzer

4.4.2 verified Sat Apr 25 auth: no javascript

Webpack plugin and CLI that generates an interactive zoomable treemap visualization of bundle contents, showing module sizes (stat, parsed, gzip). Current stable version is 4.4.2 (2023). A fork of webpack-contrib/webpack-bundle-analyzer by the UmiJS team. Actively maintained with regular releases. Supports both ESM and CJS imports. Key differentiator: designed to work seamlessly with UmiJS framework but also compatible with any Webpack project. Provides server, static, JSON, and disabled modes for flexible integration.

Common errors

error Error: options is required ↓

cause The plugin constructor expects an options object. Passing nothing or undefined triggers this error in some versions.

fix

new BundleAnalyzerPlugin({}) or provide at least one option.

error TypeError: BundleAnalyzerPlugin is not a constructor ↓

cause Using default import instead of named import.

fix

Use const { BundleAnalyzerPlugin } = require('umi-webpack-bundle-analyzer') or import { BundleAnalyzerPlugin } from ...

error Module not found: Error: Can't resolve 'umi-webpack-bundle-analyzer' ↓

cause Package not installed or webpack resolve misconfiguration.

fix

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

error Error: Cannot find module 'webpack' ↓

cause The plugin has a peer dependency on webpack; missing or version mismatch.

fix

Install webpack: 'npm install --save-dev webpack@4' (or 5 compatible).

Warnings

breaking In v4, the default export was removed; you must use the named export BundleAnalyzerPlugin. ↓

fix Change 'import BundleAnalyzerPlugin from ...' to 'import { BundleAnalyzerPlugin } from ...'.

deprecated The 'startAnalyzer' option is deprecated in favor of 'openAnalyzer'. ↓

fix Use 'openAnalyzer' instead (default true).

gotcha The plugin does not work with webpack 5 in some versions; ensure you have the latest 4.x or upgrade to compatible version. ↓

fix Update to umi-webpack-bundle-analyzer@4.2.0 or later.

gotcha Requires Node.js >= 10.13.0. Older Node versions cause cryptic errors. ↓

fix Upgrade Node.js to at least 10.13.0.

gotcha When using 'generateStatsFile', the stats are emitted to the output directory; ensure write permissions. ↓

fix Set 'output.path' in webpack config to a writable directory.

Install

npm install umi-webpack-bundle-analyzer

yarn add umi-webpack-bundle-analyzer

pnpm add umi-webpack-bundle-analyzer

Imports

BundleAnalyzerPlugin

wrong

const BundleAnalyzerPlugin = require('umi-webpack-bundle-analyzer')

correct

import { BundleAnalyzerPlugin } from 'umi-webpack-bundle-analyzer'

ESM and CJS both supported; named export.

BundleAnalyzerPlugin

wrong

const BundleAnalyzerPlugin = require('umi-webpack-bundle-analyzer').default

correct

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

No default export; use named destructuring.

default

wrong

import BundleAnalyzerPlugin from 'umi-webpack-bundle-analyzer'

correct

import { BundleAnalyzerPlugin } from 'umi-webpack-bundle-analyzer'

No default export in v4; must use named import.

analyzer

wrong

const analyzer = require('umi-webpack-bundle-analyzer').analyzer

correct

import { analyzer } from 'umi-webpack-bundle-analyzer'

CLI utility also exported; both ESM and CJS work.

Quickstart

Shows how to use the plugin in a webpack config to generate a static HTML report and stats JSON file.

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'report.html',
      openAnalyzer: false,
      generateStatsFile: true,
      statsFilename: 'stats.json',
      logLevel: 'info'
    })
  ]
};