Angular, and every modern web application, includes dependencies to makes our life easier. Even most of them are optimised, this is not free at all. Every dependency we add is going to increase our bundle.
We don't want to re-invent the wheel, but I think before adding more stuff to our bundle we should ask before:
- Is this exactly what I need?
- How is going to impact the bundle?
Another important thing to consider is that we should implement lazy-loading as much as we can in order to split our code better and improve the performance. You can take a look to this post for more details.
So, what is this post about? We will review webpack-bundle-analyzer, a tool to see what is inside of our bundle. It will create an interactive treemap visualization of the contents of all your bundles. We can navigate the map to identify what can be removed/optimized
Steps to install
npm install --save-dev webpack-bundle-analyzer
ng build --stats-json
npx webpack-bundle-analyzer dist/your-project-name/stats.json
Note that after dist/ you need to set your project name, I am using an example project including some extra dependencies to be reviewed on the map. In a real world app, you will probably have more dependencies and modules to analyze
After running the last command line you will have this
This is how the map looks
Now let's navigate moment js, as you can see, moment is not a small dependency
Finally we can look for a specific module
Conclusions
webpack-bundle-analyzer is a very useful tool to
- Get a big picture of our project
- Identify dependencies that can be replaced with small ones
- Identify big modules and split them in smaller pieces
References
Top comments (1)
Thanks. I wonder what we can use with the new EsBuild bundler