Angular Performance Optimization Techniques Complete Guide

Complete Examples, Step by Step for Beginners: Angular Performance Optimization Techniques

Table of Contents:

1. Change Detection Optimization
2. Lazy Loading Modules
3. TrackBy Function for ngFor
4. OnPush Change Detection Strategy
5. Reduce Bundle Size
6. Avoid Memory Leaks
7. Use Angular Universal for Server-Side Rendering

1. Change Detection Optimization

Change detection in Angular happens automatically, and Angular runs change detection checks on every event. This might lead to performance issues if not managed properly. Here's how we can optimize it:

Example: Optimize the change detection process

Suppose you have a parent component that contains a child component displaying the list of users. You only want to trigger change detection on the child component when the users actually change.

• Parent Component HTML:

<!-- app.component.html -->
<div>
  <button (click)="addUser()">Add User</button>
  <app-user-list [users]="users"></app-user-list>
</div>

• Parent Component Script:

// app.component.ts
import { Component } from '@angular/core';

interface User {
  id: number;
  name: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  users: User[] = [{ id: 1, name: 'John'}, { id: 2, name: 'Jane'}];
  userId: number = 3;

  addUser() {
    const newUser = { id: this.userId, name: `User ${this.userId}` };
    this.users = [...this.users, newUser]; // Creates a new array rather than mutating the existing one
    this.userId++;
  }
}

• Child Component Script:

// user-list.component.ts
import { Component, Input, SimpleChanges } from '@angular/core';

interface User {
  id: number;
  name: string;
}

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent {
  @Input() users: User[] = [];

  ngOnChanges(changes: SimpleChanges) {
    console.log('Users changed:', changes.users);
    // Additional logic based on changes
  }
}

Explanation: Here, instead of mutating the existing array, we create a new one using the spread operator [...]. This ensures that Angular's change detection mechanism recognizes the change and updates the DOM accordingly.

2. Lazy Loading Modules

Lazy loading helps reduce the initial load time of your application by loading the necessary modules only when they're required.

Example: Lazy Load the Admin Module

Let's assume we have an Admin module in our Angular application and we want to lazy load it.

• App Routing Module:

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Explanation: Instead of importing the AdminModule directly into the AppRoutingModule, we use a dynamic function loadChildren that imports the module lazily when the route is accessed.

3. TrackBy Function for ngFor

Using trackBy function with *ngFor directive can drastically improve the performance by avoiding unnecessary dom updates.

Example: Improve ngFor Performance with TrackBy Function

Suppose you display a list of products, and whenever the product list updates, you only want Angular to update the product items that have changed.

• Component Script:

// product-list.component.ts
import { Component, Input } from '@angular/core';

export interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'product-list',
  template: `
    <ul>
      <li *ngFor="let product of products; trackBy: trackById">{{ product.name }} - ${{ product.price }}</li>
    </ul>
  `
})
export class ProductListComponent {
  @Input() products: Product[] = [];

  trackById(index: number, product: Product): number {
    return product.id;
  }
}

Explanation: The trackById function ensures Angular knows which DOM nodes correspond to which items in the array, thus reducing the number of DOM manipulations required during updates.

4. OnPush Change Detection Strategy

The OnPush strategy helps reduce the number of change detection cycles. It triggers a change detection only when a component's input properties change or an event originates within the component.

Example: Use OnPush Change Detector in a Component

Create a simple product details component:

• Product Details Component Script:

// product-details.component.ts
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

export interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'product-details',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p><strong>ID:</strong> {{ product.id }}</p>
    <p><strong>Name:</strong> {{ product.name }}</p>
    <p><strong>Price:</strong> ${{ product.price }}</p>
  `
})
export class ProductDetailsComponent {
  @Input() product: Product | null = null;
}

Explanation: By setting the changeDetection property to ChangeDetectionStrategy.OnPush, the ProductDetailsComponent will only detect changes if its input properties (product) reference changes. This means that Angular won’t run change detection inside components unless an event occurs or new references are passed as inputs.

5. Reduce Bundle Size

Reducing the bundle size improves the load time of Angular applications.

Example: Reduce Bundle Size with Tree Shaking

Ensure you use AOT (Ahead-of-Time) compilation to enable tree shaking via the ng build --prod.

• Update package.json to include build scripts:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod"
}

Explanation: When you run ng build --prod, Angular performs tree shaking, removing unused code from your bundle. This results in smaller bundle sizes and faster load times.

6. Avoid Memory Leaks

Memory leaks can significantly degrade application performance. Ensuring proper cleanup of subscriptions is crucial.

Example: Clear Subscriptions to Avoid Memory Leaks

Suppose you have a subscription to an observable stream in your component:

• Component Script:

// user-profile.component.ts
import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { UserProfileService } from './user-profile.service';

@Component({
  selector: 'app-user-profile',
  template: `<p>User Name: {{ userName }}</p>`
})
export class UserProfileComponent implements OnDestroy {
  userName: string | undefined;
  private userProfileSubscription!: Subscription;

  constructor(private userProfileService: UserProfileService) {
    this.userProfileSubscription = this.userProfileService.getUserName().subscribe(name => this.userName = name);
  }

  ngOnDestroy() {
    if (this.userProfileSubscription) {
      this.userProfileSubscription.unsubscribe();
    }
  }
}

Explanation: The UserProfileComponent subscribes to an observable getUserName() from UserProfileService. To avoid memory leaks, we unsubscribe from the observable when the component is destroyed by implementing the OnDestroy lifecycle hook.

7. Use Angular Universal for Server-Side Rendering

Server-Side Rendering (SSR) boosts first contentful paint (FCP) and Time-to Interactive (TTI), making pages load faster and be more SEO-friendly.

Example: Setup Angular Universal

To set up Angular Universal for SSR, follow these steps:

Step 1: Install Required Packages

Run the following command to add Angular Universal packages:

ng add @nguniversal/express-engine

Step 2: Update App Server Module to Provide TransferState

• app.server.module.ts:

// app.server.module.ts
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { TransferHttpCacheModule } from '@nguniversal/common';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    TransferHttpCacheModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Explanation: TransferHttpCacheModule caches HTTP responses on the server and uses these cached responses for the client-side requests. This optimizes the loading time.

Step 3: Build the Universal App

Build your application for both client and server using:

ng run <app-name>:server
ng build --output-path dist/<app-name>/browser --prod

Step 4: Setup Express Server

• server.ts:

// server.ts
import 'zone.js/node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import { APP_BASE_HREF } from '@angular/common';

import express from 'express';

import { join } from 'path';
import { enableProdMode } from '@angular/core';
import { environment } from './src/environments/environment';
import { AppServerModuleNgFactory, LAZY_MODULE_MAP } from './dist/<app-name>/server/main';

enableProdMode();

const app = express();

const serverDistFolder = join(process.cwd(), 'dist/<app-name>/server');
const browserDistFolder = join(process.cwd(), 'dist/<app-name>/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', browserDistFolder);

app.get('*.*', express.static(browserDistFolder, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', { req });
});

const port = environment.port || 4000;
app.listen(port, () => {
  console.log(`Node Express server listening on http://localhost:${port}`);
});

Explanation: Here we configure an Express server to handle incoming requests and render Angular components on the server. The ngExpressEngine is used to integrate the Angular app with the Express server.