Lazy Loading in Angular (lassen Sie es auf Ihrer Website funktionieren)

Angular ist ein von Google entwickeltes Frontend-JavaScript-Framework zum Erstellen skalierbarer Webanwendungen für Unternehmen. Einige dieser Anwendungen können ziemlich groß werden, was sich auf die Ladezeit Ihrer Anwendung auswirkt.

Um die Ladezeit zu verkürzen und das Gesamterlebnis Ihrer Benutzer zu verbessern, können Sie eine Technik verwenden, die als verzögertes Laden bezeichnet wird. Mit dieser nativen Angular-Funktion können Sie zuerst nur die erforderlichen Teile der Web-App laden und dann nach Bedarf andere Module laden.

In diesem Artikel erfahren Sie mehr über Lazy Loading und wie es Ihre Web-App beschleunigen kann.

Was ist Lazy Loading?

Lazy Loading bezieht sich auf die Technik, Webseitenelemente nur dann zu laden, wenn sie benötigt werden. Sein Gegenstück ist Eifer Loading , wenn alles sofort lädt – oder zu laden versucht. Das eifrige Abrufen aller Bilder, Videos, CSS- und JavaScript-Codes kann lange Ladezeiten bedeuten – schlechte Nachrichten für Benutzer.

Lazy Loading wird häufig für Bilder und Videos auf Websites verwendet, die viele Inhalte hosten. Anstatt alle Medien auf einmal zu laden, was viel Bandbreite verbrauchen und Seitenaufrufe verlangsamen würde, werden diese Elemente geladen, wenn ihre Position auf der Seite im Begriff ist, ins Sichtfeld zu scrollen.

Angular ist ein Single-Page-Anwendungsframework, das für einen Großteil seiner Funktionalität auf JavaScript angewiesen ist. Die JavaScript-Sammlung Ihrer App kann leicht groß werden, wenn die App wächst, und dies geht mit einem entsprechenden Anstieg der Datennutzung und Ladezeit einher. Um die Dinge zu beschleunigen, können Sie Lazy Loading verwenden, um zuerst erforderliche Module abzurufen und das Laden anderer Module zu verschieben, bis sie benötigt werden.

Vorteile von Lazy Loading in Angular

Lazy Loading bietet Vorteile, die Ihre Website benutzerfreundlicher machen. Diese schließen ein:

• Schnellere Ladezeit: JavaScript enthält Anweisungen zum Anzeigen Ihrer Seite und zum Laden ihrer Daten. Aus diesem Grund handelt es sich um eine Ressource, die das Rendering blockiert . Dies bedeutet, dass der Browser warten muss, bis das gesamte JavaScript geladen ist, bevor Ihre Seite gerendert wird. Beim verzögerten Laden in Angular wird das JavaScript in Chunks aufgeteilt, die separat geladen werden. Der anfängliche Chunk enthält nur Logik, die für das Hauptmodul der Seite benötigt wird. Es wird eifrig geladen, dann werden die restlichen Module träge geladen. Indem Sie die Größe des anfänglichen Chunks verringern, beschleunigen Sie das Laden und Rendern der Website.
• Weniger Datenverbrauch: Indem Sie die Daten in Blöcke aufteilen und nach Bedarf laden, verbrauchen Sie möglicherweise weniger Bandbreite.
• Gesparte Browser-Ressourcen: Da der Browser nur die benötigten Chunks lädt, verschwendet er keinen Arbeitsspeicher und keine CPU, indem er versucht, nicht benötigten Code zu interpretieren und zu rendern.

Implementieren von Lazy Loading in Angular

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

• NodeJS installiert
• Grundkenntnisse in Angular

Steigern Sie Ihr Projekt

Sie verwenden die Angular-CLI, um Ihr Projekt zu erstellen. Sie können die CLI mit npm installieren, indem Sie den folgenden Befehl ausführen:

npm install -g @angular/cli

Erstellen Sie danach ein Projekt namens Lazy Loading Demo wie folgt:

ng new lazy-loading-demo --routing

Dieser Befehl erstellt ein neues Angular-Projekt, komplett mit Routing. Sie arbeiten ausschließlich im Ordner src/app , der den Code für Ihre App enthält. Dieser Ordner enthält Ihre Haupt-Routing-Datei app-routing.module.ts . Die Struktur des Ordners sollte wie folgt aussehen:

Erstellen Sie ein Funktionsmodul mit Routen

Als Nächstes erstellen Sie ein Funktionsmodul, das langsam geladen wird. Um dieses Modul zu erstellen, führen Sie diesen Befehl aus:

ng generate module blog --route blog --module app.module

Dieser Befehl erstellt zusammen mit dem Routing ein Modul namens BlogModule . Wenn Sie src /app/app-routing.module.ts öffnen, sehen Sie, dass es jetzt so aussieht:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Der für Lazy Loading wichtige Teil ist die dritte Zeile:

 const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];

Diese Linie definiert die Routen. Die Route für den Blog verwendet das Argument loadChildren anstelle von component . Das Argument loadChildren weist Angular an, die Route verzögert zu laden – das Modul nur dann dynamisch zu importieren, wenn die Route besucht wird, und es dann an den Router zurückzugeben. Das Modul definiert in seiner Datei routing.module.ts seine eigenen untergeordneten Routen, z. B. blog/** . Das von Ihnen generierte Blog-Modul sieht folgendermaßen aus:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { BlogComponent } from './blog.component'; const routes: Routes = [{ path: '', component: BlogComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class BlogRoutingModule { }

Sie werden feststellen, dass diese Routing-Datei eine einzige Route enthält, '' . Dies wird nach /blog aufgelöst und verweist auf die BlogComponent. Sie können weitere Komponenten hinzufügen und diese Routen in dieser Datei definieren.

Wenn Sie beispielsweise eine Komponente hinzufügen möchten, die Details zu einem bestimmten Blogbeitrag abrufen würde, können Sie die Komponente mit diesem Befehl erstellen:

ng generate component blog/detail

Dadurch wird die Komponente für das Blog-Detail generiert und dem Blog-Modul hinzugefügt. Um eine Route dafür hinzuzufügen, können Sie sie einfach zu Ihrem Routen-Array hinzufügen:

 const routes: Routes = [{ path: '', component: BlogComponent }, {path:"/:title",component: DetailComponent}];

Dadurch wird eine Route hinzugefügt, die nach blog/:title aufgelöst wird (z. B. blog/angular-tutorial ). Diese Reihe von Routen wird verzögert geladen und ist nicht im ursprünglichen Paket enthalten.

Verifizieren Sie Lazy Loading

Sie können leicht überprüfen, ob Lazy Loading funktioniert, indem Sie ng serve und die Ausgabe beobachten. Am Ende Ihrer Ausgabe sollten Sie so etwas erhalten:

Die obige Ausgabe ist in zwei Teile unterteilt: Initial Chunk Files sind die Dateien, die geladen werden, wenn die Seite zum ersten Mal geladen wird. Lazy Chunk Files werden lazy-loaded. In diesem Beispiel ist das Blog-Modul aufgeführt.

Überprüfung auf verzögertes Laden durch Browser-Netzwerkprotokolle

Eine andere Möglichkeit, verzögertes Laden zu bestätigen, ist die Verwendung der Registerkarte „ Netzwerk “ im Bereich „Entwicklertools“ Ihres Browsers. (Unter Windows ist das F12 in Chrome und Microsoft Edge und Strg – Umschalt – I in Firefox. Auf einem Mac ist das Befehl – ​​Option – I in Chrome, Firefox und Safari.)

Wählen Sie den JS -Filter, um nur über das Netzwerk geladene JavaScript-Dateien anzuzeigen. Nach dem ersten Laden der App sollten Sie so etwas erhalten:

Wenn Sie zu /blog navigieren, werden Sie feststellen, dass ein neuer Chunk, src_app_blog_blog_module_ts.js , geladen wird. Das bedeutet, dass Ihr Modul nur angefordert wurde, als Sie zu dieser Route navigiert sind, und es träge geladen wird. Das Netzwerkprotokoll sollte in etwa so aussehen:

Faules Laden gegen eifriges Laden

Lassen Sie uns zum Vergleich auch ein eifrig geladenes Modul erstellen und sehen, wie es sich auf die Dateigröße und Ladezeit auswirkt. Um dies zu demonstrieren, erstellen Sie ein Modul zur Authentifizierung. Ein solches Modul muss möglicherweise eifrig geladen werden, da die Authentifizierung möglicherweise von allen Benutzern verlangt wird.

Generieren Sie ein AuthModule, indem Sie diesen Befehl in der CLI ausführen:

ng generate module auth --routing --module app.module

Das erzeugt das Modul und eine Routing-Datei. Außerdem wird das Modul zur Datei app.module.ts . Im Gegensatz zu dem Befehl, den wir beim letzten Mal zum Generieren eines Moduls verwendet haben, fügt dieser jedoch keine Lazy-Loaded-Route hinzu. Es verwendet den Parameter --routing anstelle von --route <name> . Dadurch wird das Authentifizierungsmodul zum imports -Array in app.module.ts :

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, AuthModule //added auth module ], providers: [], bootstrap: [AppComponent] })

Das Hinzufügen von AuthModule zu Ihrem AppModule-Importarray bedeutet, dass das Authentifizierungsmodul zu den anfänglichen Chunk-Dateien hinzugefügt und in das Haupt-JavaScript-Bundle aufgenommen wird. Um dies zu überprüfen, können Sie ng serve erneut ausführen und die Ausgabe beobachten:

Wie Sie sehen können, ist das Authentifizierungsmodul nicht in den Lazy Chunk-Dateien enthalten. Außerdem hat sich die Größe des Anfangsbündels erhöht. Die Größe der Datei main.js sich fast verdoppelt und ist von 8 KB auf 15 KB gestiegen. In diesem Beispiel ist die Erhöhung gering, da die Komponenten nicht viel Code enthalten. Aber wenn Sie die Komponenten mit Logik füllen, wird diese Dateigröße zunehmen, was ein starkes Argument für Lazy Loading ist.

Zusammenfassung

Sie haben gelernt, wie Sie Lazy Loading in Angular verwenden, um Module nur dann abzurufen, wenn sie benötigt werden. Lazy Loading ist eine großartige Technik, um die Ladezeiten zu verbessern, die Datennutzung zu reduzieren und Ihre Front-End- und Back-End-Ressourcen besser zu nutzen.

Lazy Loading wird zusammen mit Technologien wie Inhaltsverteilungsnetzwerken und dem Minimieren von JavaScript sowohl die Leistung Ihrer Website als auch die Zufriedenheit Ihrer Benutzer verbessern.

Wenn du eine WordPress-Seite entwickelst und die Geschwindigkeit wirklich erhöhen möchtest, lies über Kinsta Edge Caching, um einige beeindruckende Zahlen zu sehen.