Angular Application | Performance Optimization Tips
Every team wants that the application they are building should be performance efficient in the sense that it should load faster, elements on the page should quickly rendered etc.
So then the technology also on which application is building matters a-lot. Like AngularJs or Angular2+ or React or Vue etc.
I spent 7+ years in Angular based application development (AngularJs and Angular2+) so I faced many performance issues and then explored and applied many things to improve it.
I would like to share all those learnings with you with Angular2+. Below is the list —
- Always try to use Pure Pipes — This allows Angular to safely bypass it’s own change detection and only update the value when the arguments change.
- Use trackBy option with *ngFor directive — A trackBy option with *ngFor allows to define function that returns a unique identifier for each iterable element. Hence, Angular will identify elements by this unique identifier as this value does (should) not change when the reference changes, and angular can apply the optimization.
- Try to use ChangeDetectionStrategy as OnPush — OnPush strategy manifests from the realization that if we treat reference types as immutable objects, we can detect if a value has changed much faster. When a reference type is immutable, this means every time it is updated, the reference on the stack memory will have to change.
- Optimize template expressions — Avoid using function calling in template. If the function takes a long time to finish, it will result in a slow and laggy UI experience for the users because the function will have to finish before other UI codes will be run. We see that template expressions must finish quickly, if a template expression becomes highly-computational, then caching should be employed on it.
- Try to avoid using third party libraries to reduce build size.
- Use Web Workers- Web Worker is an asynchronous system for web pages that allows execution of task in the background, independently from main thread and website UI. (For details — https://suneetbansal.medium.com/improve-angular-page-performance-web-worker-3c5edcd88b7c)
- Route Preloading Feature — Angular has a preloading strategy implemented in @angular/router module. This allows us to preload resources, routes/links, modules.
- Application static content caching- Progressive Web Apps can be used to cache static content so that static content loading can be faster.
- Local Change Detection using detach() method- detach() method of ChangeDetectorRef can be used to run local change detection. Local CD is run from the component down to its children, unlike the global CD that runs from the root up to the children. So after calling detach() method, as soon as we call detectChanges() method, it runs CD on the Component and its children. This will be a huge performance if the data variable updates every second.
- Remove Unused Code Using Tree-Shaking- Treeshaking is the process of removing unused imports in any file of the web application. This is taken care by angular cli build system when you create prod build.
- Prevent Memory Leak by doing unsubscription of Observables.
- Implement Server Rendering if you want the application to appear on Google’s first page. It is helpful for search engine optimization. You can achieve this using Angular Universal.
- memo decorator with Angular Pipe- For details: https://suneetbansal.medium.com/memo-decorator-with-angular-pipe-big-performance-boost-57d89b0a9758
I hope this article will help you to further improve your Angular application performance. Leave a comment or email me (email@example.com) for any doubts or new learnings.
Stay tuned and subscribe my medium channel!!!