6 Tipps und Tricks zur Optimierung der Winkelleistung

Veröffentlicht: 2023-02-03

Angular ist ein leistungsstarkes JavaScript-Framework zum Erstellen von Webanwendungen, aber wenn Ihre Anwendung wächst, kann sie langsam und schwierig zu verwalten werden. Die Leistungsoptimierung von Angular ist ein wichtiger Bestandteil, um sicherzustellen, dass Ihre Angular-App reibungslos und effizient läuft.

In diesem Artikel werden wir einige Tipps und Tricks zum Optimieren der Leistung Ihrer Angular-Anwendung untersuchen, einschließlich Techniken zum Verbessern der Ladezeit, zum Reduzieren der Größe Ihrer Anwendung und zum Reduzieren der Anzahl unnötiger DOM-Updates. Egal, ob Sie ein erfahrener Angular-Entwickler sind oder gerade erst anfangen, diese Tipps und Tricks helfen Ihnen, die Leistung Ihrer Anwendung zu verbessern und sicherzustellen, dass sie für Ihre Benutzer reibungslos läuft.

Beginnen wir also mit den primären Techniken zur einfachen Leistungsoptimierung von Winkelanwendungen.

Tipps zur Optimierung der Winkelleistung

Es gibt verschiedene Tipps, mit denen Sie die Leistung Ihrer Winkel-App ganz einfach verbessern können. Wir haben jedoch die sechs besten Tipps zur Optimierung von Winkel-Apps für Sie ausgewählt. Hier sind sie:

  • Verwendung der AoT-Kompilierung
  • Verwenden der OnPush-Änderungserkennungsstrategie
  • Verwenden Sie reine Rohre
  • Verwenden von TrackBy auf ngFor
  • Code-Splitting
  • Verbesserung der Seitenlast

Lassen Sie uns über jeden von ihnen im Detail lernen.

Verwendung der AoT-Kompilierung

Ein wichtiger Tipp zur Verbesserung der Leistung Ihrer Angular-Anwendung ist die Verwendung der Ahead-of-Time (AoT)-Kompilierung. AoT ist eine Technik, die Ihre Angular-Komponenten und -Vorlagen zur Build-Zeit vorkompiliert, anstatt sie zur Laufzeit zu kompilieren. Dies kann die Ladezeit Ihrer Anwendung erheblich verbessern, da der Browser beim ersten Laden der Anwendung keine Zeit mit dem Kompilieren der Vorlagen und Komponenten verbringen muss.

AoT hilft auch dabei, die Größe Ihrer Anwendung zu reduzieren, indem die Vorlagen und Komponentenfabriken in den JavaScript-Code integriert werden. Dies reduziert die Anzahl der zum Laden der Anwendung erforderlichen Netzwerkanforderungen und reduziert die Gesamtgröße der Anwendung, wodurch die Ladezeit verbessert werden kann.

Um die AoT-Kompilierung in Ihrer Angular-Anwendung zu aktivieren, müssen Sie die Angular-CLI verwenden, um Ihre Anwendung mit dem „–aot“-Flag zu erstellen. Dadurch wird die AoT-Kompilierung für Ihre Anwendung aktiviert und der resultierende Build wird für die Leistung optimiert. Darüber hinaus können Sie Tools wie den „ngc“-Compiler direkt verwenden, das ist das Befehlszeilentool, das Angular CLI für die AoT-Kompilierung verwendet.

Verwenden Sie die OnPush-Änderungserkennungsstrategie

Die OnPush-Änderungserkennungsstrategie ist eine Möglichkeit, die Leistung einer Angular-Anwendung zu verbessern, indem nur nach Änderungen in einer Komponente gesucht wird, wenn sich eine Eingabeeigenschaft ändert oder ein Ereignis ausgegeben wird. Dies steht im Gegensatz zur standardmäßigen „OnPush“-Strategie, die jedes Mal, wenn es einen Änderungserkennungszyklus gibt, nach Änderungen in einer Komponente und allen ihren untergeordneten Komponenten sucht.

Um die OnPush-Strategie zu verwenden, müssen Sie das ChangeDetectorRef-Modul importieren und die changeDetection-Eigenschaft des @Component-Dekorators Ihrer Komponente auf ChangeDetectionStrategy.OnPush setzen.

OnPush ist eine leistungsstarke Strategie, die die Leistung Ihrer Anwendung verbessern, sie aber auch komplexer machen kann. Stellen Sie sicher, dass Sie Ihre Anwendung gründlich testen, nachdem Sie diese Strategie implementiert haben, um sicherzustellen, dass sie wie erwartet funktioniert.

Verwenden Sie reine Rohre

Eine reine Pipe in Angular ist eine Pipe, die nur ausgeführt wird, wenn sich der Eingabewert oder die an die Pipe übergebenen Parameter ändern. Dies kann die Leistung einer Angular-Anwendung verbessern, da es die Anzahl der Ausführungsvorgänge einer Pipe verringert.

Um eine reine Pipe in Angular zu erstellen, müssen Sie die Eigenschaft pure: true zum @Pipe-Dekorator Ihrer Pipe hinzufügen.

Es ist wichtig zu beachten, dass Angular beim Erstellen einer reinen Pipe die Pipe nur dann erneut ausführt, wenn sich der Eingabewert oder die an die Pipe übergebenen Parameter ändern. Wenn die Pipe auf andere Daten oder Zustände angewiesen ist, die nicht als Eingabe übergeben werden, erzeugt die Pipe möglicherweise nicht die richtige Ausgabe.

Es ist auch erwähnenswert, dass, wenn Sie eine reine Pipe in einer Komponente haben, die die OnPush-Änderungserkennungsstrategie verwendet, die Pipe nur ausgeführt wird, wenn eine Eingabe oder ein Ereignis ausgegeben wird, was die Leistung Ihrer Anwendung weiter steigern kann.

Denken Sie daran, dass sich die Verwendung einer reinen Pipe mit einer komplexen Funktion negativ auf die Leistung Ihrer Anwendung auswirken kann, da die Pipe nicht ausgeführt wird, bis sich der Eingabewert ändert. In solchen Fällen ist es besser, unreine Rohre zu verwenden.

Verwenden von TrackBy auf ngFor

trackBy ist eine Funktion in Angular, mit der Sie eine eindeutige Kennung für jedes Element in einer ngFor-Schleife angeben können. Dies kann die Leistung einer Angular-Anwendung verbessern, indem die Anzahl der DOM-Elemente reduziert wird, die erstellt und gelöscht werden müssen, wenn sich die Sammlung ändert.

Um trackBy in einer ngFor-Schleife zu verwenden, müssen Sie eine Funktion als Wert des trackBy-Attributs übergeben. Die Funktion sollte den Index des aktuellen Elements und das Element selbst aufnehmen und einen eindeutigen Bezeichner für dieses Element zurückgeben.

<div *ngFor=“Item of Items lassen; trackBy: trackByFn”>{{ item.name }}</div>

trackByFn(index: number, item: any) {

return item.id;

}

In diesem Beispiel gibt die trackByFn-Funktion die eindeutige Kennung jedes Elements als seine id-Eigenschaft zurück.

Code-Splitting

Code-Splitting ist eine Technik, die verwendet wird, um die Leistung von Angular-Anwendungen zu verbessern, indem die anfängliche Ladezeit der Anwendung verkürzt wird. Dabei wird der Code der Anwendung in kleinere, besser handhabbare Teile zerlegt, die bei Bedarf geladen werden können, während der Benutzer durch die Anwendung navigiert.

Dadurch kann die Anwendung nur den Code laden, der für die aktuelle Seite benötigt wird, anstatt den gesamten Code auf einmal zu laden, was die anfängliche Ladezeit der Anwendung erheblich verbessern kann. Diese Technik kann mit dem Angular Router-Modul und der Eigenschaft loadChildren implementiert werden.

Verbesserung der Seitenlast

Es gibt mehrere Möglichkeiten, die Seitenlast einer Angular-Anwendung zu verbessern, darunter einige:

  1. Code-Splitting: Wie bereits erwähnt, ist Code-Splitting eine Technik, bei der der Code der Anwendung in kleinere Teile aufgeteilt wird, die bei Bedarf geladen werden können. Dies kann die anfängliche Ladezeit der Anwendung erheblich verbessern.
  2. Lazy Loading: Lazy Loading ist eine Technik, bei der Module nur dann geladen werden, wenn sie benötigt werden. Dies kann auch dazu beitragen, die anfängliche Ladezeit der Anwendung zu verbessern, indem die Codemenge reduziert wird, die beim anfänglichen Laden geladen werden muss.
  3. Optimieren von Bildern: Das Optimieren von Bildern durch Komprimieren und Verwenden des geeigneten Bildformats kann auch dazu beitragen, die Seitenlast zu verbessern, indem die Größe der Bilder reduziert wird, die heruntergeladen werden müssen.
  4. Verwendung von Browser-Caching: Das Aktivieren von Browser-Caching kann auch dazu beitragen, die Seitenlast zu verbessern, indem es dem Browser ermöglicht wird, Ressourcen lokal zu speichern, sodass sie nicht erneut heruntergeladen werden müssen.

Letzte Worte

Zusammenfassend lässt sich sagen, dass Angular ein leistungsstarkes und vielseitiges Framework ist, mit dem komplexe, leistungsstarke Webanwendungen erstellt werden können. Wie bei jedem Framework gibt es jedoch bestimmte Best Practices und Techniken, die verwendet werden können, um die Leistung einer Angular-Anwendung zu optimieren. Durch den Einsatz von Techniken wie Code-Splitting, Lazy Loading usw. können Entwickler die Ladezeit und die Gesamtleistung ihrer Angular-Anwendungen erheblich verbessern.

Smarsh Infotech, ein beliebtes Outsourcing-Unternehmen für IT-Dienstleistungen, kann Ihr zukünftiger Partner für die Anwendungsentwicklung sein. Wenn Sie planen, Ihr Geschäft auf digitalen Plattformen aufzubauen, können wir Ihnen auf jede erdenkliche Weise helfen. Lassen Sie uns in Kontakt treten und Ihre Projektideen besprechen.

Lesen Sie auch: Das neue Angular 14: Lesen Sie alles darüber