# webpack-bundle-analyzer — Interactive Bundle Size Visualization

> webpack-bundle-analyzer is a webpack plugin and CLI that generates an interactive treemap of your JavaScript bundle contents to help identify bloat and optimize build output.

## Install

Save in your project root:

# webpack-bundle-analyzer — Interactive Bundle Size Visualization

## Quick Use
```bash
# Install
npm install --save-dev webpack-bundle-analyzer
# Generate stats and open treemap
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-7139feff
Author: AI Open Source