Benjamin Lannon

Select a theme. Click on the overlay or the button again to exit

Analyzing JS Bundles with source-map-explorer

Posted on:

danvk/source-map-explorer offers a visual representation of any JavaScript bundle that also has a source-map. This will work across bundlers (Webpack, Parcel, Rollup, etc) as long as the bundle you want to analyze also has a source-map that can be passed along.

To use it, you can use npx in the terminal as follows where the two arguments are the bundle and the source-map.

npx source-map-explorer bundle.js bundle.js.map

Below is an example of it being run on a previous version of my own website's app.js file which is a bundle that includes clientside JS when it was built with Gatsby 2.x.

Vizualization of my personal site's app.js bundle

In this particular example, you can see some large portions of the bundle:

Now where this could come in handy to do this is to reduce code that isn't used but shipped down due to the way the code is bundled. Some examples could include:

Being able to vizualize the bundles exposes places where optimizations can be made and reduce the amount of JS that is needed to be shipped and parsed down to an enduser.