How to use the Source Map Explorer and what is it useful for?

One important part of SPA performance nowadays is the so called bundle size. It is the actual application size that needs to be transferred over the wire to the user's browser. Keeping the bundle size as low as possible is important for decreasing the initial startup time. The data needs to be sent over the internet and interpreted by the browser afterwards. Modern SPA frameworks, libraries or build tools use a technique called tree shaking to get rid of unused code thus decreasing the final bundle size. You basically shake your code tree and only keep things that are tied or connected to the stem.

Tree shaking is very powerful and effective as long as the developer does not accidentally tie code to the stem. Checking this regularly is important and one important tool for that is the Source Map Explorer.

The Source Map Explorer allows you to inspect your final bundles in a graphical way. For that you need to build the SPA with source maps enabled. Then simply run npx source-map-explorer path/to/source-maps.js. The analysis result can opened in browser tab then. You will probably see a lot of libraries and files included. Now you can check for unexpected included files and code.