Skip to content
Get packs

Webpack Bundle Analyzer

Webpack plugin and CLI that shows your bundle's contents as an interactive zoomable treemap.

GitHub Download v5.4.0
Stars
12.7k
Forks
518
Licence
MIT
Language
JavaScript
Last update
10 days ago
Type
Dev tool

What it is

When a web app is built with webpack, the output files (bundles) can get large and it is hard to see why. This tool reads the build output and draws an interactive treemap, where each box's size reflects how much space a module takes up, so you can zoom in and spot what is taking the most room. It can also report gzip, Brotli, or Zstandard sizes.

  • Open a treemap report in the browser after a production build to see the largest modules
  • Generate a static HTML report file to share with a teammate
  • Export a JSON report for further analysis in other tools
  • Find modules that were included by mistake

Great for

  • Frontend developers trying to shrink a slow-loading webpack bundle
  • Teams checking whether an unexpected library ended up in their bundle
  • Anyone who wants to compare module sizes in a visual, clickable report

Not ideal for

  • Projects that do not use webpack, since the tool is built around webpack output
  • People who only need a quick number rather than a visual breakdown
  • Non-developers, because it requires editing a webpack config or running a build command
Step-by-step guide: how to use Webpack Bundle AnalyzerInstall, first run, examples, tips and FAQs
Webpack Bundle Analyzer vs webpack-dashboardMadge vs Webpack Bundle Analyzer

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js · webpack

    Install with NPM

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

    Install with Yarn

    yarn add -D webpack-bundle-analyzer
  2. 2

    Run it

    • Install the package as a dev dependency using npm or Yarn
    • Add new BundleAnalyzerPlugin() to the plugins array in your webpack config
    • Run your webpack build
    • The report opens in your browser by default (server mode on 127.0.0.1:8888)
  3. 3

    Get the most out of it

    • Use analyzerMode set to static to generate a report.html file you can keep or share
    • Set analyzerMode to json to produce a JSON report for scripting
    • Set defaultSizes to gzip, brotli, or parsed to choose which size is shown first
    • Set generateStatsFile to true to also write a webpack stats JSON file

Downloads

Source code (.zip)main branch · straight from GitHubRelease v5.4.0Release notes and source

Strengths

  • Shows interactive, zoomable treemap of bundle contents
  • Parses minified bundles to estimate real module sizes
  • Supports gzip, Brotli, and Zstandard size measurements

Trade-offs

  • Requires webpack, so it does not help with other bundlers based on the README
  • Needs to be added to a build configuration, which takes some setup knowledge
  • README was truncated, so some options and details could not be fully verified

How it compares

ProjectStarsTypeLevelUpdatedBest for
webpack-bundle-analyzer (this)12.7kDev toolbeginner10 days agoFrontend developers trying to shrink a slow-loading webpack bundle
storybook91.4kDev toolintermediate4 days agoFrontend teams building a shared component library or design system
webpack66kDev toolintermediate4 days agoFrontend developers building single-page or multi-page web apps
webpack-dashboard14kDev toolbeginner2.2 years agoFrontend developers who run webpack-dev-server or webpack in watch mode daily
electron-react-boilerplate24.3kDev toolintermediate7 days agoDevelopers who know React and want to build a cross-platform desktop app
tui.editor18kLibraryintermediate2.3 years agoWeb developers who want an embeddable Markdown editor in their own site or app

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.