Skip to content

Webpack Bundle Analyzer

Webpack Bundle Analyzer shows which modules take up space in files built by webpack.

Visit Webpack Bundle Analyzer

Can it explain why your webpack output grew?

Webpack is a build tool that combines app code and dependencies into files a browser can download. The analyzer reads webpack build statistics and can inspect the generated files. Its chart uses bigger rectangles for larger pieces of code. Check that your project actually builds with webpack before adding the plugin.

Which size should you compare?

Stat size describes the module before build optimizations. Parsed size describes the generated output. Gzip or Brotli estimates compressed size. Compare the same mode in both reports. If webpack keeps its files only in memory, some parsed or compressed figures may be unavailable. The report does not show which files a particular visitor downloaded.

What does it cost and where does the report go?

The package is MIT-licensed, and the current package metadata requires Node.js 20.9 or later. Save a local HTML or JSON report and record which build produced it. The report can reveal what is in the app. Keep it out of public deployment folders and check its contents before sharing. If you use the report server, keep it on your own machine.

What would you investigate after a build gets bigger?

On paper, mark the files an imaginary homepage loads first and the files it opens only for an optional editor. If the first download grew after adding the editor, look for the editor’s modules in that file. Use the same size mode in both reports, then confirm from the browser whether the file actually arrives on the homepage.