Angular-Leistungsoptimierung: Komponenten von Drittanbietern und Lazy-Loading-Technologie

Überblick

Viele Leute haben sich sicherlich über die Leistungsprobleme von Angular-Anwendungen beschwert. Tatsächlich können Sie beim Erstellen eines Angular-Projekts die Projektleistung effektiv verbessern, indem Sie Verpackung, Lazy Loading, Änderungserkennungsstrategien und Caching-Technologie verwenden und Komponenten von Drittanbietern unterstützen.

Um Entwicklern dabei zu helfen, Angular gründlich zu verstehen und zu verwenden, wird in diesem Artikel am Beispiel der Online-Tabellenbearbeitung gezeigt, wie mithilfe der Lazy-Loading-Technologie die Funktionen des Online-Imports und -Exports von Excel und der Online-Datenberichterstattung in einem Angular-basierten Framework implementiert werden können.

Umgebungsvorbereitung

1. Installieren Sie Angular CLI global: npm install -g @angular/cli

2. Erstellen Sie ein neues Projekt mit Angular CLI: ng new spread-sheets-angular-cli

3. Laden Sie das SpreadJS Npm-Paket herunter: npm install @grapecity/spread-sheets; npm install @grapecity/spread-sheets-angular

4. Konfigurieren Sie SpreadJS CS in angular.json

5. Verwenden von SpreadJS in Angular-Anwendungen

6. Erstellen und Ausführen des Projekts mit Angular CLI

Nachdem Sie die oben beschriebene Umgebungseinrichtung abgeschlossen haben, können Sie die Tabelleneditor-Komponente in das Angular-Projekt integrieren, um Funktionen wie den Online-Import und -Export von Excel und die Online-Datenberichterstattung zu realisieren.

Bevor wir mit der Optimierung beginnen, analysieren wir, welche Faktoren die Leistung des Projekts beeinflussen.

Faktoren, die die Projektleistung beeinflussen

Nach der Integration der SpreadJS-Tabellenkomponente entspricht die Geschwindigkeit der Formeldatenverarbeitung des Projekts den Erwartungen und die Seite läuft reibungsloser. Nach der Veröffentlichung ist die Ladezeit beim Öffnen der Seite durch Benutzer jedoch länger als in der Entwicklungsumgebung, was zu einer schlechten Benutzererfahrung führt. Nach einer Untersuchung habe ich festgestellt, dass NgModule im Standardzustand von Angular eifrig geladen wird, was bedeutet, dass es so schnell wie möglich geladen wird, wenn die Anwendung geladen wird. Alle Module werden auf einmal geladen, unabhängig davon, ob sie sofort verwendet werden sollen oder nicht.

Daher wird für große Anwendungen mit mehreren Routen die Verwendung von Lazy Loading empfohlen – NgModule-Laden bei Bedarf. Durch Lazy Loading kann die Größe des ursprünglichen Pakets verringert und dadurch die Ladezeit verkürzt werden.

Was ist Lazy Loading?

Bei Webanwendungen liegt der Engpass des Systems häufig in seiner Reaktionsgeschwindigkeit. Wenn das System zu langsam reagiert, beschweren sich die Benutzer und der Wert des Systems sinkt erheblich. Beim Lazy Loading werden die erforderlichen Module beim ersten Laden geladen, während andere Module, die vorübergehend nicht benötigt werden, nicht geladen werden. Wenn ein Benutzer beispielsweise in einem Einkaufszentrumsystem die Homepage öffnet, müssen nur die Produkte angezeigt werden und das Zahlungsmodul wird zu diesem Zeitpunkt nicht benötigt. Daher kann das Zahlungsmodul die Lazy-Loading-Technologie verwenden.

Projektoptimierung

1. Geschäftsmodule aufteilen

Um Angular-Module verzögert zu laden, müssen Sie in der AppRoutingModule-Routenkonfiguration „loadchildren“ anstelle von „component“ verwenden.

Fügen Sie im Routing-Modul des Lazy-Load-Moduls eine Route hinzu, die auf diese Komponente verweist. Diese Demo hat zwei verzögert geladene Module.

2. Erstellen Sie die Navigations-Benutzeroberfläche

Obwohl Sie die URL direkt in die Adressleiste eingeben können, wäre eine Navigations-Benutzeroberfläche praktischer. Die drei A-Tags stellen die Homepage und zwei Module dar, die verzögert geladen werden müssen.

3. Import- und Routing-Konfiguration

Die CLI fügt jedes Funktionsmodul automatisch zur Routenkarte auf Anwendungsebene hinzu und schließt den Vorgang mit dem Hinzufügen einer Standardroute ab.

4. Im Feature-Modul

Schauen wir uns die Datei lazy-webexcel.module.ts an und importieren wir die Dateien lazy-webexcel-routing.module.ts und lazy-webexcel.component.ts. Das Import-Array von @NgModule listet LazyWebExcelRoutingModule auf und erteilt LazyWebExcelModule Zugriff auf sein eigenes Routing-Modul. Darüber hinaus gehört LazyWebExcelComponent zu LazyWebExcelModule.

Setzen Sie den Pfad auf leer, da der Pfad im AppRoutingModule festgelegt wurde und sich diese Route im LazyWebExcelRoutingModule bereits im LazyWebExcel-Kontext befindet. Die Konfiguration der anderen Module ist ähnlich, daher werde ich nicht ins Detail gehen.

5. Stellen Sie sicher, dass es ordnungsgemäß funktioniert

Wir können über die Registerkarte „Netzwerkseite“ der Entwicklertools von Chrome bestätigen, ob diese Module verzögert geladen werden. Klicken Sie auf „Designer Component LazyLoad“. Die in der folgenden Abbildung dargestellte Datei wird angezeigt. Sie zeigt damit an, dass sie bereit ist und das Feature-Modul erfolgreich verzögert geladen wurde.

Zusammenfassen

Nach der Optimierung kann die Ladezeit des ersten Bildschirms effektiv reduziert werden. Lassen Sie uns außerdem über forRoot und forChild sprechen. Die CLI fügt RouterModule.forRoot(routes) zum Import-Array von AppRoutingModule hinzu. Dadurch erkennt Angular, dass AppRoutingModule ein Routingmodul ist, und forRoot() zeigt an, dass dies das Stamm-Routingmodul ist. Es konfiguriert alle eingehenden Routen, gibt Ihnen Zugriff auf Router-Direktiven und registriert den Router.

Die CLI fügt außerdem RouterModule.forChild(routes) zu jedem Feature-Modul hinzu. Auf diese Weise erkennt Angular, dass diese Routenliste nur für die Bereitstellung zusätzlicher Routen zuständig ist und als Feature-Modul verwendet werden soll. Sie können forChild() in mehreren Modulen verwenden.

Das Obige ist der Hauptprozess der Kombination von SpreadJS mit dem Angular-Framework und der Optimierung von Online-Excel-Projekten mithilfe der Lazy-Loading-Technologie. Neben Lazy Loading bietet Angular auch viele Methoden zur Leistungsoptimierung, wie z. B. Browser-Caching-Strategie, RxJS, Tree Shaking, AoT-Kompilierung usw. Der richtige Einsatz dieser Technologien kann die Leistung Ihres Projekts verbessern und den Benutzern ein besseres Benutzererlebnis bieten.

Oben finden Sie Details zu Komponenten von Drittanbietern und zur Lazy-Loading-Technologie zur Leistungsoptimierung von Angular. Weitere Informationen zur Leistungsoptimierung von Angular finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!