Ways to Boost the performance of your angular application ????

Angular is one of the most popular frameworks for enterprise applications. It has great community support and Angular team updates are more frequent now. However, have seen developers are somehow worried about the performance of large angular enterprise solutions.

Angular performance can be classified into two categories?load time?and?run time.

We will see solutions for both categories. Let’s start with solving load time performance.

Ways to optimize load time performance

• Service worker: Angular started support from its version 5.0.0. A service worker can be used to cache static files ( JS, CSS, and Images) on the client-side, hence reducing HTTP calls to the server for static files. This helps to reduce the load time. Service worker provides different caching strategy. The strategy should be chosen based on business needs. For more details on service, workers follow the?link.
• AoT build: Ahead of time( AoT) build should be a must for production deployment. This helps in building small application build as thus excludes angular compiler from the build. It also helps in faster component rendering as templates already comply.
• CDN for static files:?Most of the modern browsers supports 6 to 8 parallel request to one domain. This can be an issue when multiple resources need to be fetched to render a screen. CDN ( Content Delivery Network) can be used to fetch static files which are not frequently changed while application domain can be used to fetch dynamic data. This facilitates a parallel call to multiple domains/ sub-domains hence, paving the way to decrease the page load time.
• Lazy loading?routes: One should never ignore imports in app.ts as all modules imported in app.ts are eagerly imported. Lazy loading helps in breaking module large bundles into small chunks and the modules are loaded on demand. Since the size of resource is smaller with lazy loading hence, the page load time decreases. It has helped to decrease resource consumption. Follow the?link?for details on how to implement lazy loading.
• Dynamic loading of modules and components:?With the release of angular version 9, it is also possible to load the component lazily without using NgModule. ComponentFactoryResolver helps to render components on demand. This helps in reducing the bundle size and returns the page load time. Follow the?link?for details on ComponentFactoryResolver.
• Limiting the number of HTTP calls:?Too many HTTP requests can be blockers for screen rendering, it is good to limit the API request needed to render the initial screen. A service worker can also be used to cache the API response but that should be purely based on the business use case.

Ways to optimize run time performance

• Implementing onPush change detection strategy: By default, Angular uses the?ChangeDetectionStrategy.Default?change detection strategy. With this strategy, angular is unaware of the application. It triggers change detection for user events (click, tab out, scroll etc..), timers, XHR, promises, etc, and re-renders all components. Re-rendering all components can result in performance issues in the case of large elements on the screen. It can result in blocking the screen if the client has a small configuration machine. In order to overcome this issue, we can set theChangeDetectionStrategy?of our component toChangeDetectionStrategy.OnPush

Once the strategy is changed to?OnPushcomponent will depend upon only on @inputs(). Angular will assume that inputs are immutable objects.

With OnPush strategy we are going to?limit the number of checks for change detection and rendering only components where the inputs are changed. ( The change detection can be triggered in multiple ways, I am looking to publish a separate blog on it)

• Implementing state management: With Angular 11, we can use?ngRX?. We can store the data in-store and use it across modules and avoid repeated XHR calls. One of the benefits of store management is that it return a new object as a reference so the change detection strategy onPush integration is seamless.
• Unsubscribe change detection:?With onPush change detection strategy, we can use?ChangeDetectorRef?for triggering manual change detection. However, one should always unsubscribe?ChangeDetectorRef?else this can lead to a memory leak.
• Use of trackBy:?ngFor?directive t instantiate a template once per item from the collection. If the collection is updated by internal action like user event or XHR response Angular renders the templates associated with the collection as it is unaware of items' unique references. It works if the collection is small, Imagine if the collection is large. We can use?trackBy?function to provide unique references to each item in the collection. With the unique reference, Angular can detect which element is added or removed and render only the affected items.
• Unsubscribe all subscriptions on ngDestroy: A Subscription essentially just has an?unsubscribe() function to release resources?or cancel Observable executions. To prevent these memory leaks we have to unsubscribe from the subscriptions when we are done with. We do so by calling the unsubscribe method in the Observable.
• Optimize template expressions: Template expression can become complex in time as application size increases. With every change detection, angular re-renders the templates. With complex expressions, the rendering can slow down the performance.

Best practices in Angular warns us not to compute heavy operations in the template, we should only execute functions that finish immediately.

Conclusion

Angular performance can be tweaked and improved if we choose the right strategy and adhere to Angular recommendations. I hope this article will help you to increase the performance of your Angular applications.

Thank you for reading ?? !!! Hit a clap if this article is helpful for you.