Mastering Angular Series: Part 3

Optimizing Angular Performance — Lazy Loading and Beyond

Welcome to the third article in our Mastering Angular series. In this edition, we’ll explore how to optimize the performance of your Angular applications using lazy loading, change detection strategies, and other advanced techniques. Performance optimization isn’t just about faster apps; it’s about providing users with a seamless experience.

Why Performance Optimization Matters

With increasing application complexity, ensuring a responsive user experience is critical. Optimized Angular apps:

• Load faster on both desktop and mobile devices.
• Consume fewer resources, especially on low-powered devices.
• Scale better as new features are added.

1. Lazy Loading: The Cornerstone of Performance Optimization

Lazy loading helps reduce the initial load time of your app by loading modules only when needed.

Use Case Example

Consider an e-commerce site with an admin panel and a customer-facing interface. The admin module should load only when an admin logs in.

Code Example

app-routing.module.ts:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}ty

admin-routing.module.ts (inside AdminModule):

const adminRoutes: Routes = [
  { path: '', component: AdminDashboardComponent },
  { path: 'users', component: AdminUsersComponent }
];
@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule],
})
export class AdminRoutingModule {}

Best Practices

• Split large applications into feature modules.
• Test your lazy-loaded routes to ensure dependencies are correctly managed.

2. Optimizing Change Detection

Angular’s default change detection strategy (CheckAlways) checks every component for changes, which can impact performance in large apps. Switching to OnPush ensures change detection runs only when inputs change.

How OnPush Works

With ChangeDetectionStrategy.OnPush, Angular skips checking components unless their @Input() values or observable data streams change.

Code Example

Using OnPush:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  template: `<p>{{ user.name }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserProfileComponent {
  @Input() user!: { name: string };
}

Best Practices

• Use OnPush for components with predictable data flow.
• Combine with immutable data structures for maximum benefit.

3. Real-World Scenarios for Optimization

Scenario 1: Improving Navigation Speed

Use lazy loading to ensure secondary features (e.g., settings or analytics) do not delay the loading of primary pages.

Scenario 2: Reducing Re-renders

Implement trackBy in ngFor directives to avoid unnecessary DOM updates.

Example:

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

Component:

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

Scenario 3: Optimizing API Calls

Leverage Angular’s HttpClient and caching strategies to reduce redundant network requests.

Service Example:

import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { tap, shareReplay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class DataService {
  private cache: any;

  constructor(private http: HttpClient) {}

  getData() {
    if (this.cache) {
      return of(this.cache);
    }
    return this.http.get('/api/data').pipe(
      tap(data => this.cache = data),
      shareReplay(1)
    );
  }
}

Pitfalls to Avoid

1. Overusing Lazy Loading: Loading too many small modules can fragment your app unnecessarily.
2. Skipping Optimization for Small Apps: Start optimizing early to avoid performance bottlenecks as your app grows.
3. Ignoring User Perceptions: Performance isn’t just about speed; ensure transitions and interactions are smooth.

Conclusion

Performance optimization in Angular is a combination of smart coding practices and leveraging Angular’s built-in tools. From lazy loading modules to fine-tuning change detection, every step enhances the user experience.

Stay tuned for the final article in the Mastering Angular series, where we’ll dive into component communication techniques, exploring Outputs, Services, and shared state libraries like NgRx.

LinkedIn | GitHub