DEV Community

Cover image for Analyzing Angular bundle with Source Map Explorer
Salim Chemes
Salim Chemes

Posted on • Updated on

Analyzing Angular bundle with Source Map Explorer

Performance matters, you probably already heard that before. Today, in FE applications we add tons of code to get our tasks done. In the meantime, we add modules, dependencies, functions, templates, directives, etc.

It is very important to have a clear picture of our applications so we can make improvements based on that.

In this post we will see how to include source-map-explorer into our Angular app.

What is source-map-explorer?
The source map explorer determines which file each byte in your minified code came from. It shows you an interactive tree-map visualization to help you debug where all the code is coming from.

Before starting I would like to recommend this video from Stephen Fluin, angular team member. You will find some very interesting concepts about how to measure and improve performance. Additionally, the video recommends source-map-explorer.

I have created a simple application with some dependencies and modules including. The app only lists the dependencies with repo and npm links.
The goal is to see how the map looks.

Disclaimer: this is not a real world app, so you will see more benefits of this tool on medium/big applications. Give it a try on your side!

  • ngx-moment
  • ngx-date-fns
  • angular-calendar
  • ngx-mask
  • ng-bootstrap

demo app
Alt Text

Install source-map-explorer
1- npm install source-map-explorer
2- on angular.json, make sure you have these 2 flags in true



"sourceMap": true, // this is to enable the source maps to get a better analysis
"namedChunks": true, // to get identify modules names and not use random numbers for lazy loading modules


Enter fullscreen mode Exit fullscreen mode

3- ng build prod
4- On package.json, include this on scripts section (make sure you replace your app name after dist/)



"source-map-explorer": "source-map-explorer dist/your-angular-app-name/**/*.js"


Enter fullscreen mode Exit fullscreen mode

5- npm run source-map-explorer

Let's see how it looks (yes, moment is heavy)
Alt Text

There is a dropdown that allows you to navigate chunks

Alt Text

And that it's! Let's wrap up with some conclusions

  • source-map-explorer is a very helpful tool to understand how your bundle is to then make improvements
  • there is another tool called webpack-bundle-analyzer (I wrote this post about it). The reason source-map-explorer is more accurate is because Angular has some features built on top of webpack. So to webpack-bundle-analyzer could misscategorize or missatribute some of the source code impacting the bundle result
  • bundle size is the most important thing to be aware in terms on performance. Before adding any new module/dependency, try to think on how this is going to impact on the bundle.

References

Thanks for reading!

Top comments (9)

Collapse
 
stealthmusic profile image
Jan Wedel

Hey Salim, thanks for your article. We are just trying to reduce our bundle size and this helped a lot. I just ran this tool today and we found a couple of things we can remove already!

One thing: We have a box with 13% of the bundle size called "No source". Do you know by chance how to find out what that is?

Collapse
 
salimchemes profile image
Salim Chemes

Hi Jan, glad it helped. I just ran the report in a big project and I don't have any "No Source". Seems to be some source code not able to be classified.
I would try a couple of things
1- remove content under /dist and run ng build --prod again
2- run the report with webpack-bundle-analyzer and see if you got the same (just to compare, you can check this post dev.to/salimchemes/analyzing-angul...)

Collapse
 
stealthmusic profile image
Jan Wedel

I already did 1, this was a clean fresh build. 2 I will try. Thanks for the quick reply.

Collapse
 
bassemibrahim profile image
Bassem • Edited

Hey Salim, Thanks alot for your article. It helped me alot analyzing our angular project.

however, I see bundles duplicated, is that normal?

I can see 2 major boxes :

  • "main-es5.e5e1f29cd21c7203b5a6.js • 3.62 MB • 43.7%"
  • main-es2015.e5e1f29cd21c7203b5a6.js • 3.38 MB • 40.9%

Both of them contain lots of duplicated bundles like angular material modules.

I feel that shouldn't be the case, what do you think?

Thanks again for your article 💚

Collapse
 
vugar005 profile image
Vugar

As far as I know, duplicated bundles does not increase bundle size. They should be included once if imported in many places.

Collapse
 
ronancodes profile image
Ronan Connolly 🛠

The comparison against webpack-bundle-analyzer is the answer I was looking for!
I develop Angular applications and was wondering which one was better suited.

source-map-explorer seems to be the way to go!
I've heard of one of the Angular core members saying source-map-explorer was more accurate for Angular but didn't know why until now.

Thanks!

Collapse
 
rakiabensassi profile image
Rakia Ben Sassi

Thanks for sharing Salim!

Collapse
 
ronancodes profile image
Ronan Connolly 🛠

Should we only enable the two angular.json values for testing purposes?
If you had them enabled in prod what issues would it cause?

Collapse
 
ronancodes profile image
Ronan Connolly 🛠

Does the glob search include one or many files?
name/*/.js"
I assume it finds ALL the files?