Angular Application | Performance Optimization Tips

Angular Application Performance Optimization Tips. In very easy words.

I would like to share all those learnings with you with Angular2+. Below is the list —

  1. 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.
  2. 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.
  3. Try to use ChangeDetectionStrategy as OnPushOnPush 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.
  4. Optimize template expressionsAvoid 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.
  5. Try to avoid using third party libraries to reduce build size.
  6. 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)
  7. Lazy loading strategy with modules — Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the speed of the application load time by splitting the application into several bundles.
  8. Route Preloading Feature — Angular has a preloading strategy implemented in @angular/router module. This allows us to preload resources, routes/links, modules.
  9. Application static content caching- Progressive Web Apps can be used to cache static content so that static content loading can be faster.
  10. 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.
  11. 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.
  12. Prevent Memory Leak by doing unsubscription of Observables.
  13. 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.
  14. memo decorator with Angular Pipe- For details: https://suneetbansal.medium.com/memo-decorator-with-angular-pipe-big-performance-boost-57d89b0a9758

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suneet Bansal

Suneet Bansal

Technical Writer | Editor | Coder | Active Stackoveflow contributor | Love to learn More | Email — bansal.suneet@gmail.com