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
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
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"
5- npm run source-map-explorer
Let's see how it looks (yes, moment is heavy)
There is a dropdown that allows you to navigate chunks
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)
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?
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 --prodagain2- 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...)
I already did 1, this was a clean fresh build. 2 I will try. Thanks for the quick reply.
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 :
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 💚
As far as I know, duplicated bundles does not increase bundle size. They should be included once if imported in many places.
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!
Thanks for sharing Salim!
Should we only enable the two angular.json values for testing purposes?
If you had them enabled in prod what issues would it cause?
Does the glob search include one or many files?
name/*/.js"
I assume it finds ALL the files?