Three simple ways to inspect a Webpack bundle

Jannik Hell
Jan 25, 2017 · 3 min read

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:

Image for post
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.

Image for post
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:

Image for post
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 to the tool to get a nice responsive treemap of your bundle:

source-map-explorer bundle.js
Image for post
Module treemap of Webpack bundle generated with Source Map Explorer


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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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