Strategien zum Vorabladen von Routen in Angular

Routen vorab laden, um die Navigation der Nutzer zu beschleunigen

Minko Gechev

Die Codeaufteilung auf Routenebene kann dazu beitragen, die anfängliche Ladezeit einer Anwendung zu reduzieren, indem JavaScript-Code verzögert wird, der mit nicht benötigten Routen verknüpft ist. 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 auslöst.

Diese Technik eignet sich hervorragend für den anfänglichen Seitenaufbau, kann jedoch je nach Netzwerklatenz und Bandbreite der Nutzer die Navigation verlangsamen. Eine Möglichkeit, dieses Problem zu umgehen, ist das Vorabladen von Routen. Wenn sich der Nutzer auf einer bestimmten Route befindet, können Sie mithilfe des Vorabladens JavaScript-Code für Routen, die wahrscheinlich als Nächstes benötigt werden, herunterladen und im Cache speichern. Diese Funktion ist beim Angular-Router sofort einsatzbereit.

In diesem Beitrag erfahren Sie, wie Sie die Navigation durch Codeaufteilung auf Routenebene mithilfe der JavaScript-Vorabladefunktion in Angular beschleunigen.

Strategien zum Vorabladen von Routen in Angular

Der Angular-Router bietet eine Konfigurationseigenschaft namens preloadingStrategy, die die Logik zum Vorabladen und Verarbeiten von Lazy-Loading Angular-Modulen definiert. Wir besprechen zwei mögliche Strategien:

• PreloadAllModules: Damit werden alle Routen mit Lazy-Loading vorab geladen, 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-Beispielanwendung. Den Quellcode finden Sie auf GitHub.

Strategie PreloadAllModules verwenden

Die Beispiel-App verfügt über mehrere Lazy-Loading-Routen. Wenn Sie alle mit der in Angular integrierten Strategie PreloadAllModules vorab laden möchten, geben Sie diese 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 den Bereich Netzwerk in den Chrome-Entwicklertools an:

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

Beim Öffnen der App sollten Sie sehen, dass nyan-nyan-module.js und about-about-module.js vom Router im Hintergrund heruntergeladen wurden:

Der Router hat auch die Routendeklarationen der Module registriert. Wenn Sie zu einer URL navigieren, die einem der vorinstallierten Module zugeordnet ist, erfolgt der Übergang sofort.

Quicklink-Strategie zum Vorabladen verwenden

PreloadAllModules ist in vielen Fällen nützlich. Wenn Sie jedoch Dutzende von Modulen haben, kann das aggressive Vorabladen die Netzwerkauslastung erheblich erhöhen. Da der Router die Routen in allen vorinstallierten Modulen registrieren muss, kann dies intensive Berechnungen im UI-Thread verursachen und die Nutzerfreundlichkeit verlangsamen.

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 einen Quicklink mit dem Paket ngx-quicklink zu einer Angular-App hinzufügen. Beginnen Sie mit der Installation des Pakets von npm:

npm install --save ngx-quicklink

Sobald sie in Ihrem Projekt verfügbar ist, können Sie QuicklinkStrategy verwenden. Geben Sie dazu die preloadingStrategy des Routers an und importieren Sie die QuicklinkModule:

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

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

Wenn Sie die Anwendung jetzt 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 Route „Info“ vorab lädt:

Quicklink-Vorabladestrategie für mehrere Lazy-Load-Module verwenden

Das obige Beispiel funktioniert für eine einfache App. Wenn deine App jedoch mehrere Lazy-Load-Module enthält, musst du QuicklinkModule in ein freigegebenes Modul importieren, exportieren und dann in deine Lazy-Load-Module importieren.

Importieren Sie zuerst 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 SharedModule in alle Lazy-Load-Module:

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

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

Quicklinks ist jetzt in deinen Lazy-Load-Modulen verfügbar.

Mehr als nur das einfache Vorabladen

Das selektive Vorabladen über Quicklink kann die Navigation zwar erheblich beschleunigen, Sie können Ihre Vorabladestrategie aber durch die von Guess.js implementierte Strategie für das vorausschauende Vorabladen noch effizienter gestalten. Durch die Analyse eines Berichts von Google Analytics oder eines anderen Analyseanbieters kann Guess.js die Navigation 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, wenn Sie Codeaufteilung auf Routenebene verwenden:

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