Analyse und Lösung zur Leistungsoptimierung von Vue.js-Anwendungen

Vorwort:

Nehmen wir an, wir arbeiten wirklich hart an der Entwicklung einer vollständigen Vue.js-Anwendung. Die Leistung stand jedoch nicht im Vordergrund: Derzeit dauert das Laden, Navigieren, Senden oder Ausführen einer Benutzeraktion unserer App eine Weile. Sollten wir davon ausgehen, dass Benutzer diese verzögerte Erfahrung wünschen, oder möchten sie lieber länger bei der Vue js-Anwendung bleiben?

Leider lautet die Antwort nein. Statistiken zufolge ist es erwiesen, dass 53 % der Benutzer keine Zeit mit Apps verbringen, deren Laden länger als 3 Sekunden dauert. Durch das Erstellen von Anwendungen mit optimierter Leistung wird das Benutzererlebnis verbessert und die Benutzerinteraktion schrittweise erhöht.

Leider sind sich die meisten Entwickler der Bedeutung der Leistung nicht bewusst und erstellen am Ende umfangreiche Anwendungen mit Leistungsproblemen. Ich nehme an, Sie möchten nicht einer dieser Entwickler sein. Das Entwickeln von Anwendungen ist eine Herausforderung, aber das Entwickeln von Anwendungen mit optimierter Leistung ist eine noch größere Herausforderung. Um Ihnen diese Aufgabe zu erleichtern, habe ich diesen Blog zur Leistungsoptimierung von Vue.js erstellt, der Ihnen dabei hilft zu verstehen, wie Sie die Struktur Ihrer Vue.js -Anwendung optimieren und die Vue.js-Leistung verwalten können.

1. Einleitung

VueJS ist das beliebteste und stabilste JavaScript Framework für die Entwicklung von Websites. Wie bei jedem anderen Framework gilt jedoch auch hier: Wenn Sie es vernachlässigen, leidet die Leistung.

Wenn Sie todsichere Tipps zur Leistungsoptimierung von Vue.js suchen oder einfach nur die Best Practices für Vue für Ihre groß angelegten Anwendungen kennenlernen möchten, sind Sie bei dem richtigen Blog gelandet. Lassen Sie uns, ohne zu sehr ins Detail zu gehen, ausführlich besprechen, wie Sie die Leistung Ihrer Vue js-Anwendung optimieren können.

Es ist wichtig, zunächst die Anwendungsarchitektur von Vue js zu verstehen. Wenn wir verstehen, wie wichtig es ist, können wir erkennen, und wir werden beginnen, es ernster zu nehmen. Sehen wir uns also an, warum Sie Ihre Großanwendungen optimieren müssen. Denken Sie daran, dass die Optimierung jeder Anwendung wichtig ist. In diesem Blog geht es jedoch vorrangig um die Leistungsoptimierung von Vue.

2. Warum brauchen wir eine Leistungsoptimierung für Vue JS?

Kein Programmierer möchte – auch nach dem Codieren von Tausenden von Zeilen –, dass Benutzer aufgrund der für die Ausführung von Benutzeraktionen benötigten Zeit keine Zeit mit der Anwendung verbringen möchten.

Produktbesitzer auf der ganzen Welt entwickeln Produkte für Benutzer, deren Hauptanliegen eine reibungslose Interaktion ist. Wenn Programmierer mit der Leistung, Geschwindigkeit und Effizienz von Vue js nicht zufrieden sind, hat dies nichts damit zu tun, wie viel Aufwand der Endbenutzer in die Vue JS-Anwendungsarchitektur investiert hat.

Aus diesem Grund ist es zu einem verbindlichen Standard geworden, die Leistung zu optimieren und so letztendlich die Anforderungen des Endbenutzers zu erfüllen.

3. Die Hauptgründe für die schlechte Leistung von Vue

Sehen wir uns an, wie Vue js funktioniert und welche wichtigen Gründe für die schlechte Leistung von Vue js vorliegen.

Die Gründe für die Verlangsamung der Vue-Leistung hängen von der Struktur Ihrer Vue js-Anwendung ab.

Beispiel: Einer der wichtigen Gründe für die schlechte Leistung einer Vue jS Single Page Application (SAS) kann ein anderer sein als bei einem VueJS-Projekt, das serverseitiges Rendering (SSR) verarbeitet.

Der Hauptgrund, warum jeder Entwickler entscheiden kann, ob es sich bei einer Anwendung um eine SPA handelt oder ob sie über SSR verfügt, ist die Bundle-Größe. Je größer die Bündelgröße, desto langsamer die Leistung von Vue js. Daher können wir den Schluss ziehen, dass die Bündelgröße umgekehrt proportional zur Anwendungsleistung ist.

Einige häufige Gründe für große Vue js-Anwendungen -

• Unsinnige Verwendung von Bibliotheken von Drittanbietern
• Ignorieren Sie Code-Splitting und Lazy Loading
• Unnötige Treffer bei API-Anfragen
• JS- und CSS-Dateien werden nicht richtig erstellt
  

Bevor wir besprechen, wie die Bundle-Größe reduziert werden kann, sehen wir uns an, wie die Bundle-Größe von Vue js und Vue js-Unternehmensanwendungen überprüft wird.

Wie überprüfen Sie die Größe Ihrer VueJS-App?
Ich zeige Ihnen zwei Möglichkeiten, die Größe Ihrer Vue js-Anwendung zu überprüfen.

1. Bericht erstellen

Erstellen Sie einen Bericht, der die Größen der verschiedenen verwendeten Pakete visuell darstellt. Darüber hinaus erfahren Sie, wie Sie Pakete ersetzen, die mehr Platz beanspruchen als erwartet. Mit dem Befehl „Bericht erstellen“ können Sie einen Anwendungsbericht erstellen. Beachten Sie, dass dieser Befehl einen Bericht für eine Anwendung erstellt, auf der webpack-bundle-analyzer installiert ist.

Öffnen Sie nach dem Ausführen des obigen Befehls die Datei packages.json und fügen Sie diesen Inhalt hinzu

„Build-Bericht“: „vue-cli-service build --Bericht“

Dann führen Sie dies aus.

npm führt Build-Bericht aus

Nach der Ausführung all dessen wird im Ordner „dist“ eine Datei mit dem Namen „report.html“ erstellt.
Wenn Sie die Datei öffnen, sehen Sie Folgendes

Die Leistungsoptimierung von Vue.js-Anwendungen bietet Ihnen professionelle Analysen und Lösungen#yyds干货盘点# _vue

2. Führen Sie den Befehl aus und führen Sie npm run build aus

Wir werden ein Bild ähnlich diesem sehen:

Die Leistungsoptimierung von Vue.js-Anwendungen bietet Ihnen professionelle Analysen und Lösungen #yyds干货盘点# _vue_02

Nachdem die Bündelgröße ermittelt wurde, besteht die Herausforderung nun darin, sie zu reduzieren. Lassen Sie uns ohne weitere Diskussion damit fortfahren, Möglichkeiten zur Optimierung der Leistung Ihrer Vue.js-Anwendung zu erkunden.

4. Wie kann die Leistung der Vue js-Anwendung optimiert werden?

Hier sind einige VueJS-Leistungstipps, die Sie implementieren können, um die Leistung Ihrer Vue.js-Anwendung zu optimieren.

1. Lazy Loading in Vue js

Wie der Name schon sagt, ist Lazy Loading in Vue js eine Methode zum verzögerten Laden von Modulen in Ihrer Anwendung, d. h. dann, wenn der Benutzer das Modul tatsächlich benötigt. Normalerweise ist es nicht erforderlich, bei jedem Besuch Ihrer Website durch einen Benutzer alle Module Ihres JavaScript Pakets zu laden.

Einige Komponenten verfügen über Muster und Tooltips, die bei Bedarf geladen werden können. Wenn Sie mit zwei oder drei Modalfenstern oder Tooltips arbeiten, werden Sie die Ergebnisse nicht sehen. Angenommen Sie haben jedoch eine umfangreiche Vue-App mit sehr vielen Modalfenstern und Tooltips; das gleichzeitige Laden dieser Fenster und Tooltips wird die Leistung beeinträchtigen.

Es lohnt sich einfach nicht, bei jedem Laden der Seite das gesamte Paket zu laden. So können Sie die Bündel leichter aufteilen und bei Bedarf laden. Auf diese Weise wird Zeit gespart, da kein unnötiger Code heruntergeladen und analysiert wird.

So überprüfen Sie den tatsächlich auf Ihrer Website verwendeten JavaScript-Code

• Click devtools
• cmd + shift + p
• Type coverage
• Click record


Das Netz mit den roten Hervorhebungen wird nicht verwendet und kann verzögert geladen werden. Durch die Nutzung der Lazy Loading-Funktion können Sie Ihre Paketgröße um 60 % reduzieren.

Das ist alles dazu, was und warum wir Komponenten und Module in großem Maßstab verzögert laden sollten: Sehen wir uns an, wie das geht.

Wir können dynamische Webpack Importe anstelle von regulären Importen verwenden, um Module zu trennen, die verzögert geladen werden müssen.

So importieren Sie eine JavaScript-Datei, richtig?

// demo.js
const Demo = {
  testDemo: Funktion () {
    console.log("Das ist nur eine Demo!")
  }
}
Standard-Demo exportieren

// app.js
Demo aus „./demo.js“ importieren
Demo.testDemo()

Es fügt die Datei demo.js als node.js der Anwendung zu seinem Abhängigkeitsdiagramm hinzu und bündelt sie durch den Import auf diese Weise. Wenn das Paket geladen wird, wird demo.js dort geladen, wo es benötigt wird.

Was aber, wenn wir demo.js nur als Reaktion auf eine Benutzeraktion laden möchten? In diesem Fall implementieren wir dynamische Importe und weisen die Anwendung an, dieses Modul nur bei Bedarf herunterzuladen.

Nachfolgend finden Sie eine Änderung des obigen Codes, um einen dynamischen Import zum Testen der Vue.js-Anwendung durchzuführen.

// app.js
const getDemo = () => import('./demo.js')

// später, wenn einige Benutzeraktionsaufgaben als das Erreichen der Route erfolgen
getDemo()
  .then({ testDemo } => testDemo())

Sie können also feststellen, dass ich eine Funktion deklariert habe, die die Importfunktion zurückgibt, anstatt das Demomodul direkt zu importieren. Dies ist ein sogenannter dynamischer Import, sodass Webpack weiß, dass es dieses Modul in einer separaten Datei speichern muss. Die Funktion getDemo Demo（）， die dynamische Importe enthält, gibt ein Versprechen zurück. Wir schneiden grundsätzlich einen Knoten (hier gezeigt) aus dem Abhängigkeitsdiagramm aus und laden ihn dann bei Bedarf herunter (z. B. bei einer Routenänderung oder einem Klick). Beachten Sie, dass in der Demo importierte JS-Module auch vom Paket getrennt werden.

Lazy Loading in Vue js ist eine der Best Practices zum Reduzieren der Bundle-Größe und Optimieren der Leistung. Machen Sie es sich zur Gewohnheit, herauszufinden, welche Module Sie ohne eine explizite Benutzeraktion nicht benötigen, und laden Sie sie für eine bessere Leistung verzögert herunter.

2. Routenbasiertes Code-Splitting

Angenommen, Sie müssen eine kleine VueJS -Website mit zwei Webseiten entwickeln – Dashboard und Kontakt. Auch für diese beiden Seiten müssen Sie Vue-Router in Ihrem Projekt implementieren.

Die Routendatei könnte ungefähr so ​​aussehen:

// routing.js
Dashboard aus „./Dashboard.vue“ importieren
Kontakt aus „./Contact.vue“ importieren

const Routen = [
  { Pfad: '/', Komponente: Dashboard }
  { Pfad: '/Kontakt, Komponente: Kontakt }
]

Aufgrund dieses standardmäßigen Codierungsansatzes werden die Komponenten – Dashboard und Contact (mit lodash) – heruntergeladen, selbst wenn der Benutzer eine andere Seite besucht (wir möchten weder Dashboard noch Contact herunterladen). Dies liegt daran, dass wir zwei Routen im selben bundle haben. Sie denken vielleicht, das Herunterladen von zwei weiteren Seiten sei keine große Sache. Dies ist jedoch wichtig, wenn Sie an einer großen Anwendung mit einer großen Anzahl von Paketen arbeiten.

Um unnötige Komponentendownloads zu vermeiden, verwenden wir Code-Splitting.

Zu diesem Zweck verwenden wir unterschiedliche Pakete für unterschiedliche Pfade und folgen der Technik des dynamischen Imports.

Komponenten werden jetzt über dynamisches Routing statt direkt importiert. Sehen wir uns an, wie das erreicht werden kann.

// routing.js 
const Routen = [
  { Pfad: '/', Komponente: () => import('./Dashboard.vue') }
  { Pfad: '/Kontakt, Komponente: () => import('./Contact.vue') }
]

Wenn Sie dieses Verfahren befolgen, können Sie die Größe Ihres Bündels auf die Hälfte reduzieren! Dazu müssen Sie allerdings entscheiden, welche Komponenten für den dynamischen Import zur Verfügung stehen. Vertrauen Sie mir, solche vue js -Übungen werden dazu beitragen, die Leistung Ihrer Anwendung zu verbessern.

3.Vue js Komponenten vorladen

Lassen Sie uns weiter tiefer in die Vorladekomponente von Vue js eintauchen, eine Technik zum Herunterladen von Ressourcen, bevor der Benutzer die Seite anfordert. Wenn Sie beispielsweise feststellen, dass die meisten Benutzer Produktseiten von Kategorieseiten aus aufrufen, können Sie das Vorabladen von Produktseiten in Erwägung ziehen. Sie müssen bedenken, dass das Vorabrufen erst nach dem ersten Rendern erfolgen kann. Ein weiterer Vorteil des Prefetchings besteht darin, dass dadurch unerwünschte Folgen des Lazy Loadings ohne Leistungseinbußen vermieden werden können.

Für die Implementierung müssen Sie lediglich das Tag <link rel="pre-insert" href="url" /> hinzufügen. Ziemlich einfach, oder? Dies ist jedoch bei Webpack nicht der Fall, da hier die Bundle-Namen auf Grundlage der Reihenfolge der Module generiert werden. Glücklicherweise verfügen webpack Pakete über magic comments , die das Vorladen erleichtern. magic comments sind Kommentare, die den Build-Prozess beeinflussen. Wir müssen - /* webpackPrefetch: true */ verwenden, um Module vorab zu laden. Behalten Sie es einfach in Ihrem dynamischen Import, wie unten gezeigt

Komponenten:
  ModalView: () => import(/* webpackPrefetch: true */ './ModalView.vue')
}

Während der Ausführung des Codes sucht Webpack nach dem magischen Kommentar und fügt im Kopfbereich <link rel="pre-insert" url="resource-url" /> hinzu.

< link rel="prefetch" href="Pfad zum Block mit modaler Ansicht" rel="externes Nofollow" />

Wenn ein Benutzer ein ModalView -Modul anfordert, wird es vorab verarbeitet und ist sofort zugänglich.

4. Optimieren Sie Bibliotheken von Drittanbietern

Wenn Sie Ihre Bundle-Größe prüfen und überrascht sind, dass sie die ideale Zahl überschreitet, liegt das nicht immer an Ihrem Code: Oft ist die Ursache die Verwendung geladener Drittanbieterbibliotheken. Ja, wir alle verwenden Bibliotheken von Drittanbietern, ohne zu wissen, welche Auswirkungen sie auf die Leistung unserer Anwendung haben. Unser Code wird wahrscheinlich nur einen Bruchteil der Bundle-Größe ausmachen.

Sie können Bundlephobia verwenden, um zu verstehen, wie sich verschiedene Bibliotheken auf die Leistung auswirken. Sie müssen nur den Namen der Vuejs-Bibliothek zu dieser fantastischen Website hinzufügen und Sie erhalten eine Menge Informationen zu den Website-Daten. Ich habe beispielsweise die Bibliothek lodash verwendet und hier sind die Informationen.

Wäre es nicht toll, mehr über Bibliotheken und ihre Auswirkungen auf die Leistung zu erfahren?

Wenn Sie wissen möchten, welche VueJS-Bibliotheken einen größeren Einfluss auf Ihre VueJS-Anwendung haben, können Sie Ihre Pakete scannen, indem Sie hier klicken. Abgesehen davon habe ich verschiedene Möglichkeiten zur Analyse der Bündelgröße identifiziert.

Stellen Sie sich folgende Fragen, bevor Sie sich für eine Bibliothek entscheiden:

• Warum sollte ich eine Bibliothek verwenden?
• Benötige ich die gesamte Bibliothek, um mein Ziel zu erreichen?
• Welchen Einfluss hat meine Wahl der Bibliothek?
• Gibt es für mich eine leistungsfreundliche Möglichkeit, die Bibliothek zu verwenden?
  

Sehen wir uns an, wie ich damit umgehen würde, wenn ich die Vue-Bibliothek auswählen würde.

Wenn mein Programm bestimmte Funktionen benötigt, möchte ich die Lodash-Bibliothek installieren.

Ich weiß jedoch, wie stark die Leistung von lodash beeinträchtigt werden kann. Daher importiere ich nicht die gesamte Bibliothek, sondern nur die Funktionen.

importiere isEmpty von 'lodash/isEmpty'

Glauben Sie mir, eine so kleine Änderung in verschiedenen Bibliotheken wird größere und spürbarere Auswirkungen haben.

Bisher haben wir die VueJS- bundle -Größe für große Anwendungen und damit verbundene VueJS-Leistungstipps besprochen. Um die Leistung zu optimieren, ist die Reduzierung bundle nicht die einzige Lösung. Die Wiederverwendung einiger Assets ist erforderlich, damit Benutzer nicht warten müssen. Sehen wir uns im nächsten Schritt an, wie der Browser-Cache zur Wiederverwendung genutzt wird.

5. Browser-Cache nutzen

Über die Bundle-Größe haben wir bereits genug diskutiert; in diesem letzten Schritt konzentrieren wir uns auf das Zwischenspeichern von Daten.

Caching ist eine Technik zum Speichern ausgewählter Daten, um bei Anforderung schnell darauf zugreifen zu können.

Der Browser speichert die Daten im Speichercache, bis der Browser geschlossen wird.

Kann beobachtet werden.

Öffnen Sie die Entwicklertools und wählen Sie die Registerkarte „Netzwerk“. Besuchen Sie eine beliebige Website und laden Sie sie einige Male neu. Sie werden feststellen, dass einige statische Dateien wie CSS, Bilder, javascript und HTML über einen Speichercache verfügen, wie unten gezeigt. Dies bedeutet, dass solche Dateien aus dem Speichercache bereitgestellt werden.

Da Browser das Caching ziemlich gut selbst handhaben. Sie fragen sich vielleicht: „Was können wir hinzufügen?“ Sie müssen also nur herausfinden, welche Teile Ihrer VueJS-App-Struktur sich im Vergleich zu anderen Teilen selten ändern, damit wir diese Teile zwischenspeichern können.

Angenommen, die Projektstruktur ist wie folgt -

• Main.[hash].js – die Stammkomponente des Projekts
• Common .[hash].js - Gemeinsame Komponenten des Projekts
• Dashboard.[hash].js – Dashboard-spezifische Komponenten
• Contact.[hash].js - Kontaktspezifische Komponenten
  

Für uns sind die gängigen Teile wichtig. Wir können alle unsere Abhängigkeiten hier haben, es ist unwahrscheinlich, dass sie sich oft ändern, und wir können es außerdem zum Zwischenspeichern von Daten verwenden. Durch die Trennung dieser Komponenten können Sie Benutzern Zeit sparen. Weitere Informationen zum Aufteilen Ihrer Abhängigkeiten in verschiedene Teile finden Sie hier.

6. Bilder optimieren und komprimieren

Bilder haben einen erheblichen Einfluss auf die Paketgröße Ihrer App. Wenn eine Anwendung relativ große Bilder rendert, kann dies tatsächlich die Ladezeit der Anwendung verlängern. Sie können die Art und Weise optimieren, wie Sie Bilder bereitstellen. Hierzu komprimiert man die Bilder lokal oder nutzt ein CDN. Lassen Sie uns sehen, wie wir das erreichen können -

• Lokale Bilder komprimieren

Wenn Ihre Anwendung aus 6–7 Bildern besteht, können Sie sie lokal bereitstellen. Bilder tragen zur Dateigröße bei. Daher ist es notwendig, Bilder zu komprimieren, um die Dateigröße zu verringern. Hier sind die 5 besten kostenlosen Online-Tools zum Komprimieren von Bildern:

• Adobe Photoshop
• Schrumpf-O'Matic
• Bildkompressor
• Jetzt komprimieren
• WinzigesPNG
  

• CDN-Bilder optimieren

Wenn Sie mit einer Anwendung arbeiten, die viele Medien nutzt, empfiehlt es sich, Bilder auf einem CDN zu optimieren. Das CDN bietet eine Transformationsfunktion, mit der die Bildgröße um bis zu 70 % reduziert werden kann, ohne dass es zu Pixelbildung und Beeinträchtigung der Benutzeroberfläche kommt. Diese Technik eignet sich am besten, wenn Ihre Anwendung 12 bis 15 Bilder enthält. Sie können Medien über diese Plattformen verwalten -

• ImageKit
• Wolkenklar
  

Hier ging es also darum, wie Sie die Leistung Ihrer VueJS Anwendung optimieren können. Ich hoffe, dass alle Ihre Fragen und Anfragen in diesem Blog beantwortet werden.

abschließend:
Unabhängig davon, wie groß die von Ihnen entwickelte Anwendung ist, müssen Sie sie irgendwann optimieren.

Dies ist das Ende dieses Artikels über die Analyse und Lösungen zur Leistungsoptimierung von Vue.js-Anwendungen. Weitere relevante Inhalte zur Analyse der Leistungsoptimierung von Vue.js-Anwendungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!