webpack-bundle-analyzer — Interactive Bundle Size Visualization

Introduction

webpack-bundle-analyzer is a webpack plugin and standalone CLI that visualizes the contents of your JavaScript bundles as an interactive zoomable treemap. It helps developers identify large dependencies, duplicated modules, and unnecessary code that inflates bundle size.

What webpack-bundle-analyzer Does

• Generates an interactive treemap showing every module in every bundle
• Displays three size modes: stat (raw), parsed (after transforms), and gzipped
• Identifies duplicate modules included across multiple chunks
• Supports both webpack plugin mode and standalone CLI for pre-generated stats files
• Opens a local server with the visualization or exports a static HTML report

Architecture Overview

When used as a webpack plugin, it hooks into the compilation lifecycle and reads the stats object after bundling completes. In CLI mode, it parses a webpack stats JSON file. The stats data is processed to build a hierarchical module tree grouped by chunk, then rendered as a Foamtree-based interactive treemap in the browser. The local HTTP server serves the visualization and supports hot-reloading when stats change.

Self-Hosting & Configuration

• Add as a webpack plugin in your webpack config for automatic analysis on each build
• Use CLI mode with webpack-bundle-analyzer stats.json for one-off analysis
• Set analyzerMode: "static" to generate a standalone HTML file instead of a server
• Configure openAnalyzer: false to prevent auto-opening the browser in CI environments
• Use excludeAssets to filter out source maps or vendor chunks from the visualization

Key Features

• Three size representations: stat, parsed, and gzip for accurate size assessment
• Zoomable treemap: click into chunks to inspect individual modules
• Search: filter modules by name to quickly find specific dependencies
• Sidebar: view exact byte sizes and percentages for selected modules
• Static export: generate shareable HTML reports for code review or CI artifacts

Comparison with Similar Tools

• source-map-explorer — Uses source maps for module-level size; webpack-bundle-analyzer uses webpack stats for richer chunk context
• bundle-stats — Focuses on build-over-build comparison; webpack-bundle-analyzer provides a single-build deep dive
• Vite Bundle Visualizer — Rollup/Vite equivalent; webpack-bundle-analyzer is webpack-specific
• Bundlephobia — Checks npm package size before install; webpack-bundle-analyzer shows actual bundled output

FAQ

Q: Does it work with webpack 5? A: Yes. It supports webpack 4 and 5 as both a plugin and a CLI tool.

Q: Can I use it in CI without opening a browser? A: Yes. Set analyzerMode: "static" and openAnalyzer: false to generate an HTML file as a build artifact.

Q: Does it support code-split chunks? A: Yes. Each chunk is shown separately in the treemap, making it easy to see what ends up in each split.

Q: How accurate is the gzip size? A: It uses Node.js zlib to gzip each module individually, which closely approximates real-world compressed transfer sizes.

Sources

• https://github.com/webpack/webpack-bundle-analyzer
• https://www.npmjs.com/package/webpack-bundle-analyzer