Profiling Angular Applications

Profiling Angular applications helps you identify performance bottlenecks and optimize your code. This guide covers various tools and techniques for profiling Angular applications effectively.

Using Chrome DevTools

Chrome DevTools provides powerful tools for profiling your Angular applications:

• Open DevTools by pressing F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Opt+I (Mac).
• Navigate to the Performance tab.
• Click the Record button, interact with your application, and then stop recording.
• Analyze the recorded performance metrics, including CPU usage, memory usage, and more.

Using Angular DevTools

Angular DevTools is a Chrome extension for profiling Angular applications:

• Install Angular DevTools from the Chrome Web Store.
• Open your Angular application and the DevTools.
• Navigate to the Angular tab to inspect change detection cycles and component performance.

Using Lighthouse

Lighthouse is an open-source tool for auditing and profiling web applications:

• Open Chrome DevTools and navigate to the Lighthouse tab.
• Click Generate report to run a performance audit on your application.
• Review the generated report for performance insights and recommendations.

Analyzing Bundle Size

Analyze your application's bundle size using source-map-explorer:

npm install -g source-map-explorer
ng build --prod --source-map
source-map-explorer dist/my-app/main.*.js

This tool helps you identify large dependencies and optimize your bundle size.

Tracking Change Detection

Track change detection cycles using Angular's built-in tools:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private cdr: ChangeDetectorRef) {
    this.cdr.detach();
  }

  triggerChangeDetection() {
    this.cdr.detectChanges();
  }
}

Profiling with Web Vitals

Use Web Vitals to measure key performance metrics in your Angular application:

npm install web-vitals

// main.ts
import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', { body, method: 'POST', keepalive: true });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

Using Profiler API

Use the Angular Profiler API to measure component performance:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private ngZone: NgZone) {}

  ngAfterViewInit() {
    this.ngZone.runOutsideAngular(() => {
      window.profile = (fn) => {
        const start = performance.now();
        fn();
        const end = performance.now();
        console.log(`Execution time: ${end - start} ms`);
      };
    });
  }
}

// Usage in template
// Profile

Key Points

Conclusion

Profiling Angular applications is essential for identifying and optimizing performance bottlenecks. By using tools like Chrome DevTools, Angular DevTools, Lighthouse, source-map-explorer, Web Vitals, and the Angular Profiler API, you can ensure your Angular applications run efficiently and provide a great user experience. Happy profiling!