Three simple ways to inspect a Webpack bundle

Webpack Visualizer

I use Webpack Visualizer pretty heavily. It gives you a nice visual overview about the parts of your bundle.

webpack --profile --json > webpack-stats.json
Webpack Visualizer output

Webpack Analyzer

The Webpack Analyzer gives you a more comprehensive analysis of your bundle.

Module dependency graph in Webpack Analyzer
webpack --profile --json > webpack-stats.json
Analysis results in Webpack Analyzer

Source Map Explorer

The Source Map Explorer is a tool I discovered just recently which helps me a lot getting a clear understanding of my minified bundle.js in terms of file size. It determines which file each byte in your minified bundle came from.

npm install -g source-map-explorer
yarn global add source-map-explorer
source-map-explorer bundle.js bundle.js.map
Module treemap of Webpack bundle generated with Source Map Explorer

Conclusion

I think that there is no “one analysis tool to rule them all” since every tool gives a different perspective on your bundle.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store