Optimiser Angular 18 avec le lazy loading

Introduction : Lazy Loading dans Angular

Les applications Angular peuvent devenir volumineuses à mesure que de nouvelles fonctionnalités sont ajoutées, ce qui entraîne des temps de chargement plus longs. Le lazy loading est un modèle de conception qui aide à améliorer les performances des applications Angular en chargeant les modules à la demande, plutôt que de tout charger au démarrage. Cela permet d'obtenir des bundles initiaux plus petits, des temps de chargement plus rapides et une meilleure expérience utilisateur.

Dans ce guide, nous explorerons comment fonctionne le lazy loading dans Angular, comment l'implémenter, et quels sont ses avantages.

1. Comment fonctionne le Lazy Loading dans Angular

Le lazy loading dans Angular permet de diviser votre application en plusieurs modules de fonctionnalités, qui ne sont chargés que lorsque cela est nécessaire. Plutôt que de charger tous les modules dès le démarrage de l'application, Angular charge un module uniquement lorsque l'utilisateur navigue vers une route qui l'utilise. Cela réduit le temps de chargement initial et optimise les performances.

Le lazy loading est particulièrement utile pour les grandes applications avec de nombreuses routes. En divisant l'application en modules plus petits, vous assurez que seules les parties nécessaires sont chargées, améliorant ainsi l'efficacité globale de votre application.

Exemple : Configuration basique du Lazy Loading

Pour configurer le lazy loading dans Angular, vous devez configurer les routes dans votre fichier app-routing.module.ts.

Ancienne approche (sans lazy loading) :

  
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SettingsComponent } from './settings/settings.component';

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  

Nouvelle approche (avec lazy loading) :

  
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { 
    path: 'dashboard', 
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) 
  },
  { 
    path: 'settings', 
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) 
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  

2. Avantages du Lazy Loading

Le lazy loading présente plusieurs avantages, notamment pour les applications à grande échelle. Voici quelques avantages clés :

• Amélioration du temps de chargement : Seuls les modules nécessaires sont chargés à la demande, ce qui réduit la taille du bundle initial et accélère le temps de chargement de l'application.
• Meilleures performances : Angular charge le code de manière dynamique lorsque l'utilisateur navigue vers une nouvelle route, ce qui maintient les performances de l'application même à mesure qu'elle se développe.
• Code modulaire : Le lazy loading encourage une architecture modulaire, facilitant la maintenance et l'évolution de l'application.
• Réduction de la consommation de mémoire : Comme les modules sont chargés à la demande, l'application consomme globalement moins de mémoire.

3. Configuration des stratégies de préchargement

Bien que le lazy loading améliore les performances, il peut arriver que vous souhaitiez précharger certains modules pour améliorer l'expérience utilisateur. Angular propose différentes stratégies de préchargement pour un meilleur contrôle.

Exemple : Précharger tous les modules

Vous pouvez utiliser la stratégie PreloadAllModules d'Angular pour précharger tous les modules lazy-loaded en arrière-plan, assurant ainsi qu'ils sont disponibles lorsque l'utilisateur navigue vers leurs routes respectives.

Pour configurer une stratégie de préchargement, modifiez votre app-routing.module.ts comme suit :

  
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { 
    path: 'dashboard', 
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) 
  },
  { 
    path: 'settings', 
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) 
  },
];

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

4. Gérer le Lazy Loading avec des gardes

Il se peut que vous souhaitiez contrôler le chargement d'un module en fonction de certaines conditions, telles que les autorisations utilisateur. Angular propose des gardes comme canLoad, qui vous permettent de restreindre l'accès aux modules lazy-loaded.

Exemple : Utilisation du garde canLoad

Le garde canLoad vérifie si un module doit être chargé avant qu'Angular ne déclenche le lazy loading. Cela est utile pour protéger les routes sensibles qui ne devraient être accessibles qu'aux utilisateurs autorisés.

Voici un exemple d'implémentation d'un garde canLoad :

  
import { Injectable } from '@angular/core';
import { CanLoad, Route, UrlSegment, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanLoad {
  constructor(private authService: AuthService, private router: Router) {}

  canLoad(route: Route, segments: UrlSegment[]): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

// Appliquer le garde à une route lazy-loaded dans app-routing.module.ts
const routes: Routes = [
  { 
    path: 'admin', 
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    canLoad: [AuthGuard]
  },
];
  

Conclusion : Améliorer les applications Angular avec le Lazy Loading

Le lazy loading est une technique d'optimisation essentielle pour les grandes applications Angular. En chargeant les modules à la demande, vous pouvez réduire les temps de chargement initiaux, améliorer les performances et offrir une meilleure expérience utilisateur. Couplé à des fonctionnalités comme les stratégies de préchargement et les gardes, le lazy loading offre un contrôle précis sur la manière dont et quand certaines parties de votre application sont chargées.

En exploitant le lazy loading, les développeurs peuvent créer des applications Angular évolutives, performantes et adaptées aux utilisateurs.