Angular-Module und Lazy Loading: Optimierung durch eine modulare Architektur

Die modulare Architektur von Angular ist ein zentraler Aspekt des Frameworks, der es Entwicklern ermöglicht, große Anwendungen in handhabbare, wiederverwendbare Teile zu zerlegen. Mit Lazy Loading lässt sich die Ladezeit von Angular-Anwendungen erheblich optimieren, indem nicht benötigte Module erst dann geladen werden, wenn sie tatsächlich gebraucht werden. In diesem Artikel werden wir die Bedeutung der modularen Architektur in Angular erläutern und zeigen, wie man Lazy Loading implementiert, um die Leistung zu verbessern.

Bedeutung der modularen Architektur in Angular

In Angular basieren Anwendungen auf Modulen. Jedes Modul ist eine Sammlung von Komponenten, Direktiven, Pipes und Services, die gemeinsam eine bestimmte Funktionalität implementieren. Die modulare Architektur fördert die Wiederverwendbarkeit und Wartbarkeit des Codes und erleichtert die Zusammenarbeit in größeren Entwicklerteams.

Was ist ein Modul in Angular?

Ein Modul ist eine Klasse, die mit dem Dekorator `@NgModule` versehen ist. Jedes Angular-Projekt hat mindestens ein Modul, das sogenannte Root-Modul (normalerweise `AppModule`), das den Einstiegspunkt für die Anwendung bildet. Ein Modul organisiert verwandte Teile der Anwendung und gruppiert sie zusammen.

Beispiel eines einfachen Moduls:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';

@NgModule({
  declarations: [AppComponent, UserComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule {}

In diesem Beispiel importiert das Modul `AppModule` andere Module (`BrowserModule`, `FormsModule`) und deklariert die Komponenten (`AppComponent`, `UserComponent`), die es bereitstellt.

Vorteile der modularen Architektur

1. Klarere Struktur: Durch die Organisation des Codes in Module wird der Code besser lesbar und wartbar. Jede Funktionalität ist in einem eigenen Modul gekapselt.

2. Wiederverwendbarkeit: Module ermöglichen es, Teile der Anwendung wiederzuverwenden. Ein Modul kann in verschiedenen Bereichen einer Anwendung oder sogar in mehreren Projekten verwendet werden.

3. Leichtere Wartung: Änderungen und Erweiterungen können einfacher durchgeführt werden, da der Code in kleinere, fokussierte Einheiten unterteilt ist.

4. Lazy Loading: Die modulare Struktur erleichtert die Implementierung von Lazy Loading, was zu einer besseren Performance führt.

Was ist Lazy Loading?

Lazy Loading ist eine Technik, mit der Module nur dann geladen werden, wenn sie tatsächlich benötigt werden. Anstatt alle Module beim Start der Anwendung zu laden, lädt Angular nur das Root-Modul und die für den initialen Start erforderlichen Module. Weitere Module werden erst dann geladen, wenn der Benutzer auf eine Funktion zugreift, die diese Module benötigt.

Lazy Loading ist besonders bei größeren Anwendungen nützlich, da es die Initialisierungsgeschwindigkeit verbessert und die Ladezeit verkürzt. Dadurch wird die Nutzererfahrung optimiert, insbesondere bei langsamen Netzwerkverbindungen oder großen Code-Basen.

Implementierung von Lazy Loading

Um Lazy Loading in Angular zu implementieren, wird das Routing verwendet. Die Module werden nicht direkt in das Root-Modul importiert, sondern über `loadChildren` dynamisch geladen.

Schritt 1: Erstellen eines Feature-Moduls

Zunächst erstellst du ein separates Modul, das nur geladen wird, wenn der Benutzer eine bestimmte Route besucht. Dies kann zum Beispiel ein Modul für einen Benutzerbereich sein.

Erstelle mit dem Angular CLI ein neues Modul:

ng generate module user --route user --module app.module

Dieser Befehl erstellt ein neues Modul namens `UserModule` und konfiguriert es automatisch für Lazy Loading. Es erzeugt auch eine Route, die das Modul lädt, wenn der Benutzer `/user` aufruft.

Schritt 2: Konfiguration des Routings für Lazy Loading

Im `AppModule` wird die Route für das Lazy Loading wie folgt konfiguriert:

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

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

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {}

Hier wird die `loadChildren`-Eigenschaft verwendet, um das Modul nur zu laden, wenn die Route `/user` aufgerufen wird. Angular verwendet den dynamischen Import, um das Modul asynchron zu laden.

Schritt 3: Erstellen eines Feature-Routings

Das Feature-Modul, in diesem Fall `UserModule`, sollte sein eigenes Routing haben, um zu definieren, welche Komponenten angezeigt werden sollen, wenn der Benutzer die Route `/user` besucht.

user-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserComponent } from './user.component';

const routes: Routes = [
  { path: '', component: UserComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

export class UserRoutingModule {}

user.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserRoutingModule } from './user-routing.module';
import { UserComponent } from './user.component';

@NgModule({
  declarations: [UserComponent],
  imports: [CommonModule, UserRoutingModule]
})

export class UserModule {}

Das `UserModule` wird nur geladen, wenn der Benutzer zur `/user`-Route navigiert, und es verwendet das Feature-Routing, um die Komponenten innerhalb des Moduls zu verwalten.

Vorteile von Lazy Loading

Lazy Loading bietet mehrere Vorteile, insbesondere bei großen Anwendungen:

1. Verbesserte Ladezeit: Da nur die Module geladen werden, die für den aktuellen Anwendungsstatus erforderlich sind, wird die Ladezeit beim Start der Anwendung erheblich reduziert.

2. Geringere Speicherbelastung: Da nicht alle Module auf einmal geladen werden, benötigt die Anwendung weniger Speicher, was die Performance steigert.

3. Bessere Nutzererfahrung: Benutzer müssen nicht auf das Laden unnötiger Teile der Anwendung warten, die sie möglicherweise nie nutzen werden.

4. Skalierbarkeit: Lazy Loading ermöglicht es, die Anwendung zu skalieren, ohne die Leistung zu beeinträchtigen.

Vorladen von Modulen

Obwohl Lazy Loading die Leistung verbessert, gibt es Szenarien, in denen du Module vorladen möchtest, bevor der Benutzer sie benötigt. Angular bietet die Möglichkeit, Module im Hintergrund zu laden, während der Benutzer mit anderen Teilen der Anwendung interagiert. Dies wird Preloading genannt.

Du kannst Preloading in der Routing-Konfiguration aktivieren:

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

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

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})

export class AppRoutingModule {}

In diesem Beispiel wird die `PreloadAllModules`-Strategie verwendet, um alle Module im Hintergrund zu laden, nachdem die anfängliche Anwendung geladen wurde.

Fazit

Die modulare Architektur von Angular und die Implementierung von Lazy Loading sind entscheidende Techniken, um große Anwendungen effizient zu organisieren und die Ladezeit zu optimieren. Indem du deine Anwendung in Module unterteilst und Lazy Loading anwendest, stellst du sicher, dass deine Anwendung schneller geladen wird, weniger Speicher beansprucht und eine bessere Nutzererfahrung bietet. Lazy Loading ist besonders nützlich in großen und komplexen Anwendungen, bei denen eine gute Performance entscheidend ist.