Strategien zum Vorabladen von Routen in Angular

Routen im Voraus laden, um Nutzer zu beschleunigen Navigation.

Minko Gechev

Durch die Codeaufteilung auf Routenebene können Sie die anfängliche Ladezeit einer Anwendung reduzieren, indem Sie das JavaScript für Routen verzögern, die ursprünglich nicht benötigt werden. Auf diese Weise wartet der Angular-Router, bis ein Nutzer zu einer bestimmten Route navigiert, bevor er eine Netzwerkanfrage zum Herunterladen des zugehörigen JavaScript-Codes auslöst.

Diese Methode eignet sich zwar hervorragend für den anfänglichen Seitenaufbau, kann jedoch je nach Nutzertyp Netzwerklatenz und Bandbreite. 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 durch Codeaufteilung auf Routenebene beschleunigen können, indem Sie die JavaScript-Vorabladung in Angular nutzen.

Strategien zum Vorabladen von Routen in Angular

Der Angular-Router bietet ein Konfigurationsattribut namens preloadingStrategy, das die Logik für das Vorabladen und Verarbeiten von Lazy-Loading-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: Damit werden nur die Routen vorab geladen, die mit Links auf der aktuellen Seite verknüpft sind.

Der Rest dieses Beitrags bezieht sich auf eine Angular-Beispiel-App. Den Quellcode finden Sie auf GitHub.

Strategie PreloadAllModules verwenden

Die Beispielanwendung hat mehrere Lazy-Loading-Routen. Wenn Sie alle mit der Strategie PreloadAllModules, die in Angular integriert ist, vorab laden möchten, geben Sie sie in der Routerkonfiguration als Wert für das Attribut preloadingStrategy an:

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

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

Stellen Sie nun die Anwendung bereit und sehen Sie sich in den Chrome-Entwicklertools den Bereich Network (Netzwerk) an:

  1. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + 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 App öffnen:

<ph type="x-smartling-placeholder">
</ph>
Die Strategie „PreloadAllModules“ in Aktion.

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

PreloadAllModules ist in vielen Fällen nützlich. Wenn Sie jedoch über Dutzende von Modulen verfügen, kann eine aggressives Vorabladen 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.

Sie können einer Angular-App Quicklink mit dem Paket ngx-quicklink hinzufügen. Beginnen Sie mit der Installation des Pakets aus 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 jetzt die Anwendung wieder öffnen, werden Sie feststellen, dass der Router nur nyan-nyan-module.js vorab lädt, da die Schaltfläche in der Mitte der Seite einen Router-Link enthält. Wenn Sie die seitliche Navigationsleiste öffnen, werden Sie feststellen, dass der Router die Seite „Info“ Route:

<ph type="x-smartling-placeholder">
</ph>
Demo der Quicklink-Vorab-Strategie

Das obige Beispiel funktioniert für eine einfache Anwendung. Wenn Ihre Anwendung jedoch mehrere Lazy-Loading-Module enthält, müssen Sie QuicklinkModule in ein freigegebenes Modul importieren, exportieren und dann in Ihre Lazy-Loading-Module importieren.

Importieren Sie zuerst das QuicklinkModule aus ngx-quicklink in Ihr freigegebenes Modul und exportieren Sie es:

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 deinen Lazy-Loading-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 von Google Analytics oder einem anderen Analyseanbieter kann Guess.js den Navigationspfad eines Nutzers vorhersagen und nur die JavaScript-Blöcke 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 Verwendung der Codeaufteilung auf Routenebene:

  1. Wählen Sie je nach Größe Ihrer Anwendung die richtige Vorabladestrategie aus: <ph type="x-smartling-placeholder">
      </ph>
    • Bei Anwendungen mit wenigen Modulen kann die integrierte PreloadAllModules-Strategie von Angular verwendet werden.
    • Bei Anwendungen mit vielen Modulen sollte eine benutzerdefinierte Strategie zum Vorabladen verwendet werden, z. B. Quicklink von Angular oder vorausschauendes Vorabladen, wie in Guess.js implementiert.
  2. Konfigurieren Sie die Vorabladestrategie, indem Sie das Attribut preloadStrategy des Angular-Routers festlegen.