Webpack-bundle-analyzer
by webpack
Interactive Bundle Size Visualizer for Webpack Projects
Visualize webpack bundle composition with an interactive zoomable treemap to identify bloat and optimize your JavaScript bundles.
- 12,686+ GitHub stars
- Built with JavaScript
- Interactive zoomable treemap visualization of bundle contents
- MIT License license
About This Project
Webpack Bundle Analyzer transforms your webpack build statistics into an interactive, color-coded treemap visualization that makes understanding bundle composition effortless. Instead of parsing through text-based reports, developers can visually explore their bundles, instantly spotting oversized dependencies and optimization opportunities.
The tool excels at revealing hidden problems like duplicate packages, unexpectedly large libraries, or modules that shouldn't be in production builds. Each rectangle in the treemap represents a module, sized proportionally to its actual impact on your bundle size, making it immediately clear where your kilobytes are going.
Available as both a webpack plugin and standalone CLI utility, it integrates seamlessly into existing build pipelines. The interactive interface lets you zoom into specific modules, compare gzipped versus parsed sizes, and export reports for team review. This visibility is crucial for maintaining fast load times and optimal application performance.
With over 12,000 stars, it has become an essential tool in the webpack ecosystem for teams serious about performance optimization and maintaining lean production bundles.
Key Features
- Interactive zoomable treemap visualization of bundle contents
- Side-by-side comparison of parsed, gzipped, and stat sizes
- Works as both webpack plugin and standalone CLI tool
- Automatic detection of duplicate modules across bundles
- Exportable HTML reports for sharing and documentation
- Real-time analysis during webpack build process
How You Can Use It
Identify and eliminate duplicate dependencies in your webpack bundles
Debug why production bundles are larger than expected
Audit third-party library sizes before adding them to projects
Generate visual reports for performance optimization discussions with teams
Monitor bundle size changes across builds in CI/CD pipelines
Find and remove unused code or modules accidentally included in builds
Who Is This For?
Frontend developers, build engineers, and DevOps teams working with webpack who need to optimize bundle sizes and improve application load performance