Repolode
Submit
webpack

webpack/webpack-bundle-analyzer

A webpack plugin and CLI that renders bundle contents as an interactive zoomable treemap to show which modules take up the most size.

View on GitHub
Stars
12,652
Forks
517
Open issues
24
Last commit
yesterday

What is it?

Webpack Bundle Analyzer helps developers see what is actually inside their webpack output. It draws each bundle as an interactive, zoomable treemap where every rectangle represents a module, so the largest contributors to bundle size are easy to spot. It is useful for finding modules that were included by mistake and for deciding where to optimize.

It can run as a webpack plugin, which by default starts a local HTTP server to show the report, or writes a static HTML report or a JSON file. It can also be used as a CLI against an existing webpack stats JSON file. Minified bundles are supported: the tool parses them to estimate the real size of each bundled module, and it reports stat, parsed, gzip, Brotli, and Zstandard sizes.

The plugin exposes options for the server host and port, report filename and title, default size type, compression algorithm, and which assets to exclude. Chunks can be filtered from a sidebar or a right-click menu inside the report.

Key features

  • 01Interactive zoomable treemap of bundle modules
  • 02Works as a webpack plugin or a standalone CLI on stats files
  • 03Parses minified bundles to show real module sizes
  • 04Reports stat, parsed, gzip, Brotli, and Zstandard sizes
  • 05Outputs an HTTP server, static HTML report, or JSON file
  • 06Filters chunks from a sidebar or context menu

Use cases

  • Finding large or accidentally included dependencies in a webpack project
  • Tracking how bundle size changes over time during optimization
  • Inspecting a bundle from an existing stats.json in CI or on a server
  • Generating a static bundle report to share with a team

Quick start

  1. 1

    Install the plugin as a dev dependency with npm

    npm install --save-dev webpack-bundle-analyzer
  2. 2

    Add BundleAnalyzerPlugin to your webpack config plugins array and run webpack

Things to know

  • Analyzes webpack bundles only, so it does not help with other bundlers' output.

In collections

Diagrams, charts & animated visualizations

Topics

#webpack#bundle-size#treemap#visualization#javascript#build-tool#analyze#bundle#chart#interactive

FAQ

What is webpack-bundle-analyzer?
A webpack plugin and CLI that renders bundle contents as an interactive zoomable treemap to show which modules take up the most size. Webpack Bundle Analyzer helps developers see what is actually inside their webpack output. It draws each bundle as an interactive, zoomable treemap where every rectangle represents a module, so the largest contributors to bundle size are easy to spot. It is useful for finding modules that were included by mistake and for deciding where to optimize.
Is webpack-bundle-analyzer free to use? What license does it have?
webpack-bundle-analyzer is open source under the MIT license. Check the license terms before using it in commercial products.
Is webpack-bundle-analyzer still maintained?
Actively maintained. The last commit to webpack-bundle-analyzer was on Nov 6, 2026.
What can I use webpack-bundle-analyzer for?
Finding large or accidentally included dependencies in a webpack project Tracking how bundle size changes over time during optimization Inspecting a bundle from an existing stats.json in CI or on a server Generating a static bundle report to share with a team
How do I install webpack-bundle-analyzer?
Install the plugin as a dev dependency with npm: npm install --save-dev webpack-bundle-analyzer Add BundleAnalyzerPlugin to your webpack config plugins array and run webpack
Where can I get webpack-bundle-analyzer?
The source code and installation instructions are on GitHub: https://github.com/webpack/webpack-bundle-analyzer

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects