Lazy Loading implementieren in Angular

1. Verwendung von Lazy Loading in Angular
2. Implementieren von Lazy Loading in Angular

In diesem Tutorial wird die Verwendung von Lazy Loading in Angular und seine Implementierung erläutert.

Lazy Loading ist der Prozess des verzögerten Ladens der Ressourcen einer Webseite. Diese Technik wird normalerweise auf Webseiten mit großen Datenmengen oder Bildern verwendet, nicht auf der obersten Ebene.

Angular Lazy Loading hilft, nur die erforderlichen Ressourcen für eine bestimmte Seite zu laden. Dadurch wird die anfängliche Downloadgröße verringert und die Leistung Ihrer Anwendung verbessert, indem Netzwerkanforderungen reduziert werden.

Dies kann mit dem integrierten Lazy Load-Modul von Angular oder einem externen Modul wie dem Angular Universal Lazy Load-Modul erreicht werden, das für Konfiguration und Builds auf Webpack angewiesen ist.

Verwendung von Lazy Loading in Angular

Der häufigste Anwendungsfall für verzögertes Laden ist das Laden von Daten aus einer API, aber Sie möchten nicht alle Daten abrufen. Es funktioniert nicht, wenn Ihre App eine einzelne Ansicht ohne Routing hat.

Lazy Loading garantiert, dass nur die wesentlichen Module geladen und verwendet werden, wenn die Anwendung zum ersten Mal bereitgestellt wird. Dies kommt der Anwendung in Bezug auf die Leistung zugute, da die Ladezeiten verkürzt werden, was zu einer reaktionsschnelleren Anwendung für den Endbenutzer führt.

Es dauert einige Zeit, alle Module zu laden, also lädt es nur ein paar Module, wenn der Benutzer eine Seite zum ersten Mal besucht, und lädt dann nach Bedarf mehr.

Lassen Sie uns einige Anwendungsfälle für Angular Lazy Loading besprechen.

• Zurückstellen unkritischer Skripte und Stylesheets, bis sie benötigt werden;
• Anbieterseitige und kundenseitige Bildschirme auf einer E-Commerce-Website können in verschiedene Module unterteilt sein. Sie können auch ein eigenes Zahlungsmodul erstellen.
• Laden von Skripten und Stylesheets nur bei Bedarf.

Implementieren von Lazy Loading in Angular

Das Implementieren von Lazy Loading in Angular ist ein sehr einfacher Prozess. Wir müssen die richtigen Module hinzufügen und unsere Routen einrichten.

Der erste Schritt besteht darin, die erforderlichen Module für Lazy Loading hinzuzufügen. Dazu importieren wir LazyModule aus @angular/router und fügen es unserem imports-Array im NgModule-Decorator unseres Anwendungsmoduls hinzu.

Dann müssen wir unsere Routen konfigurieren, um anzugeben, welche Module bei Bedarf oder träge bei Bedarf geladen werden sollen. Wir fügen eine neue Route mit loadChildren: 'lazy-loaded-child-routes' als Attribut hinzu oder ändern eine bestehende Route.

Beispiel:

TypeScript-Code (app.component.ts):

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent { }
@Component({
    selector: 'app-home',
    template: '<h3>Home Active!!!</h3>',
})
export class AppadComponent  {}
const routes: Routes = [
    { path: 'Home', component: AppadComponent },
    { path: 'About', loadChildren: './lazy-loading.module#SecondModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }

TypeScript-Code (lazy-loading.modules.ts):

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'app-about',
    template: '<h3>About Active!!!</h3>',
})
export class MyComponent  {}
const routes: Routes = [
    { path: '', component: MyComponent }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }
@NgModule({
    imports:      [ RootRoutingModule ],
    declarations: [ MyComponent ]
})
export class SecondModule { }

HTML-Code (app.component.html):

<h2> Example of Angular Lazy Loading</h2>
    <a routerLink='Home'>Home</a>
    <br>
    <a routerLink='About'>About</a>
    <router-outlet></router-outlet>

Klicken Sie hier, um die Funktionsweise des obigen Codes zu überprüfen.

Vermeiden Sie nach Möglichkeit faule Ladepfade, die Ihre Benutzer häufig besuchen. Reduzieren Sie die Größe Ihrer Chunks so weit wie möglich.

Wenn eine Lazy-Loaded-Route abgerufen wird, verwenden Sie außerdem Router-Zustände, um einen Loader oder eine Animation anzuzeigen, damit Ihre Benutzer nicht glauben, dass Ihre Anwendung verzögert wird.