# Optimizing Angular by analyzing npm packages with webpack
Español | English
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.
# 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?
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:
"stats": "ng build --stats-json & webpack-bundle-analyzer dist/my-app/stats.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.