Salim ChemesPerformance 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!
