Lassen Sie Routings vorab laden, um die Bedienung zu beschleunigen.
Mit der Codeaufteilung auf Routing-Ebene lässt sich die anfängliche Ladezeit einer Anwendung verkürzen, indem das JavaScript für Routen, die nicht sofort benötigt werden, verzögert wird. So wartet der Angular-Router, bis ein Nutzer zu einer bestimmten Route navigiert, bevor eine Netzwerkanfrage zum Herunterladen des zugehörigen JavaScript ausgelöst wird.
Diese Technik ist zwar gut für das erste Laden der Seite, kann aber die Navigation verlangsamen, je nach Netzwerklatenz und Bandbreite der Nutzer. Eine Möglichkeit, dieses Problem zu beheben, ist das Vorabladen von Routen. Beim Preloading 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 beschleunigen können, wenn Sie Code-Splitting auf Routenebene verwenden, indem Sie JavaScript-Preloading in Angular nutzen.
Strategien zum Vorabladen von Routen in Angular
Der Angular-Router bietet eine Konfigurationseigenschaft namens preloadingStrategy
, die die Logik für das Vorladen und Verarbeiten von lazy-loaded Angular-Modulen definiert. Wir stellen zwei mögliche Strategien vor:
PreloadAllModules
, das alle verzögert geladenen Routen vorab lädt, wie der Name schon sagtQuicklinkStrategy
, wodurch nur die Routen vorab geladen werden, die mit Links auf der aktuellen Seite verknüpft sind.
Im Rest dieses Beitrags wird auf eine Angular-Beispielanwendung verwiesen. Den Quellcode finden Sie auf GitHub.
Strategie PreloadAllModules
verwenden
Die Beispiel-App hat mehrere lazy-loaded Routen. Wenn Sie alle mit der in Angular integrierten Strategie PreloadAllModules
vorab laden möchten, geben Sie sie als Wert für die Eigenschaft preloadingStrategy
in der Routerkonfiguration an:
import { RouterModule, PreloadAllModules } from '@angular/router';
// …
RouterModule.forRoot([
…
], {
preloadingStrategy: PreloadAllModules
})
// …
Stellen Sie die Anwendung jetzt bereit und sehen Sie sich in den Chrome-Entwicklertools den Bereich Netzwerk 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. Wenn Sie also zu einer URL navigieren, die mit einem der vorab geladenen Module verknüpft ist, erfolgt der Übergang sofort.
Quicklink-Vorabladestrategie verwenden
PreloadAllModules
ist in vielen Fällen nützlich. Wenn Sie jedoch Dutzende von Modulen haben, kann das aggressive Vorladen die Netzwerknutzung erheblich steigern. Da der Router die Routen in allen vorab geladenen Modulen registrieren muss, kann dies zu intensiven Berechnungen im UI-Thread und zu einer trägen Benutzeroberfläche führen.
Die quicklink-Bibliothek bietet eine bessere Strategie für größere Apps. Dabei wird die IntersectionObserver API verwendet, um nur Module vorzuladen, die mit Links verknüpft sind, die derzeit auf der Seite sichtbar sind.
Sie können einer Angular-App mit dem Paket ngx-quicklink einen Schnelllink hinzufügen. Installieren Sie zuerst das Paket von npm:
npm install --save ngx-quicklink
Sobald sie 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
vorab geladen, da die Schaltfläche in der Mitte der Seite einen Router-Link enthält. Wenn Sie die Seitenleiste öffnen, wird die Route „About“ vom Router vorab geladen:
Quicklink-Vorladestrategie für mehrere lazy-geladene Module verwenden
Das obige Beispiel funktioniert für eine einfache Anwendung. Wenn Ihre Anwendung jedoch mehrere Lazy-Load-Module enthält, müssen Sie QuicklinkModule
in ein gemeinsames Modul importieren, es exportieren und das gemeinsame Modul dann in Ihre 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 Ihre lazy-loaded Module:
import { SharedModule } from '@app/shared/shared.module';
…
@NgModule({
…
imports: [
SharedModule
],
…
});
Quicklinks
ist jetzt in Ihren lazy-loaded-Modulen verfügbar.
Über das einfache Vorabladen hinaus
Das selektive Vorabladen über „quicklink“ kann die Navigation erheblich beschleunigen. Sie können Ihre Vorabladestrategie jedoch noch netzwerkeffizienter gestalten, indem Sie das vorhersagende 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-Chunks vorab laden, die wahrscheinlich als Nächstes benötigt werden.
Auf dieser Seite der Guess.js-Website erfahren Sie, wie Sie Guess.js mit Angular verwenden.
Fazit
So beschleunigen Sie die Navigation, wenn Sie die Codeaufteilung auf Routing-Ebene verwenden:
- Wählen Sie die richtige Vorladestrategie basierend auf der Größe Ihrer Anwendung aus:
- Bei Anwendungen mit wenigen Modulen kann die integrierte
PreloadAllModules
-Strategie von Angular verwendet werden. - Anwendungen mit vielen Modulen sollten eine benutzerdefinierte Vorladestrategie wie Quicklink von Angular oder das in Guess.js implementierte Predictive Preloading verwenden.
- Bei Anwendungen mit wenigen Modulen kann die integrierte
- Konfigurieren Sie die Preloading-Strategie, indem Sie das Attribut
preloadStrategy
des Angular-Routers festlegen.