Optimize Angular bundle size with these steps

Introduction:

Many big projects are built with the Angular framework which is scalable and robust, but we miss caring about the bundle size.

Because having projects with large bundle sizes can have an impact on the user experience

So in this blog, we will discover together how to analyze our current bundle size and apply some techniques to optimize it.

Happy reading!

First step: monitor our current bundle size :

The first step we need is to analyze the current bundle size, so in this section, I’m going to list the needed tools for that

Tools needed:

Option A: Webpack Bundle Analyzer

Source: https://github.com/webpack-contrib/webpack-bundle-analyzer

webpack-bundle-analyzer is a great tool that helps show the current bundle content as a convenient interactive zoomable treemap.

Usage:

Install webpack-bundle-analyzer:

npm install --save-dev webpack-bundle-analyzer