Three simple ways to inspect a Webpack bundle

Webpack is a module bundler which means that it bundles together all of your JavaScript files to one or multiple files commonly named bundle.js.

To inspect this bundle in terms of file size and composition there are three tools I find very helpful.

Webpack Visualizer

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

Webpack Visualizer takes a webpack-stats.json file that Webpack generates with the following command:

webpack --profile --json > webpack-stats.json

Drag & Drop this file into the Webpack Visualizer site to get the following result:

Webpack Visualizer output

Webpack Analyzer

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

It draws a graph of all dependent modules in your application which is awesome for projects with less dependencies. Graphs of projects with a lot of dependencies seems eventually more confusing than meaningful to me.

Module dependency graph in Webpack Analyzer

It also shows descriptive warnings and errors of your Webpack build as well as hints how to optimize your Webpack build.

Webpack Analyzer takes a webpack-stats.json file that Webpack generates with the following command:

webpack --profile --json > webpack-stats.json

When you upload or Drag & Drop this file into the Webpack Analyzer you’ll get the following overview page:

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.

Unlike Webpack Visualizer and Webpack Analyzer it has to be installed globally on your machine via NPM:

npm install -g source-map-explorer

Or via Yarn:

yarn global add source-map-explorer

Now you have to provide your bundle.js and the corresponding Source Map file bundle.js.map to the tool to get a nice responsive treemap of your bundle:

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.

I personally use the Webpack Visualizer a lot during development when I introduce new packages to the project. The circular graph gives an instant feedback about the proportions regarding size.

For a much more comprehensive overview regarding file size in the minified bundle I use Source Map Explorer.

The Webpack Analyzer has its use cases too but I don’t use it regularly.

Thanks for reading my first medium blog post 💚 Feel free to comment with suggestions and questions. I’d love to hear it!

Or follow me on Twitter if you like: @joeclever