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 répartition 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 initialement. Ainsi, le routeur Angular attend qu'un utilisateur accède à un itinéraire donné 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 du réseau et de la bande passante des utilisateurs. Pour résoudre ce problème, vous pouvez utiliser le préchargement des routes. Lorsque l'utilisateur se trouve sur un itinéraire donné, le préchargement vous permet de télécharger et de mettre en cache le code JavaScript associé aux itinéraires susceptibles d'être nécessaires par la suite. Le routeur Angular fournit cette fonctionnalité directement.

Cet article explique comment accélérer la navigation lorsque vous utilisez la division du code au niveau de l'itinéraire grâce au préchargement JavaScript dans Angular.

Acheminer les stratégies de préchargement 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 précharge uniquement les routes associées aux liens sur 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 à chargement différé. Pour précharger tous ces éléments à l'aide de la stratégie PreloadAllModules (intégrée à Angular), spécifiez-la en tant que valeur de la propriété preloadingStrategy dans la configuration du routeur:

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

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

Diffusez l'application et consultez 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 les outils de développement.
  2. Cliquez sur l'onglet Réseau.

Vous devriez constater 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:

La stratégie "PreloadAllModules" en action.

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

PreloadAllModules est utile dans de nombreux cas. Toutefois, avec des dizaines de modules, le 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, cela peut entraîner des calculs intensifs dans le thread UI et nuire à l'expérience utilisateur.

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

Vous pouvez ajouter un Quicklink à une application Angular à l'aide du package ngx-quicklink. Commencez par installer le package depuis npm:

npm install --save ngx-quicklink

Une fois qu'il sera disponible dans votre projet, vous pourrez 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 situé au centre de la page contient un lien de routeur vers celui-ci. Et lorsque vous ouvrez la barre de 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 devrez importer QuicklinkModule dans un module partagé, l'exporter, puis importer le module partagé dans vos modules à chargement différé.

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

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

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

Ensuite, importez 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 Quicklink puisse considérablement accélérer la navigation, vous pouvez améliorer l'efficacité de votre stratégie de préchargement en utilisant le préchargement prédictif implémenté par Guess.js. En analysant un rapport provenant de Google Analytics ou d'un autre fournisseur de solutions d'analyse, Guess.js peut prédire le parcours de navigation d'un utilisateur et ne précharger que les fragments JavaScript susceptibles d'être nécessaires par la suite.

Pour apprendre à utiliser Guess.js avec Angular, consultez cette page du site Guess.js.

Conclusion

Pour accélérer la navigation lorsque vous fractionnez le code au niveau de l'itinéraire:

  1. Choisissez la stratégie de préchargement adaptée à 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, telle que le Quicklink d'Angular, ou préchargement prédictif, telle qu'elle est implémentée dans Guess.js.
  2. Configurez la stratégie de préchargement en définissant la propriété preloadStrategy du routeur Angular.