Stratégies de préchargement de routes dans Angular

Préchargez les itinéraires à l'avance pour accélérer la navigation des utilisateurs.

Minko Gechev

La division du code au niveau du routage peut vous aider à réduire le temps de chargement initial d'une application en retardant le code JavaScript associé aux routes qui ne sont pas nécessaires au départ. De cette manière, le routeur Angular attend qu'un utilisateur accède à une route donnée avant de déclencher une requête réseau pour télécharger le code JavaScript associé.

Bien que cette technique soit idéale pour le chargement initial de la page, elle peut ralentir la navigation, en fonction de la latence et de la bande passante du réseau des utilisateurs. Pour résoudre ce problème, vous pouvez utiliser le préchargement des itinéraires. Grâce au préchargement, lorsque l'utilisateur se trouve sur un parcours donné, vous pouvez télécharger et mettre en cache le code JavaScript associé aux parcours susceptibles d'être nécessaires ensuite. Le routeur Angular fournit cette fonctionnalité prête à l'emploi.

Dans cet article, vous allez apprendre à accélérer la navigation lorsque vous utilisez le fractionnement de code au niveau des routes en profitant du préchargement JavaScript dans Angular.

Stratégies de préchargement des itinéraires dans Angular

Le routeur Angular fournit une propriété de configuration appelée preloadingStrategy, qui définit la logique de préchargement et de traitement des modules Angular à chargement différé. Nous allons aborder deux stratégies possibles:

  • PreloadAllModules, qui précharge toutes les routes à chargement différé, comme son nom l'indique
  • QuicklinkStrategy, qui ne précharge que les routes associées aux liens de la page actuelle.

Le reste de cet article fait référence à un exemple d'application Angular. Vous trouverez le code source sur GitHub.

Utiliser la stratégie PreloadAllModules

L'application exemple comporte plusieurs routes chargées de manière différée. Pour les précharger tous à l'aide de la stratégie PreloadAllModules, qui est intégrée à Angular, spécifiez-la comme valeur de la propriété preloadingStrategy dans la configuration du routeur:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

Servez maintenant l'application et examinez le panneau Network (Réseau) dans les outils pour les développeurs Chrome:

  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir DevTools.
  2. Cliquez sur l'onglet Réseau.

Vous devriez voir que le routeur a téléchargé nyan-nyan-module.js et about-about-module.js en arrière-plan lorsque vous avez ouvert l'application:

Stratégie PreloadAllModules en action.

Le routeur a également enregistré les déclarations de route des modules afin que, lorsque vous accédez à une URL associée à l'un des modules préchargés, la transition soit instantanée.

PreloadAllModules est utile dans de nombreux cas. Toutefois, si vous disposez de dizaines de modules, son préchargement agressif peut vraiment augmenter l'utilisation du réseau. De plus, comme le routeur doit enregistrer les routes dans tous les modules préchargés, il peut entraîner des calculs intensifs dans le thread d'interface utilisateur et ralentir l'expérience utilisateur.

La bibliothèque de liens rapides est une meilleure stratégie pour les applications plus volumineuses. Elle utilise l'API IntersectionObserver pour ne précharger que les modules associés aux liens actuellement visibles sur la page.

Vous pouvez ajouter un lien rapide à une application Angular à l'aide du package ngx-quicklink. Commencez par installer le package à partir de npm:

npm install --save ngx-quicklink

Une fois qu'il est disponible dans votre projet, vous pouvez utiliser QuicklinkStrategy en spécifiant le preloadingStrategy du routeur et en important le QuicklinkModule:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

Lorsque vous ouvrez à nouveau l'application, vous remarquerez que le routeur ne précharge que nyan-nyan-module.js, car le bouton au centre de la page est associé à un lien vers le routeur. Lorsque vous ouvrez la navigation latérale, vous remarquerez que le routeur précharge ensuite l'itinéraire "À propos" :

Démonstration de la stratégie de préchargement des liens rapides.

L'exemple ci-dessus fonctionne pour une application de base, mais si votre application contient plusieurs modules à chargement différé, vous devez importer le QuicklinkModule dans un module partagé, l'exporter, puis importer le module partagé dans vos modules à chargement différé.

Commencez par importer le QuicklinkModule de ngx-quicklink dans votre module partagé, puis exportez-le:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

Importez ensuite votre SharedModule dans tous vos modules à chargement différé:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks sera désormais disponible dans vos modules à chargement différé.

Aller au-delà du préchargement de base

Bien que le préchargement sélectif via un lien rapide puisse accélérer considérablement la navigation, vous pouvez rendre votre stratégie de préchargement encore plus efficace sur le réseau en utilisant le préchargement prédictif, implémenté par Guess.js. En analysant un rapport Google Analytics ou d'un autre fournisseur d'analyse, Guess.js peut prédire le parcours de navigation d'un utilisateur et ne précharger que les blocs JavaScript susceptibles d'être nécessaires ensuite.

Pour découvrir comment utiliser Guess.js avec Angular, consultez cette page du site Guess.js.

Conclusion

Pour accélérer la navigation lorsque vous utilisez la division du code au niveau du routage:

  1. Choisissez la stratégie de préchargement appropriée en fonction de la taille de votre application :
    • Les applications comportant peu de modules peuvent utiliser la stratégie PreloadAllModules intégrée d'Angular.
    • Les applications comportant de nombreux modules doivent utiliser une stratégie de préchargement personnalisée, comme le lien rapide d'Angular ou le préchargement prédictif, tel qu'implémenté dans Guess.js.
  2. Configurez la stratégie de préchargement en définissant la propriété preloadStrategy du routeur Angular.