Profiling and Diagnostics

Angular DevTools

Angular DevTools is an inspector for your application:

1. Component Explorer - component tree
2. Profiler - change detection performance analysis
3. Injection Graph - dependency injection map

1# Install the extension
2# Chrome Web Store: Angular DevTools

Performance Profiling

1// Enable profiling in development
2import { ApplicationConfig } from '@angular/core';
3
4export const appConfig: ApplicationConfig = {
5  providers: [
6    // In development we can enable detailed logging
7  ]
8};
9
10// Manual measurements
11@Component({...})
12export class ProfiledComponent {
13  loadData(): void {
14    console.time('loadData');
15
16    // Operations...
17
18    console.timeEnd('loadData');
19  }
20}

Bundle Size Optimization

1# Bundle analysis
2ng build --stats-json
3npx webpack-bundle-analyzer dist/browser/stats.json
4
5# Source map explorer
6npx source-map-explorer dist/browser/*.js

Tree Shaking

1// BAD - import entire library
2import * as lodash from 'lodash';
3
4// GOOD - import only needed functions
5import { debounce } from 'lodash-es';
6
7// BEST - use native methods or write your own
8const debounce = (fn: Function, ms: number) => {
9  let timeoutId: ReturnType<typeof setTimeout>;
10  return (...args: any[]) => {
11    clearTimeout(timeoutId);
12    timeoutId = setTimeout(() => fn(...args), ms);
13  };
14};

trackBy for @for

1@Component({
2  template: \`
3    @for (samurai of samuraiList(); track samurai.id) {
4      <app-samurai-card [samurai]="samurai" />
5    }
6  \`
7})
8export class ListComponent {
9  // track samurai.id prevents re-rendering
10  // the entire list when only one element changes
11}