Shrink Your Angular CLI Production Builds with Source Map Explorer

So what’s really going on with all those dist/*.bundle.js files that Webpack spits out of the Angular CLI generation process?

This video will give you a five minute way to have a look for yourself - and get ideas to shrink your production build sizes. The magic tool you need is Source Map Explorer.

I learned this tip from Jim Cooper’s excellent Pluralsight course on “Angular Best Practices“ and thought it we be good to pass on in a way you can add to your own projects.

First then vid, or read on for the commands I added to package.json.

First we’re going to install Source Map Explorer. I’m going to do things locally, since I like the idea of the project being self contained:

npm install source-map-explorer --save-dev --save-exact

Because source-map-explorer is a lot to type, I’ll create a little alias for it:

"scripts": {
    ...
    "sme": "source-map-explorer"
    ...
}

Now to use Source Map Explorer, you’re clearly going to need some source maps! You generate those by adding --sourcemaps=true to your prod build. To keep things DRY, I like to just decorate the dist target with my own dist-with-maps target. Something like this:

"scripts": {
    ...
    "dist-with-maps": "npm run dist -- --sourcemaps=true",
    ...
}

We’re all infrastructured up! So I’ll now run that new target so I can generate my source maps:

npm run dist-with-maps

Ok. Now we’re good to go. You should see a bunch of source maps in your /dist directory now.

Let the sme magic commence!

npm run sme dist\vendor.ea432fea42.bundle.js

And remember you can click on areas to drill down, and then back on the headings to drill up!

Enjoy!