How to enhance Performance in Angular

In this article, we will be discussing ways to optimize the performance of your Angular application. Angular is a powerful framework that allows for the creation of complex and feature-rich applications, but with great power comes the need for great performance. To ensure that your application runs smoothly and efficiently, it is important to follow best practices and use the right tools. The following list provides a collection of tips and techniques that you can use to optimize the performance of your Angular app. From lazy loading modules to using performance monitoring tools, these tips will help you create a faster, more efficient app that provides a great user experience.

1. Lazy loading modules: Lazy loading helps to load only the necessary modules and components as the user navigates through the app, which improves the initial load time and overall performance.

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'contact', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule) },
];

2. AOT compilation: Ahead-of-Time (AOT) compilation compiles your app at build time, resulting in smaller bundle sizes and faster runtime performance.

ng build --prod --aot

3. Change detection strategies: Using the OnPush change detection strategy can boost performance by only checking for changes when an input property or an event is emitted.

@Component({
  selector: 'app-my-component',
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() myData: any;
}

4. Use trackBy in ngFor: Using the trackBy function in ngFor can improve performance by reducing the number of DOM elements to be created and destroyed.

<div *ngFor="let item of items; trackBy: trackByFn">
  {{ item.name }}
</div>

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

5. Use immutable data: Immutable data can improve performance by eliminating the need to check for changes in objects and arrays.

import { from } from 'rxjs';

const originalArray = from([1, 2, 3, 4, 5]);
const newArray = originalArray.map(x => x + 1);
console.log(originalArray); // [1, 2, 3, 4, 5]
console.log(newArray); // [2, 3, 4, 5, 6]

6. Use the Angular CLI: The Angular CLI provides many performance-enhancing features, such as minification, uglification, and tree-shaking.

ng build --prod

7. Use a production-ready configuration: When deploying your app in production, make sure to use a production-ready configuration that optimizes for performance, such as turning off development mode and setting the enableProdMode() flag.

import { enableProdMode } from '@angular/core';

enableProdMode();

8. Use a performance-monitoring tool: Use tools like Lighthouse and Angular Augury to measure and monitor the performance of your Angular app and identify areas for improvement.

ng build --prod
npx lighthouse http://localhost:4200 --view

You can run this command after running the development server to analyze the performance of your app with lighthouse.