Lassen Sie Routings vorab laden, um die Bedienung zu beschleunigen.
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 vorab geladen werdenQuicklinkStrategy
, 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:
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Optionstaste + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- 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 die Navigation zu einer URL, die mit einem der vorab geladenen Module verknüpft ist, sofort erfolgt.
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 Routes 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:
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 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.
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:
- 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.
- Bei Anwendungen mit wenigen Modulen kann die integrierte
- Konfigurieren Sie die Strategie für das Vorladen, indem Sie die Eigenschaft
preloadStrategy
des Angular-Routers festlegen.