10 astuces pour optimiser les performances d'Angular

Les performances sont cruciales pour l’expérience utilisateur. Après 8 ans de développement Angular, voici mes techniques les plus efficaces pour optimiser vos applications.

1. OnPush Change Detection

La stratégie OnPush réduit considérablement le nombre de vérifications de changement. Utilisez-la partout où c’est possible :

@Component({
  selector: 'app-my-component',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {}

2. TrackBy dans les NgFor

Sans trackBy, Angular recrée tous les éléments DOM à chaque changement. Avec trackBy, il ne met à jour que ce qui a changé :

trackByFn(index: number, item: any): number {
  return item.id;
}

3. Lazy Loading des modules

Divisez votre application en modules chargés à la demande. Cela réduit drastiquement le bundle initial :

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

4. Optimisation du Bundle avec Webpack

Analysez votre bundle avec webpack-bundle-analyzer et éliminez les dépendances inutiles. Utilisez le tree-shaking efficacement.

5. Virtual Scrolling pour les longues listes

Pour les listes de milliers d’éléments, le virtual scrolling est indispensable :

<cdk-virtual-scroll-viewport itemSize="50">
  <div *cdkVirtualFor="let item of items">{{ item }}</div>
</cdk-virtual-scroll-viewport>

6. Optimisation des Observables

Utilisez les opérateurs RxJS judicieusement. shareReplay() évite les appels HTTP redondants :

this.data$ = this.http.get('/api/data').pipe(
  shareReplay(1)
);

7. Preload Strategy

Implémentez une stratégie de preload personnalisée pour charger les modules en arrière-plan :

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })]
})

8. Optimisation des images

Utilisez les directives natives d’Angular pour l’optimisation d’images (v15+) :

<img ngSrc="hero.jpg" width="400" height="300" priority>

9. Web Workers pour les calculs lourds

Déportez les calculs intensifs dans un Web Worker pour ne pas bloquer le thread principal.

10. Profiling avec Chrome DevTools

Utilisez régulièrement le profiler pour identifier les goulots d’étranglement. Mesurez, ne supposez pas !

Conclusion

Ces techniques m’ont permis de passer de scores Lighthouse de 60-70 à 95-100 sur plusieurs projets en production. L’important est de mesurer l’impact de chaque optimisation.

Temps de lecture : 6 minutes