Strategien zum Vorabladen von Routen in Angular

Lassen Sie Routings vorab laden, um die Bedienung zu beschleunigen.

Minko Gechev

Mit der Codeaufteilung auf Routing-Ebene können Sie die anfängliche Ladezeit einer Anwendung reduzieren, indem Sie das JavaScript für Routen verzögern, die anfangs nicht benötigt werden. So wartet der Angular-Router, bis ein Nutzer eine bestimmte Route aufruft, bevor er eine Netzwerkanfrage zum Herunterladen des zugehörigen JavaScript auslöst.

Diese Methode eignet sich zwar hervorragend für das erste Laden der Seite, kann aber je nach Netzwerklatenz und Bandbreite der Nutzer die Navigation verlangsamen. Eine Möglichkeit, dieses Problem zu lösen, ist das Vorladen von Routen. Wenn Sie das Preloading verwenden, können Sie JavaScript, das mit Routen verknüpft ist, die wahrscheinlich als Nächstes benötigt werden, herunterladen und im Cache speichern, während sich der Nutzer auf einer bestimmten Route befindet. Der Angular-Router bietet diese Funktion standardmäßig.

In diesem Beitrag erfahren Sie, wie Sie die Navigation bei der Code-Aufteilung auf Routenebene beschleunigen, indem Sie das JavaScript-Preload in Angular nutzen.

Strategien für das Vorladen von Routen in Angular

Der Angular-Router bietet eine Konfigurationseigenschaft namens preloadingStrategy, die die Logik für das Vorladen und die Verarbeitung von lazy-loaded Angular-Modulen definiert. Wir besprechen zwei mögliche Strategien:

  • PreloadAllModules, mit dem alle verzögert geladenen Routen wie der Name schon sagt vorab geladen werden
  • QuicklinkStrategy, wodurch nur die Routen vorgespeichert werden, die mit Links auf der aktuellen Seite verknüpft sind.

Im Rest dieses Beitrags geht es um eine Beispiel-Angular-App. Den Quellcode finden Sie auf GitHub.

Strategie PreloadAllModules verwenden

Die Beispiel-App hat mehrere Lazy-Load-Routen. Wenn Sie alle mit der in Angular integrierten Strategie PreloadAllModules vorab laden möchten, geben Sie sie in der Routerkonfiguration als Wert für die Property preloadingStrategy an:

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

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

Stellen Sie jetzt die Anwendung bereit und sehen Sie sich den Bereich Netzwerk in den Chrome-Entwicklertools an:

  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Netzwerk.

Sie sollten sehen, dass der Router nyan-nyan-module.js und about-about-module.js im Hintergrund heruntergeladen hat, als Sie die Anwendung geöffnet haben:

Die Strategie „PreloadAllModules“ in Aktion.

Der Router hat auch die Routendeklarationen der Module registriert, sodass die Navigation zu einer URL, die mit einem der vorab geladenen Module verknüpft ist, sofort erfolgt.

PreloadAllModules ist in vielen Fällen nützlich. Wenn Sie jedoch Dutzende von Modulen haben, kann das aggressive Vorladen die Netzwerknutzung erheblich erhöhen. Da der Router die Routen in allen vorab geladenen Modulen registrieren muss, kann dies zu intensiven Berechnungen im UI-Thread und zu einer langsamen Nutzererfahrung führen.

Die Quicklink-Bibliothek bietet eine bessere Strategie für größere Apps. Dabei wird die IntersectionObserver verwendet, um nur Module zu laden, die mit Links verknüpft sind, die derzeit auf der Seite sichtbar sind.

Mit dem Paket ngx-quicklink können Sie einer Angular-App einen Quicklink hinzufügen. Installieren Sie zuerst das Paket über npm:

npm install --save ngx-quicklink

Sobald es in Ihrem Projekt verfügbar ist, können Sie QuicklinkStrategy verwenden, indem Sie die preloadingStrategy des Routers angeben und die QuicklinkModule importieren:

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

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

Wenn Sie die Anwendung jetzt wieder öffnen, wird nur nyan-nyan-module.js vom Router vorab geladen, da die Schaltfläche in der Mitte der Seite einen Routerlink enthält. Wenn Sie die seitliche Navigation öffnen, sehen Sie, dass der Router dann die Seite „Über“ vorlädt:

Eine Demo der Strategie zum Vorladen von Quicklinks.

Das obige Beispiel funktioniert für eine einfache Anwendung. Wenn Ihre Anwendung jedoch mehrere verzögert geladene Module enthält, müssen Sie die QuicklinkModule in ein freigegebenes Modul importieren, es exportieren und dann das freigegebene Modul in Ihre verzögert geladenen Module importieren.

Importieren Sie zuerst die QuicklinkModule aus ngx-quicklink in Ihr freigegebenes Modul und exportieren Sie sie:

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

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

Importieren Sie dann Ihre SharedModule in alle Ihre lazy-loaded-Module:

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

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

Quicklinks ist jetzt in Ihren lazy-loaded-Modulen verfügbar.

Mehr als nur einfaches Vorabladen

Das selektive Vorladen über einen Quicklink kann die Navigation zwar erheblich beschleunigen, aber Sie können Ihre Vorladestrategie noch netzwerkeffizienter gestalten, indem Sie das vorausschauende Vorladen verwenden, das von Guess.js implementiert wird. Durch die Analyse eines Berichts aus Google Analytics oder einem anderen Analyseanbieter kann Guess.js den Navigationspfad eines Nutzers vorhersagen und nur die JavaScript-Chunks vorab laden, die wahrscheinlich als Nächstes benötigt werden.

Wie Sie Guess.js mit Angular verwenden, erfahren Sie auf dieser Seite der Guess.js-Website.

Fazit

So beschleunigen Sie die Navigation bei der Codeaufteilung auf Routingebene:

  1. Wählen Sie je nach Größe Ihrer Anwendung die richtige Strategie für das Vorladen aus:
    • Bei Anwendungen mit wenigen Modulen kann die integrierte PreloadAllModules-Strategie von Angular verwendet werden.
    • Bei Anwendungen mit vielen Modulen sollte eine benutzerdefinierte Vorab-Ladestrategie verwendet werden, z. B. der Quicklink von Angular oder die Vorab-Ladefunktion, wie sie in Guess.js implementiert ist.
  2. Konfigurieren Sie die Strategie für das Vorladen, indem Sie die Eigenschaft preloadStrategy des Angular-Routers festlegen.