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 Vorabladen von Routen. Wenn sich der Nutzer auf einer bestimmten Route befindet, können Sie mithilfe des Vorabladens JavaScript herunterladen und im Cache speichern, das mit Routen verknüpft ist, die wahrscheinlich als Nächstes benötigt werden. 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 Lazy-Loading-Routen vorab geladen werden, wie der Name schon sagt
• QuicklinkStrategy, wodurch nur die Routes 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:

Der Router hat auch die Routendeklarationen der Module registriert, sodass der Wechsel sofort erfolgt, wenn Sie zu einer URL navigieren, die mit einem der vorinstallierten Module verknüpft ist.

Strategie für das Vorladen von Quicklinks verwenden

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 vorinstallierten Modulen registrieren muss, kann dies außerdem intensive Berechnungen im UI-Thread verursachen und die Nutzererfahrung beeinträchtigen.

Die Quicklink-Bibliothek bietet eine bessere Strategie für größere Apps. Dabei wird die IntersectionObserver API verwendet, um nur Module vorab 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 der Router in Ihrem Projekt verfügbar ist, können Sie QuicklinkStrategy verwenden. Geben Sie dazu den preloadingStrategy des Routers an und importieren Sie den QuicklinkModule:

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:

Die Quicklink-Preload-Strategie für mehrere verzögert geladene Module verwenden

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 die SharedModule in alle Lazy-Loading-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

Während das selektive Vorabladen über Quicklink die Navigation erheblich beschleunigen kann, können Sie Ihre Strategie zum Vorabladen noch netzwerkeffizienter gestalten, indem Sie prädiktives Vorabladen 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.

Informationen zur Verwendung von Guess.js mit Angular finden 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.