Introduction : La performance est une fonctionnalité Dans un marché où 53% des mobinautes abandonnent une page qui met plus de 3 secondes à charger (source : Google/SOASTA), la performance n'est pas une optimisation facultative : c'est une exigence du produit. Pour les applications Angular, cela se traduit par des choix architecturaux précis, des outils de profilage intégrés et des stratégies de rendu intelligentes. Dans ce guide, nous explorons les techniques les plus efficaces pour optimiser une application Angular – de la compilation au regroupement, de la détection des modifications à la mise en cache HTTP – avec des exemples de code réels et des métriques de référence. Sujets : #Angular #Performance #LazyLoading #ChangeDetection #WebDevelopment Section 1 : Compilation AOT et compilation de construction optimisée à l'avance (AOT) Angular compile les modèles HTML en code JavaScript dès la phase de construction, et non au moment de l'exécution dans le navigateur. Depuis Angular 9, la compilation AOT est activée par défaut en production et apporte trois avantages mesurables : Bundle plus petit : le compilateur Angular ( @angular/compiler ) n'est pas inclus dans le bundle final. Rendu plus rapide : le navigateur reçoit du JavaScript précompilé. Erreurs précoces : des problèmes sont découverts lors de la construction. # Production Build ng build --configuration production Tree Shaking et Bundle Analysis // ❌ Importation complète import * as _ from 'lodash'; // ✅ Import import spécifique depuis 'lodash/chunk' ; // ✅ Sans dépendances const result = [[1, 2], [3, 4]]; Section 2 : Chargement paresseux — Chargez uniquement ce dont vous avez besoin // app.routes.ts import { Routes } from '@angular/router' ; export const APP_ROUTES : Routes = [ { chemin : '', loadComponent : () => import('./features/home/home.component').then(c => c.HomeComponent), }, { chemin : 'admin', loadChildren : () => import('./features/admin/admin.routes').then(m => m.ADMIN_ROUTES), }, { chemin : 'blog', loadChildren : () => import('./features/blog/blog.routes').then(m => m.
BLOG_ROUTES), }, { chemin : 'projets', loadComponent: () => import('./features/projects/projects.component').then(c => c.ProjectsComponent), }, ]; Stratégie de préchargement // app.config.ts import { ApplicationConfig } depuis '@angular/core' ; importer { provideRouter, withPreloading, PreloadAllModules } depuis '@angular/router' ; importer { APP_ROUTES } depuis './app.routes' ; export const appConfig : ApplicationConfig = { fournisseurs : [ provideRouter(APP_ROUTES, withPreloading(PreloadAllModules)), ], } ; Section 3 : Détection des changements // Stratégie OnPush changeDetection : ChangeDetectionStrategy.OnPush ; // ❌ Mutation this.post.title = 'Nouveau titre'; // ✅ Nouvelle référence this.post = { ...this.post, title : 'Nouveau Titre' }; Importation de signaux { signal, calculé } depuis '@angular/core' ; nombre const = signal (0); const doublé = calculé(() => count() * 2); Section 4 : Optimisation HTTP // Intercepteur de cache const cache = new Map(); if (cache.has(req.url)) { return of(cache.get(req.url)); } Section 5 : Optimisation de l'image Section 6 : Dépendances tierces // ❌ Moment d'importation de bibliothèque lourde à partir de 'moment' ; // ✅ Alternative native new Intl.DateTimeFormat('it-IT').format(new Date()); Section 7 : Phare des outils de profilage https://tuo-sito.com Résumé ✅ Production de build ✅ Chargement paresseux ✅ OnPush ✅ Cache HTTP Conclusion L'optimisation d'une application Angular est un processus continu qui combine architecture, bonnes pratiques de développement et surveillance constante des performances. La première étape est toujours de mesurer : des outils comme Lighthouse et Angular DevTools aident à identifier les véritables goulots d'étranglement.