DEV Community

loading...
Cover image for Analyzing Angular bundle with Source Map Explorer

Analyzing Angular bundle with Source Map Explorer

salimchemes profile image Salim Chemes ・2 min read

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!

Discussion (3)

pic
Editor guide
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 Author

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.