Eine kurze Diskussion darüber, wie Angular Komponenten von Drittanbietern und Lazy-Loading-Technologie nutzt, um die Leistung zu optimieren

Verwandte Empfehlungen: „Angular Tutorial“

Es muss viele Leute geben, die sich über die Leistungsprobleme von Angular-Anwendungen beschwert haben. Tatsächlich kann beim Erstellen eines Angular-Projekts die Projektleistung durch die Verwendung von Paketierung, Lazy Loading, Änderungserkennungsstrategien und Caching-Technologie sowie die anschließende Unterstützung von Komponenten von Drittanbietern effektiv verbessert werden.

Um Entwicklern dabei zu helfen, Angular besser zu verstehen und zu verwenden, wird in diesem Artikel das typischste Geschäftsszenario unserer Kunden – die Online-Tabellenbearbeitung – als Beispiel genommen, um zu demonstrieren, wie man mithilfe der Lazy-Loading-Technologie den Online-Import und -Export von Excel in einem implementiert Angular-basiertes Framework und die Funktion, Daten online einzugeben.

Umgebungsvorbereitung

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

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

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

• SpreadJS CS in angle.json konfigurieren

• SpreadJS in Angular-Anwendung verwenden

• Angular-CLI-Build verwenden und Projekt ausführen

Nach Abschluss der oben genannten Umgebungskonstruktion kann die Tabelleneditorkomponente in das Angular-Projekt integriert werden, um Funktionen wie den Online-Import und -Export von Excel und die Online-Datenberichterstattung zu realisieren.

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

Faktoren, die die Projektleistung beeinflussen

Nach der Integration der SpreadJS-Tabellenkomponente entspricht die Verarbeitungsgeschwindigkeit der Formeldaten des Projekts den Erwartungen und die Seite läuft relativ reibungslos. Nach der Veröffentlichung ist die Ladezeit für Benutzer zum Öffnen der Seite jedoch länger als in der Entwicklungsumgebung, was zu einer schlechten Benutzererfahrung führt. Nach einer Untersuchung wurde festgestellt, dass NgModules in Angular standardmäßig akut geladen werden, das heißt, sie werden geladen, sobald die Anwendung geladen wird. Alle Module werden gemeinsam geladen, unabhängig davon, ob sie zur sofortigen Verwendung bestimmt sind oder nicht.

Daher wird für große Anwendungen mit mehreren Routen empfohlen, den NgModule-Modus „Lazy Loading-on-Demand“ zu verwenden. Lazy Loading reduziert die Größe des anfänglichen Pakets und verkürzt dadurch die Ladezeiten.

Was ist Lazy Loading?

Bei Webanwendungen ist der Flaschenhals des Systems oft die Reaktionsgeschwindigkeit des Systems. Wenn die Reaktionsgeschwindigkeit des Systems zu langsam ist, beschweren sich Benutzer und der Wert des Systems wird erheblich verringert. Beim verzögerten Laden werden die erforderlichen Module beim ersten Laden geladen, während andere Module, die vorübergehend nicht verwendet werden, nicht geladen werden. Wenn Benutzer beispielsweise in einem Einkaufszentrum die Startseite öffnen, müssen sie nur die Produkte anzeigen. Zu diesem Zeitpunkt ist das Zahlungsmodul nicht erforderlich, sodass das Zahlungsmodul die Lazy-Loading-Technologie verwenden kann.

Projektoptimierung

1. Geschäftsmodule aufteilen

Um das Angular-Modul langsam zu laden, müssen Sie in AppRoutingModule-Routen für die Konfiguration Loadchildren anstelle von Component verwenden.

Fügen Sie im Routing-Modul des Lazy-Loading-Moduls eine Route hinzu, die auf die Komponente zeigt. Diese Demo verfügt über zwei Lazy-Loading-Module.

2. Erstellen Sie eine Navigations-Benutzeroberfläche

Obwohl Sie die URL direkt in die Adressleiste eingeben können, ist es nützlicher, eine Navigations-Benutzeroberfläche zu haben. Die drei a-Tags repräsentieren jeweils die Homepage und zwei Module, die langsam geladen werden müssen.

3. Import- und Routing-Konfiguration

CLI fügt automatisch jedes Funktionsmodul zur Routing-Zuordnungstabelle auf Anwendungsebene hinzu und vervollständigt es schließlich durch Hinzufügen einer Standardroute.

4. Im Funktionsmodul

Werfen wir einen Blick auf die Datei lazy-webexcel.module.ts und importieren Sie die Datei lazy-webexcel-routing.module.ts und lazy-webexcel.component .ts-Dateien. Das Import-Array von @NgModule listet LazyWebExcelRoutingModule auf, sodass LazyWebExcelModule auf sein eigenes Routing-Modul zugreifen kann. Darüber hinaus gehört LazyWebExcelComponent zu LazyWebExcelModule.

Pfad auf leer setzen, da der Pfad in AppRoutingModule bereits festgelegt wurde und diese Route in LazyWebExcelRoutingModule bereits im Kontext von lazywebexcel steht. Die andere Modulkonfiguration ist ähnlich, daher werde ich nicht auf Details eingehen.

5. Bestätigen Sie, dass es ordnungsgemäß funktioniert

Wir können über die Registerkarte „Netzwerk“ der Chrome-Entwicklertools bestätigen, ob diese Module verzögert geladen werden. Klicken Sie auf Designer Component LazyLoad. Die Datei im Bild unten wird angezeigt. Dies zeigt an, dass sie bereit ist und das Funktionsmodul träge geladen wurde.

Zusammenfassung

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 Importarray von AppRoutingModule hinzu. Dadurch weiß Angular, dass AppRoutingModule ein Routing-Modul ist, und forRoot() gibt an, dass es sich um das Root-Routing-Modul handelt. Es konfiguriert alle eingehenden Routen, gibt Ihnen Zugriff auf Router-Anweisungen und registriert den Router.

CLI fügt außerdem RouterModule.forChild(routes) zu jedem Funktionsmodul hinzu. Auf diese Weise weiß Angular, dass diese Routenliste nur für die Bereitstellung zusätzlicher Routen verantwortlich ist und als Funktionsmodul konzipiert ist. Sie können forChild() in mehreren Modulen verwenden.

Das Obige ist der Hauptprozess der Kombination von SpreadJS mit dem Angular-Framework und der Verwendung der Lazy-Loading-Technologie zur Optimierung von Online-Excel-Projekten. Neben Lazy Loading bietet Angular auch viele Methoden zur Leistungsoptimierung, wie Browser-Caching-Strategien, RxJS, Tree Shaking, die Verwendung der AoT-Kompilierung usw. Durch die sinnvolle Nutzung dieser Technologien können Sie die Leistung Ihres Projekts verbessern und den Benutzern eine bessere Nutzung ermöglichen . Erfahrung.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie Angular Komponenten von Drittanbietern und Lazy-Loading-Technologie nutzt, um die Leistung zu optimieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!