Bundle analyzer
A treemap of the packages and modules inside each bundle, with the biggest byte hogs drawn as the biggest boxes.
See it
What it is
A bundle analyzer turns build statistics into a treemap of chunks, packages, and modules. Bigger rectangles mean more bytes under the selected size measure, making a duplicated library, every Moment.js locale shipped for one date format, or an editor loaded on the home page much easier to spot than it is in a minified file.
Reach for one when a bundle grows unexpectedly or before deciding what to delete, replace, split, or tree-shake. webpack-bundle-analyzer can compare stat, parsed, and compressed sizes, which helps separate large source inputs from what the browser actually receives.
Gotcha: the treemap diagnoses bytes, not runtime cost or user impact. The largest image library may sit behind a rarely opened route, while a smaller startup module runs expensive code on every visit. Confirm the chunk's route and load timing in the Network and Performance panels before optimizing the biggest rectangle.
Ask AI for it
Add webpack-bundle-analyzer to this webpack production build. Register BundleAnalyzerPlugin with analyzerMode: 'static', openAnalyzer: false, and reportFilename: 'bundle-report.html' so CI writes the report without launching a browser. If this project builds with Vite or Rollup instead, use rollup-plugin-visualizer with template: 'treemap', gzipSize: true, brotliSize: true, and filename: 'bundle-report.html'. Report the ten largest modules and packages by parsed and gzip size, flag duplicate package versions, map each large chunk to the route that loads it, and recommend deletion, direct imports, tree shaking, or import() code splitting for each finding. Include the analyzer config and before and after production bundle sizes.