Vue verbessert die Seitenantwortgeschwindigkeit durch Lazy Loading

Überblick

Ziel des Projektes ist die Analyse der Betriebsdaten des Unternehmens mittels Pivot-Tabellen und Excel-Formeln. Nach der Integration läuft die Seite jedoch reibungslos in der Entwicklungsumgebung und große Datenmengen werden schnell geladen und verarbeitet. Nach der Veröffentlichung verkürzt sich die Ladezeit jedoch jedes Mal, wenn der Benutzer die Seite öffnet, im Vergleich zur Entwicklungsphase. Nach einer Untersuchung stellte sich heraus, dass die langsamere Geschwindigkeit durch die Vergrößerung von vendor.js im Release-Paket verursacht wird. Das Laden dieser Datei dauert jedes Mal etwa 300 Millisekunden. Da das kleine Vue-Projekt keine Modulaufteilung hat, wird der gesamte Code direkt in den Vendor gepackt. Nach der Integration der neuen Funktionen wird auch das Release-Paket größer.

Nachdem wir nun die Ursache gefunden haben, beginnen wir mit der Optimierung. Wenn das Frontend große Ressourcen laden muss, wird im Allgemeinen Lazy Loading verwendet, um die Effizienz zu optimieren.

Was ist Lazy Loading?

Lazy Loading wird auch als verzögertes Laden bezeichnet. Wenn eine Webseite antwortet, werden Ressourcen nicht sofort angefordert. Ressourcen werden geladen, wenn die Seite geladen wird oder wenn bei Bedarf darauf geantwortet wird, um die Seitenantwortgeschwindigkeit zu verbessern und Serverressourcen zu sparen. Das am häufigsten verwendete Lazy Loading bei Webseiten ist das Lazy Loading von Bildern. Wenn Sie bei Seiten mit mehreren Bildern wie Taobao warten, bis alle Bilder heruntergeladen sind, bevor Sie auf die Anfrage antworten, führt dies nicht unbedingt zu Ladestaus. Dasselbe gilt für das Laden von JS-Ressourcen. Das Laden großer JS-Ressourcen führt zu einer Blockierung von JS, die Seite reagiert nicht mehr und erscheint in einem pseudo-toten Zustand. Daher kann die Ladegeschwindigkeit des ersten Bildschirms der Seite durch Laden bei Bedarf verbessert werden.

Nachdem wir die einzelnen Optimierungsschritte zusammengefasst haben, können wir mit der Optimierung beginnen!

Beginnen Sie mit der Optimierung

Erstens die Projektumgebung: Vue 2.6

Entwicklungsumgebung: Vue-cli 4.5 + TypeScript 3.9

Geschäftsmodule aufteilen

Durch asynchrones Laden von Modulen über Routing kann die Ladegeschwindigkeit des ersten Bildschirms und anderer Seiten beschleunigt werden. Das WebExcel-Modul ist im Vue Router als Lazy-Loading-Modus konfiguriert. Nach der Konfiguration wird die WebExcel-Komponente gemäß dem angegebenen WebpackChunkName in eine separate Datei gepackt und nur geladen, wenn auf die WebExcel-Route zugegriffen wird. Auf diese Weise werden beim Zugriff auf die Start- und Infoseiten keine WebExcel-Ressourcen geladen.

Konfiguration der Lazy-Loading-Route

Die Zugriffsseiten werden verpackt und freigegeben, der erste Bildschirm öffnet sich in Sekunden, und auch der direkte Zugriff auf „Info“ öffnet sich in Sekunden. Allerdings wurde bei der Überprüfung der Netzwerkanforderungen festgestellt, dass beim Aufruf der Homepage Info- und Web-Excel-Ressourcen angefordert wurden. Nach einer Untersuchung stellte sich heraus, dass vue-cli die Vorlademechanismen „Preload“ und „Prefetch“ auf der Seite verwendete, wodurch die für nachfolgende Seiten erforderlichen Ressourcen vorgeladen wurden, ohne das Laden der aktuellen Seite zu beeinträchtigen, um das Benutzererlebnis zu verbessern. Hier sind die Prefetch-Ressourcen zur klaren Demonstration auskommentiert.

(Prefetch-Vorladen vorübergehend deaktivieren)

Nach dem Aktivieren des Lazy Loading von Routen werden „Info“ und „WebExcel“ auf der Startseite nicht geladen.

(Heimnetzwerkanfrage)

Löschen Sie den Netzwerkanforderungsdatensatz, klicken Sie auf Web Excel und rufen Sie die WebExcel-Seite auf. Zu diesem Zeitpunkt wird die WebExcel-Ressource angefordert und die Komponente angezeigt.

(Netzwerkanforderung für die WebExcel-Seite)

Lazy Loading von Online-Excel-Komponenten

Optimieren Sie die Geschwindigkeit beim Öffnen von Seiten mithilfe von Plugins weiter

Optimiertes Routenladen. Um die Benutzererfahrung zu verbessern, wurde die WebExcel-Seite weiter optimiert, das verzögerte Laden von Komponenten aktiviert und die Designer-Komponente nur bei Bedarf geladen.

Die Aktivierung asynchroner Komponenten erfolgt ähnlich wie beim Routing. Sie können die Importkomponente direkt konfigurieren, um den ursprünglichen statischen Import zu ersetzen.

(Lazy Loading der Komponente)

Hier verwenden wir die AsyncComponent-Konfiguration in einem Schritt, sodass der Benutzer beim Laden der Komponente benachrichtigt werden kann.

(Seitenvorlage)

(Asynchrones verzögertes Laden von Komponenten)

Die Eigenschaft displayDesigner wird auf der Seite verwendet, um zu steuern, ob die Designer-Komponente angezeigt wird. Nach einem setTimeout von 3 Sekunden wird die Designer-Komponente geladen und angezeigt. LoadingComponent zeigt den Ladezustand während des Ladens an.

Aus der Netzwerkanforderung ist ersichtlich, dass webExcel 3 Sekunden nach dem Laden beginnt, Designerressourcen anzufordern. Während der Anforderung wird LoadingComponent angezeigt, und die Designerkomponente wird nach Abschluss der Anforderung angezeigt.

Aktivieren Sie die GZIP-Komprimierung, um Ressourcenanforderungen zu beschleunigen

Um Ressourcenanforderungen noch weiter zu beschleunigen, können Sie die GIZP-Komprimierung des Servers aktivieren. Derzeit unterstützen die meisten Browser GZIP. Sie können die GZIP-Funktion des Servers aktivieren, damit der Server die Ressourcen vor der Übertragung komprimiert.

Der folgende Inhalt wird in der Netzwerkanforderung Request angezeigt und zeigt an, dass gzip unterstützt wird

Akzeptierte Kodierung: gzip, deflate, br

Vue-cli kann die Ressourcen beim Verpacken vorab mit gzip packen, sodass der Server die gepackten Ressourcen direkt zurückgibt, ohne dass sie erneut gepackt werden müssen. Mithilfe des Plug-Ins „compression-webpack-plugin“ können Sie beim Bündeln direkt gz-komprimierte Dateien generieren. Die Konfiguration von gzip kann entsprechend der spezifischen Bereitstellungssituation festgelegt werden.

Zusammenfassen

Nach der obigen Optimierung sind für die Laderessourcen des ersten Bildschirms nur noch die Vue-Basiskomponenten und Homepage-Komponenten erforderlich, und die Ladegeschwindigkeit des ersten Bildschirms kehrt auf die ursprünglichen 200 Millisekunden zurück. Andere Seiten, die die Designer-Komponente nicht verwenden, müssen keine Ressourcen laden. Gleichzeitig wird die Designer-Komponente einmal geladen und andere nachfolgende Seiten, die die Komponente verwenden, müssen sie nicht erneut laden

Oben sind einige Konfigurationen zum Vue-Routing und Lazy Loading von Komponenten aufgeführt, aber Lazy Loading ist kein Allheilmittel. Sie müssen immer noch anhand der tatsächlichen Anforderungen entscheiden, ob Sie es verwenden möchten.

Oben finden Sie Einzelheiten dazu, wie Vue die Seitenantwortgeschwindigkeit durch Lazy Loading verbessert. Weitere Informationen dazu, wie Vue Lazy Loading die Antwortgeschwindigkeit verbessert, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!