Profilage et diagnostics

Angular DevTools

Angular DevTools est un inspecteur pour ton application :

1. Component Explorer - arborescence des composants
2. Profiler - analyse des performances de détection des changements
3. Injection Graph - carte de l'injection de dépendances

1# Installer l'extension
2# Chrome Web Store : Angular DevTools

Profilage des performances

1// Activer le profilage en développement
2import { ApplicationConfig } from '@angular/core';
3
4export const appConfig: ApplicationConfig = {
5  providers: [
6    // En développement, on peut activer une journalisation détaillée
7  ]
8};
9
10// Mesures manuelles
11@Component({...})
12export class ProfiledComponent {
13  loadData(): void {
14    console.time('loadData');
15
16    // Opérations...
17
18    console.timeEnd('loadData');
19  }
20}

Optimisation de la taille du bundle

1# Analyse du bundle
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// MAUVAIS - importe toute la bibliothèque
2import * as lodash from 'lodash';
3
4// BON - importe uniquement les fonctions nécessaires
5import { debounce } from 'lodash-es';
6
7// MEILLEUR - utilise des méthodes natives ou écris la tienne
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 pour @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 évite de refaire le rendu
10  // de toute la liste quand un seul élément change
11}