Performance

// main.ts
import { enableProfiling } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';

// Avant le demarrage, pour que le premier rendu figure aussi dans
// l'enregistrement. En production, l'appel ne fait rien : la piste Angular du
// panneau Performance n'existe qu'en mode developpement.
enableProfiling();

bootstrapApplication(App, appConfig).catch((erreur) => console.error(erreur));

{
  "projects": {
    "web": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
                { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" }
              ]
            }
          }
        }
      }
    }
  }
}

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

// Aucun changeDetection ecrit : en Angular 22, les deux composants sont OnPush.
@Component({
  selector: 'app-resume-panier',
  template: `<p>{{ articles().length }} article(s) dans le resume</p>`,
})
export class ResumePanier {
  readonly articles = input.required<string[]>();
}

@Component({
  selector: 'app-panier',
  imports: [ResumePanier],
  template: `
    <p>{{ articles().length }} article(s) dans le panier</p>
    <app-resume-panier [articles]="articles()" />
    <button type="button" (click)="ajouter('HDMI-2')">Ajouter</button>
  `,
})
export class Panier {
  protected readonly articles = signal<string[]>(['USB-64']);

  protected ajouter(reference: string): void {
    // Le clic marque Panier et ses ancetres : son template est relu. Le resume
    // recoit le meme tableau, l'entree n'a pas change, sa vue n'est pas marquee.
    this.articles().push(reference);
  }
}

// Apres un clic : « 2 article(s) dans le panier », « 1 article(s) dans le resume ».

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

@Component({
  selector: 'app-resume-panier',
  template: `<p>{{ articles().length }} article(s) dans le resume</p>`,
})
export class ResumePanier {
  // readonly dans le type : un push ne compile plus.
  readonly articles = input.required<readonly string[]>();
}

@Component({
  selector: 'app-panier',
  imports: [ResumePanier],
  template: `
    <p>{{ articles().length }} article(s) dans le panier</p>
    <app-resume-panier [articles]="articles()" />
    <button type="button" (click)="ajouter('HDMI-2')">Ajouter</button>
  `,
})
export class Panier {
  protected readonly articles = signal<readonly string[]>(['USB-64']);

  protected ajouter(reference: string): void {
    // Un nouveau tableau : l'entree du resume change, sa vue est marquee.
    this.articles.update((articles) => [...articles, reference]);
  }
}

// Apres un clic : 2 et 2.

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

@Component({
  selector: 'app-carte',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p (mousemove)="suivre($event)">Zone : {{ zone() }}</p>`,
})
export class Carte {
  protected readonly zone = signal<'gauche' | 'droite'>('gauche');

  // Un ecouteur lie dans le template est une notification : chaque mousemove
  // marque Carte et tous ses ancetres, puis planifie une detection de
  // changements. Cinquante mouvements du meme cote : cinquante passages, qui
  // relisent le template de Carte et celui de chaque ancetre, alors que zone
  // n'a pas change une seule fois.
  protected suivre(evenement: MouseEvent): void {
    this.zone.set(evenement.clientX < window.innerWidth / 2 ? 'gauche' : 'droite');
  }
}

import {
  ChangeDetectionStrategy,
  Component,
  DestroyRef,
  ElementRef,
  afterNextRender,
  inject,
  signal,
} from '@angular/core';

@Component({
  selector: 'app-carte',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>Zone : {{ zone() }}</p>`,
})
export class Carte {
  protected readonly zone = signal<'gauche' | 'droite'>('gauche');

  constructor() {
    const hote = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
    const destroyRef = inject(DestroyRef);

    // Un addEventListener ordinaire ne previent pas Angular. Seule l'ecriture
    // d'une valeur differente dans zone notifie, et elle ne marque que Carte.
    // afterNextRender ne s'execute que dans le navigateur, jamais au rendu serveur.
    afterNextRender(() => {
      const suivre = (evenement: MouseEvent) =>
        this.zone.set(evenement.clientX < window.innerWidth / 2 ? 'gauche' : 'droite');
      hote.addEventListener('mousemove', suivre);
      destroyRef.onDestroy(() => hote.removeEventListener('mousemove', suivre));
    });
  }
}

// Cinquante mouvements, dont un seul passe a droite : Carte est relue une fois,
// ses ancetres jamais.

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

interface Produit {
  readonly reference: string;
  readonly libelle: string;
}

// Ce que rendrait une API : les memes produits, en objets neufs a chaque appel.
function lireCatalogue(): Produit[] {
  return Array.from({ length: 100 }, (_, i) => ({ reference: `REF-${i}`, libelle: `Produit ${i}` }));
}

@Component({
  selector: 'app-fiche',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ produit().libelle }}</p>`,
})
export class Fiche {
  readonly produit = input.required<Produit>();
}

@Component({
  selector: 'app-catalogue',
  imports: [Fiche],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (produit of produits(); track produit) {
      <app-fiche [produit]="produit" />
    }
    <button type="button" (click)="actualiser()">Actualiser</button>
  `,
})
export class Catalogue {
  protected readonly produits = signal<readonly Produit[]>(lireCatalogue());

  // track produit compare les objets. Apres actualiser, aucun n'est le meme :
  // les 100 fiches sont detruites puis recreees, DOM compris. En developpement,
  // la console le signale :
  // NG0956: The configured tracking expression (track by identity) caused
  // re-creation of the entire collection of size 100.
  protected actualiser(): void {
    this.produits.set(lireCatalogue());
  }
}

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

interface Produit {
  readonly reference: string;
  readonly libelle: string;
}

function lireCatalogue(): Produit[] {
  return Array.from({ length: 100 }, (_, i) => ({ reference: `REF-${i}`, libelle: `Produit ${i}` }));
}

@Component({
  selector: 'app-fiche',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>{{ produit().libelle }}</p>`,
})
export class Fiche {
  readonly produit = input.required<Produit>();
}

// Seule la cle du @for change.
@Component({
  selector: 'app-catalogue',
  imports: [Fiche],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (produit of produits(); track produit.reference) {
      <app-fiche [produit]="produit" />
    }
    <button type="button" (click)="actualiser()">Actualiser</button>
  `,
})
export class Catalogue {
  protected readonly produits = signal<readonly Produit[]>(lireCatalogue());

  // Les references n'ont pas bouge : aucune fiche creee ni detruite. Chacune
  // recoit son nouvel objet par son entree et relit son template ; le texte
  // etant identique, le DOM n'est pas touche.
  protected actualiser(): void {
    this.produits.set(lireCatalogue());
  }
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
// Un composant standalone dans son propre fichier, qui embarque une
// bibliotheque de graphiques. Il n'est utilise nulle part hors du @defer.
import { GraphiqueVentes } from './graphique-ventes';

@Component({
  selector: 'app-tableau-de-bord',
  imports: [GraphiqueVentes],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <h2>Ventes du mois</h2>

    <!-- Rendu quand le placeholder entre dans la fenetre ; telecharge des que
         le navigateur est inoccupe, pour etre pret avant. -->
    @defer (on viewport; prefetch on idle) {
      <app-graphique-ventes />
    } @placeholder (minimum 500ms) {
      <!-- Un seul element racine : c'est lui que viewport observe. -->
      <div class="cadre-graphique">Graphique des ventes</div>
    } @loading (after 100ms; minimum 1s) {
      <p>Chargement du graphique...</p>
    } @error {
      <p>Le graphique n'a pas pu etre charge.</p>
    }
  `,
})
export class TableauDeBord {}

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

@Component({
  selector: 'app-fiche-produit',
  imports: [NgOptimizedImage],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- L'image principale, probablement l'element LCP : priority la charge
         tout de suite (loading="eager", fetchpriority="high"). -->
    <img ngSrc="/images/casque.jpg" width="800" height="600" priority alt="Casque audio" />

    <!-- Les autres restent en loading="lazy", le defaut de la directive.
         width et height sont obligatoires (ou fill) : ils reservent la place
         et evitent que la page saute a l'arrivee de l'image. -->
    @for (vignette of vignettes(); track vignette) {
      <img [ngSrc]="vignette" width="160" height="120" alt="" />
    }
  `,
})
export class FicheProduit {
  protected readonly vignettes = signal(['/images/casque-profil.jpg', '/images/casque-etui.jpg']);
}

// app.config.ts d'une application rendue par le serveur
import { ApplicationConfig } from '@angular/core';
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [
    // En Angular 22, cet appel seul active l'hydratation, l'hydratation
    // incrementale et, avec elle, la relecture des evenements.
    // withNoIncrementalHydration() retire la deuxieme.
    provideClientHydration(),
  ],
};

<!-- Hors de tout @defer : hydrate des le demarrage. -->
<app-entete />

<!-- Rendu par le serveur, hydrate quand il devient visible. -->
@defer (hydrate on viewport) {
  <app-avis-clients />
} @placeholder {
  <p>Avis clients</p>
}

<!-- Hydrate au premier clic ou a la premiere frappe ; ce premier clic,
     capture avant, est rejoue une fois le code arrive. -->
@defer (hydrate on interaction) {
  <app-configurateur />
} @placeholder {
  <p>Configurateur</p>
}

<!-- Jamais hydrate : du HTML statique, sans le JavaScript de son composant. -->
@defer (hydrate never) {
  <app-mentions-legales />
} @placeholder {
  <p>Mentions legales</p>
}