Angular Performance Optimization

Angular is a powerful and popular front-end JavaScript framework for building dynamic web applications. However, with the increasing complexity of applications, it can be challenging to maintain good performance. In this page, we'll explore some strategies for optimizing Angular performance.

Use the 'OnPush' change detection strategy

Angular provides two change detection strategies - Default and OnPush. The default change detection strategy checks for changes every time an event occurs, even if there are no changes in the data. This can lead to unnecessary re-renders, which can affect the performance of the application. The OnPush change detection strategy only checks for changes when the input data changes. It can significantly improve application performance by reducing the number of unnecessary re-renders.

@Component({
  selector: 'app-performance',
  templateUrl: './performance.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})

Use Lazy Loading for modules

Angular provides a lazy-loading feature for modules. Using lazy loading, we can load the modules only when they are required. This optimization technique can significantly improve the performance of the application by reducing the initial loading time.

const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  },
];

Use trackBy to track changes in lists

When we render a list of items, Angular uses a default change detection strategy to detect changes in the list. However, sometimes, the change detection strategy may fail to recognize the changes, which can lead to performance issues. Instead, we can use the trackBy function to track changes in the list manually. This can significantly improve the performance of the application by reducing unnecessary re-renders.

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">{{item}}</li>
</ul>

trackByFn(index, item) {
  return item.id;
}

Use AOT Compilation

Ahead-of-Time (AOT) Compilation is a compilation technique used by Angular that compiles the template of the components at build time rather than at runtime. This technique removes the overhead of runtime compilations, leading to faster initial load times and overall better application performance.

ng build --prod --aot

Bundle Optimization

In Angular, we can trim the bundle size by removing unnecessary Angular code using scripts such as purgecss. We can also reduce dependency size by including only the required services or libraries using the import method.

Proper use of *ngIf vs *ngSwitch

When comparing an element that uses *ngIf versus one that takes advantage of *ngSwitch to render child nodes, *ngSwitch is always faster by definition.

<app-cmp-one *ngIf="arg === 'cmpOne'"></app-cmp-one>
<div *ngSwitchCase="'cmpOne'">
    <app-cmp-one></app-cmp-one>
</div>

Summary

In conclusion, there are several techniques for optimizing the performance of Angular applications, such as leveraging the 'OnPush' change detection strategy, lazy loading of modules, use of trackBy to track changes in lists, AOT compilation, and optimizing bundles. Proper use of *ngIf vs *ngSwitch is also important. Adopting these best practices can greatly improve the performance of Angular applications, resulting in faster load times, better user experience, and overall better application performance.