2021-09-16

# Optimizing Angular by analyzing npm packages with webpack

Beyond the optimization of an Angular application through for example the deferred loading of modules or by using a change detection strategy based on OnPush, we must also take into account the fact that the third-party packages that we include, will also affect the loading time of the application, either by their own size or even by their initialization time. That is why optimizing Angular by analyzing npm packages should also be one of our goals before putting the application into production.

At the speed at which our work environment moves, we are sure that we can think of packages that we have stopped using (in my case for example I have replaced ng-zorro by Tailwind CSS with Angular Material) and that may in some cases have remained as an imported dependency in the code without us realizing it. There are also packages that covered needs that the language already supports (such as using lodash instead of high-level JavaScript methods like map,_filter,_reduce,_some, every o_forEach), but whose dependency was not removed during the refactoring iterations. And let's not forget those third-party package dependencies that serve to cover simple functionalities that we could implement ourselves with little effort if we knew how much such a package increases the size of our application.

# How to analyze the packages of our Angular application?

Webpack has a feature that consists in generating a visual map of the webpack package composition and since this is the default tool for Angular CLI module packaging, why not take advantage of it?

# Installation

First of all, we will add the necessary package to our development dependencies:

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

# Configuración de scripts

Next we will modify the package.json file of our application to simplify the process of generating the package analysis:

...,
  "scripts": {
    ...,
    "stats": "ng build --stats-json & webpack-bundle-analyzer dist/my-app/stats.json"
  },
...,

package.json

# Package analysis

From this point on, we have automated the analysis and visualization of our package map by means of the following command:

npm run-script stats

And this will be the result that we will see in our browser:

Interactive map of packages with webpack.

With this information we can now know what is inside the packages, which modules occupy more space and which modules should not be there, so go ahead with the optimization.