Angular ist ein Frontend-JavaScript-Framework, das von Google entwickelt wurde, um skalierbare, unternehmenstaugliche Webanwendungen zu erstellen. Einige dieser Anwendungen können ziemlich groß werden und die Ladezeit deiner Anwendung beeinträchtigen.

Um die Ladezeit zu verkürzen und das Gesamterlebnis deiner Nutzer/innen zu verbessern, kannst du eine Technik nutzen, die als Lazy Loading bekannt ist. Mit dieser nativen Angular-Funktion kannst du zunächst nur die benötigten Teile der Webanwendung laden und dann bei Bedarf weitere Module nachladen.

In diesem Artikel erfährst du, was Lazy Loading ist und wie du damit deine Webanwendung beschleunigen kannst.

Was ist Lazy Loading?

Lazy Loading ist eine Technik, bei der Elemente einer Webseite nur dann geladen werden, wenn sie benötigt werden. Das Gegenstück dazu ist das Eager Loading, bei dem alles sofort geladen wird – oder versucht wird, es zu laden. Wenn alle Bilder, Videos, CSS- und JavaScript-Code eager geladen werden, kann das zu langen Ladezeiten führen – eine schlechte Nachricht für die Nutzer/innen.

Lazy Loading wird oft für Bilder und Videos auf Websites verwendet, die viele Inhalte enthalten. Anstatt alle Medien auf einmal zu laden, was viel Bandbreite verbrauchen und die Seitenaufrufe verzögern würde, werden diese Elemente erst dann geladen, wenn ihre Position auf der Seite zu sehen ist.

Angular ist ein Single-Page-Application-Framework, das für einen Großteil seiner Funktionen auf JavaScript angewiesen ist. Die JavaScript-Sammlung deiner App kann mit der Zeit sehr groß werden, was zu einem erhöhten Datenverbrauch und einer längeren Ladezeit führt. Um die Dinge zu beschleunigen, kannst du Lazy Loading verwenden, um zuerst die benötigten Module zu laden und das Laden anderer Module aufzuschieben, bis sie benötigt werden.

Vorteile von Lazy Loading in Angular

Lazy Loading bietet Vorteile, die deine Website benutzerfreundlicher machen. Dazu gehören:

  • Schnellere Ladezeit: JavaScript enthält Anweisungen für die Anzeige deiner Seite und das Laden ihrer Daten. Aus diesem Grund ist es eine Rendering-Blocking-Ressource. Das bedeutet, dass der Browser warten muss, bis das gesamte JavaScript geladen ist, bevor deine Seite angezeigt wird. Beim Lazy Loading in Angular wird das JavaScript in einzelne Teile aufgeteilt, die separat geladen werden. Der erste Brocken enthält nur die Logik, die für das Hauptmodul der Seite benötigt wird. Es wird eager geladen, dann werden die restlichen Module lazy geladen. Indem du die Größe des ersten Brocken reduzierst, wird die Seite schneller geladen und gerendert.
  • Weniger Datenverbrauch: Indem du die Daten in Stücke aufteilst und nach Bedarf lädst, verbrauchst du möglicherweise weniger Bandbreite.
  • Gesparte Browser-Ressourcen: Da der Browser nur die Brocken lädt, die benötigt werden, verschwendet er keinen Speicher und keine CPU, um Code zu interpretieren und zu rendern, der nicht benötigt wird.

Lazy Loading in Angular implementieren

Um diesem Tutorial zu folgen, brauchst du Folgendes:

  • NodeJS installiert
  • Grundlegende Kenntnisse über Angular

Erstelle dein Projekt

Du wirst das Angular CLI verwenden, um dein Projekt zu erstellen. Du kannst das CLI mit npm installieren, indem du den folgenden Befehl ausführst:

npm install -g @angular/cli

Danach erstellst du ein Projekt mit dem Namen Lazy Loading Demo wie folgt:

ng new lazy-loading-demo --routing

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

Screenshot: Die Angular-Ordnerstruktur wird in einem Terminal angezeigt.
Die Ordnerstruktur eines Angular-Projekts

Ein Feature-Modul mit Routes erstellen

Als Nächstes erstellst du ein Feature-Modul, das lazy geladen werden soll. Um dieses Modul zu erstellen, führe diesen Befehl aus:

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

Dieser Befehl erstellt ein Modul mit dem Namen BlogModule sowie ein Routing. Wenn du src/app/app-routing.module.ts öffnest, siehst du, dass es jetzt wie folgt 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 Teil, der für das Lazy Loading wichtig ist, ist die dritte Zeile:

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

In dieser Zeile werden die Routen definiert. Die Route für den Blog verwendet das Argument loadChildren anstelle von component. Das Argument loadChildren weist Angular an, die Route lazy 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 seine eigenen Child-Routen, wie z. B. blog/**, in seiner routing.module.ts Datei. Das Blog-Modul, das du erstellt hast, sieht so 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 { }

Du wirst feststellen, dass diese Routing-Datei eine einzige Route enthält, ''. Diese wird für /blog aufgelöst und verweist auf die BlogComponent. Du kannst weitere Komponenten hinzufügen und diese Routen in dieser Datei definieren.

Wenn du zum Beispiel eine Komponente hinzufügen möchtest, die Details zu einem bestimmten Blogbeitrag liefert, könntest du die Komponente mit diesem Befehl erstellen:

ng generate component blog/detail

Das erzeugt die Komponente für das Blog-Detail und fügt sie dem Blog-Modul hinzu. Um eine Route für die Komponente hinzuzufügen, kannst du sie einfach zu deinem Routen-Array hinzufügen:

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

Dadurch wird eine Route hinzugefügt, die nach blog/:title auflöst (zum Beispiel blog/angular-tutorial). Dieses Array von Routen wird nach und nach geladen und ist nicht im ursprünglichen Bundle enthalten.

Überprüfe Lazy Loading

Du kannst leicht überprüfen, ob Lazy Loading funktioniert, indem du ng serve ausführst und die Ausgabe beobachtest. Am Ende deiner Ausgabe solltest du etwa Folgendes erhalten:

Screenshot: Ausgabe des ng serve-Befehls von Angular im Terminal.
Überprüfen von Lazy Loading mit Angulars ng serve.

Die obige Ausgabe ist in zwei Teile unterteilt: Initial Chunk Files sind die Dateien, die beim ersten Laden der Seite geladen werden. Lazy Chunk Files sind die Dateien, die mit Lazy Loading geladen werden. Das Blog-Modul ist in diesem Beispiel aufgeführt.

Überprüfen von Lazy Loading anhand der Netzwerkprotokolle des Browsers

Eine weitere Möglichkeit, Lazy Loading zu überprüfen, ist die Registerkarte Netzwerk in den Developer Tools deines Browsers. (Unter Windows ist das die Taste F12 in Chrome und Microsoft Edge und die Taste Strg–Umschalt–I in Firefox. Auf dem Mac ist es Befehl–Option–I in Chrome, Firefox und Safari.)

Wähle den Filter JS, um nur JavaScript-Dateien anzuzeigen, die über das Netzwerk geladen wurden. Nachdem die App zum ersten Mal geladen wurde, solltest du in etwa folgendes sehen:

Screenshot: In den Developer Tools protokollierte Angular JavaScript-Dateien.
Erstes Protokoll der JavaScript-Downloads in den Developer Tools

Wenn du zu /blog navigierst, wirst du feststellen, dass ein neuer Brocken, src_app_blog_blog_module_ts.js, geladen wurde. Das bedeutet, dass dein Modul nur angefordert wurde, als du zu dieser Route navigiert hast, und dass es lazy geladen wird. Das Netzwerkprotokoll sollte in etwa so aussehen:

Screenshot: Aktualisierte Ansicht der in den Developer Tools protokollierten Angular JavaScript-Dateien.
Lazy-geladenes Modul erscheint in Downloads, die von Developer Tools protokolliert werden

Lazy Loading vs. Eager Loading

Zum Vergleich wollen wir auch ein eager geladenes Modul erstellen und sehen, wie es sich auf die Dateigröße und die Ladezeit auswirkt. Um das zu demonstrieren, erstellst du ein Modul für die Authentifizierung. Ein solches Modul muss möglicherweise eager geladen werden, da die Authentifizierung etwas ist, das du von allen Benutzern verlangst.

Erstelle ein AuthModule, indem du diesen Befehl in der CLI ausführst:

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

Dadurch werden das Modul und eine Routing-Datei erzeugt. Außerdem wird das Modul der Datei app.module.ts hinzugefügt. Im Gegensatz zu dem Befehl, den wir beim letzten Mal verwendet haben, um ein Modul zu generieren, fügt dieser Befehl jedoch keine „Lazy Loaded“-Route hinzu. Er verwendet den Parameter --routing anstelle von --route <name>. Dadurch wird das Authentifizierungsmodul dem Array imports in app.module.ts hinzugefügt:

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

Wenn du AuthModule zu deinem AppModule-Imports-Array hinzufügst, bedeutet das, dass das Authentifizierungsmodul zu den ersten Chunk-Dateien hinzugefügt und in das Haupt-JavaScript-Bundle aufgenommen wird. Um dies zu überprüfen, kannst du ng serve erneut ausführen und die Ausgabe beobachten:

Screenshot: Angular-Skripte, nachdem das Authentifizierungsmodul hinzugefügt wurde.
Ausgabe des Befehls ng serve von Angular, nachdem das Authentifizierungsmodul hinzugefügt wurde

Wie du siehst, ist das Authentifizierungsmodul nicht Teil der Lazy Chunk-Dateien. Außerdem ist die Größe des ursprünglichen Pakets gestiegen. Die Datei main.js hat sich fast verdoppelt und ist von 8 KB auf 15 KB angewachsen. In diesem Beispiel ist die Zunahme gering, da die Komponenten nicht viel Code enthalten. Aber wenn du die Komponenten mit Logik füllst, wird diese Dateigröße zunehmen, was ein starkes Argument für das Lazy Loading ist.

Zusammenfassung

Du hast gelernt, wie du Lazy Loading in Angular einsetzen kannst, um Module nur dann zu laden, wenn sie benötigt werden. Lazy Loading ist eine großartige Technik, um die Ladezeiten zu verbessern, den Datenverbrauch zu reduzieren und die Ressourcen im Frontend und Backend besser zu nutzen.

Zusammen mit Technologien wie Content Distribution Networks und Minifying von JavaScript verbessert Lazy Loading die Leistung deiner Website und die Zufriedenheit deiner Nutzer/innen.

Wenn du eine WordPress-Website entwickelst und die Geschwindigkeit erhöhen willst, solltest du dich über Kinsta Edge Caching informieren, um beeindruckende Zahlen zu sehen.

Michael Nyamande

A digital product manager by day, Michael is a tech enthusiast who is always tinkering with different technologies. His interests include web and mobile frameworks, NoCode development, and blockchain development.