How to Optimize an Angular Application?

In this blog post, we have listed some of the techniques which can be used to first measure the performance of an angular application and then optimize the speed, loading time and performance of an angular application.

How to Measure the Performance of an Angular Application?

To measure the performance of an angular application, generate a production build of the app using following command in the root directory of Angular CLI project:

ng build --prod --source-map

We can use an npm package source-map-explorer to analyze and generate a report of the performance of the angular application. To get started, install the npm package using the following command:

npm install source-map-explorer

Now add following line inside the scripts section of the package.json file:

"bundle:report": "source-map-explorer dist/demo-app/**/*.js"

Please change the project name i.e. ‘demo-app’ to the name of your project.

Now we can run the following command to generate the performance report of the app:

npm run bundle:report

Following are some of the techniques to optimize the speed, loading time and performance of an angular application:

1. Lazy Loading

Lazy loading means loading the resources, required for the component, only when that particular component is requested to load. It improves the performance of the angular application. In an angular application, lazy loading is implemented by dividing the application into modules.

Resources:

2. Preloading

Preloading helps to improves the performance of the angular application by preloading the resources in cache required for faster future navigation.

Resources:

https://blog.bitsrc.io/10-tricks-to-optimize-your-angular-app-44208f616bf0

3. Web Workers

Web workers are used to offload certain heavy functionality from the main application thread thus improving the performance of the angular application.

4. Optimization of Template Expressions

Try not to use high computation functions/methods inside the template expressions to improve the performance of the angular application.

5. Optimize the Use the NgZone/Zone for Change Detection

ngzone/zone library is used to detect the changes and then reloading the component’s view with updated data. To avoid updating the reloading of the view on each small change runOutsideAngular method of ngzone can be used to improve the performance of the application.