Deferrable Views et optimisation du chargement

Le problème

Les composants lourds (éditeurs, graphiques, cartes) impactent le bundle initial et le LCP même lorsqu’ils sont hors de la vue.

Solution : @defer

@defer (on viewport) {
  <app-heavy-chart />
} @placeholder {
  <div class="chart-skeleton">Chargement...</div>
} @loading (minimum 300ms) {
  <app-spinner />
} @error {
  <p>Impossible de charger le graphique.</p>
}

Déclencheurs disponibles

Déclencheur	Comportement
`on viewport`	Charge quand l’élément entre dans le viewport
`on idle`	Charge pendant un moment d’inactivité du navigateur
`on interaction`	Charge au premier clic ou focus
`on immediate`	Charge immédiatement après le rendu principal
`when condition`	Charge quand une expression devient `true`

Exemple avec condition

showDetails = signal(false);

<button (click)="showDetails.set(true)">Voir les détails</button>

@defer (when showDetails()) {
  <app-user-details />
}