webpack-bundle-analyzer

When you build a web application, a tool called webpack takes all your JavaScript files, libraries, and dependencies and packages them into one or more compressed output files called bundles. These bundles can grow large over time, and it is often unclear which libraries are responsible for most of the size. This tool, Webpack Bundle Analyzer, solves that problem by creating a visual map of what is inside each bundle.

After you add it to your webpack build, it generates an interactive diagram where each rectangle represents a file or library inside the bundle. Larger rectangles mean larger size contributions. You can click and zoom into any section to explore what is nested inside it. The diagram also shows sizes in three ways: the raw size before any compression, the size after standard gzip compression, and the size after Brotli compression (a newer format that often produces smaller files than gzip).

The tool runs in a few different modes. The default mode starts a small local web server and opens the diagram automatically in your browser each time you build. A static mode saves the diagram as a standalone HTML file you can share with a teammate. There is also a JSON output mode for automated checks or custom tooling. A command-line version lets you analyze an existing webpack stats file without modifying your build config.

The main use cases, as the README describes them, are finding out what is actually inside your bundle, spotting which libraries take up the most space, catching dependencies that ended up in the bundle by accident, and identifying opportunities to reduce the overall size. Smaller bundles mean faster page loads, which matters especially for users on slow connections or mobile devices.

This is an official package under the webpack GitHub organization and is installed as a development dependency, meaning it is only used during the build process and does not affect what ships to end users.