.: optimiser Angular

Pour optimiser une application Angular, vous pouvez répondre en entretien avec ces axes principaux :

Réponse courte pour entretien

Pour améliorer les performances Angular, je regarde d’abord le bundle size, le lazy loading, la détection de changement, les appels API, le rendu des listes et la qualité du code.
J’utilise aussi les outils comme Angular DevTools, Lighthouse, le profiler du navigateur et l’analyse du bundle.

Points importants

1. Lazy Loading

Charger les modules/pages seulement quand l’utilisateur en a besoin.

{
  path: 'admin',
  loadChildren: () => import('./admin/admin.routes')
}

Ou avec standalone component :

{
  path: 'detail',
  loadComponent: () => import('./detail/detail.component')
    .then(m => m.DetailComponent)
}

2. OnPush Change Detection

Éviter qu’Angular vérifie trop souvent tous les composants.

@Component({
  selector: 'app-product',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './product.component.html'
})
export class ProductComponent {}

3. `trackBy` avec `*ngFor`

Très important pour les grandes listes.

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

trackById(index: number, item: Product) {
  return item.id;
}

Avec Angular récent :

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

4. Éviter les fonctions lourdes dans le template

À éviter :

{{ calculateTotal() }}

Car Angular peut appeler cette fonction très souvent.

Préférer une valeur calculée à l’avance :

total = this.calculateTotal();

Ou avec Signals :

total = computed(() => this.price() * this.quantity());

5. Optimiser les appels API

Éviter les appels inutiles :

this.http.get('/api/products')

À améliorer avec :

shareReplay(1)

Exemple :

products$ = this.http.get<Product[]>('/api/products')
  .pipe(shareReplay(1));

Cela permet de mettre en cache le résultat côté client.

6. Utiliser la pagination ou virtual scroll

Pour une grande liste, ne pas afficher 10 000 lignes directement.

Utiliser :

@angular/cdk/scrolling

Avec virtual scroll.

7. Réduire le bundle size

Actions possibles :

lazy loading
supprimer les librairies inutiles
éviter d’importer toute une bibliothèque
utiliser production build
analyser avec source-map-explorer

ng build --configuration production

8. Optimiser les images

Souvent, le problème vient aussi des images :

compression
lazy loading
WebP
bonne taille d’image
CDN si nécessaire

<img src="image.webp" loading="lazy" />

9. Gérer correctement les subscriptions

Éviter les fuites mémoire.

takeUntilDestroyed()

Exemple :

this.service.getData()
  .pipe(takeUntilDestroyed())
  .subscribe(data => {
    this.data = data;
  });

10. Cache côté front

Pour les données rarement modifiées :

service singleton
shareReplay
localStorage/sessionStorage
state management léger
cache HTTP

Phrase professionnelle pour entretien

J’optimise une application Angular en commençant par mesurer : bundle size, temps de chargement, appels API et rendu des composants. Ensuite, j’applique le lazy loading, OnPush, trackBy, la pagination ou virtual scroll, le cache des appels HTTP avec shareReplay, et j’évite les traitements lourds dans les templates. Pour les versions récentes d’Angular, j’utilise aussi les Standalone Components et les Signals pour réduire la complexité et améliorer la réactivité.

.

jeudi 2 juillet 2026