Implementierung der Codeoptimierung zur Leistungsoptimierung von Vue2.x-Projekten

Wie wir alle wissen, verwendet das Vue-Projekt bidirektionale Datenbindung und virtuelles DOM als Grundlage. Es ist sehr effizient, datengesteuertes anstelle von häufigem DOM-Rendering zu verwenden. Es ist bereits sehr optimiert für Entwickler. Warum gibt es also so etwas wie Vue-Leistungsoptimierung?

Da Vue 2.x derzeit Verpackungs- und Konstruktionstools von Drittanbietern wie Webpack verwendet und andere Plug-Ins von Drittanbietern unterstützt, können unterschiedliche Vorgänge bei der Verwendung dieser Tools in unseren Projekten unterschiedliche Auswirkungen auf die Ausführungs- oder Verpackungseffizienz haben. Im Folgenden wird die Optimierungsrichtung ausführlich erläutert.

1 Verwendung von v-if und v-show

• Wenn v-if falsch ist, wird das DOM nicht in der Ansicht gerendert, und es wird in der Ansicht gerendert, wenn es wahr ist.
• v-show: Das Element wird unabhängig von den Anfangsbedingungen immer angezeigt. Es wird einfach basierend auf der CSS-Anzeigeeigenschaft umgeschaltet.

Best Practices: Verwenden Sie v-show für häufig umgeschaltete Elemente und v-if für selten geänderte Elemente

2. Unterscheiden Sie zwischen berechneten und beobachteten

• berechnet: Es handelt sich um eine berechnete Eigenschaft, die von anderen Eigenschaftswerten abhängt. Der berechnete Wert wird zwischengespeichert. Nur wenn sich der Eigenschaftswert ändert, von dem er abhängt, wird der berechnete Wert beim nächsten Abrufen des berechneten Werts neu berechnet.
• Beobachten: Es handelt sich eher um eine „Beobachtungs“-Funktion, ähnlich dem Rückruf zur Überwachung bestimmter Daten. Immer wenn sich die überwachten Daten ändern, wird der Rückruf für nachfolgende Vorgänge ausgeführt.

Bewährte Methoden: Wenn wir numerische Berechnungen durchführen müssen, die von anderen Daten abhängen, sollten wir „computed“ verwenden, da wir die Caching-Eigenschaften von „computed“ nutzen können, um eine Neuberechnung bei jedem Erhalt eines Werts zu vermeiden. Wenn wir bei Datenänderungen asynchrone oder aufwändige Vorgänge durchführen müssen, sollten wir „watch“ verwenden. Mit der Option „watch“ können wir asynchrone Vorgänge durchführen (auf eine API zugreifen), die Häufigkeit der Ausführung des Vorgangs begrenzen und Zwischenzustände festlegen, bevor wir das Endergebnis erhalten. Dies sind Dinge, die berechnete Eigenschaften nicht können.

3 Bei der v-for-Durchquerung muss dem Element ein Schlüssel hinzugefügt werden. Die gleichzeitige Verwendung von v-if darf nicht vermieden werden.

Wenn Sie keinen Schlüssel hinzufügen, tritt im Allgemeinen ein Fehler auf. Das Hinzufügen eines Schlüssels kann es dem internen Mechanismus von Vue erleichtern, die Listendaten genau zu finden. Beim Aktualisieren wird der neue Statuswert mit dem alten Statuswert verglichen, um den Unterschied schneller zu finden

v-for hat eine höhere Priorität als v-if. Wenn Sie jedes Mal das gesamte Array durchlaufen müssen, wirkt sich dies auf die Geschwindigkeit aus, insbesondere wenn nur ein kleiner Teil gerendert werden muss. Bei Bedarf sollte es durch eine berechnete Eigenschaft ersetzt werden.

<ul>
 <li v-for="Benutzer in Admin-Benutzern" :key="Benutzer-ID">
  {{ Benutzername }}
 </li>
</ul>

<Skript>
Standard exportieren {
 Daten () {
 return { Benutzer: [] }
 },
 berechnet: {
 adminBenutzer: function(){
 gibt dies zurück.users.filter(()=>user.isAdmin)
 }
 }
}
</Skript>

4. Performanceoptimierung der reinen Anzeige langer Listen

Bei Daten, die nur zur Anzeige verwendet werden, ist es nicht erforderlich, Vue zu verwenden, um die Daten zu kapern. Sie müssen lediglich das Objekt einfrieren:

Standard exportieren {
 Daten () {
 zurückkehren {
 Benutzer: []
 }
 },
 erstellt () {
 axios.get('/api/users').then((res)=>{
 diese.Benutzer = Objekt.freeze(res.data.users)
 })
 }
}
 

5. Ereigniszerstörung

Wenn eine Vue-Komponente zerstört wird, bereinigt sie automatisch ihre Verbindungen mit anderen Instanzen und löst alle ihre Anweisungen und Ereignis-Listener, jedoch nur für Ereignisse der Komponente selbst. Wenn addEventListene und andere Methoden in js verwendet werden, wird das Ereignis nicht automatisch zerstört. Wir müssen die Listener dieser Ereignisse manuell entfernen, wenn die Komponente zerstört wird, um Speicherlecks zu vermeiden, wie zum Beispiel:

erstellt() {
 addEventListener('klicken', dies.klicken, false)
},
vorZerstören() {
 removeEventListener('klicken', dies.klicken, false)
}
 

6. Lazy Loading von Bildressourcen

Verwenden Sie das Plugin „vue-lazyload“:

Installieren

npm installiere vue-lazyload --save-dev

man.js-Referenz

importiere VueLazyload von „vue-lazyload“
Vue.use(VueLazyload)
// oder Vue.use(VueLazyload, { anpassen
 Vorladung: 1,3,
 Fehler: „dist/error.png“,
 wird geladen: „dist/loading.gif“,
 Versuch: 1
})

Ändern Sie das img-Tag

<img v-lazy="/static/img/1.png">

7 Lazy Loading beim Routing

Vue ist eine einseitige Anwendung, die viele Routen einführen kann. Daher ist die mit webpcak gepackte Datei sehr groß. Beim Aufrufen der Homepage werden zu viele Ressourcen geladen und die Seite zeigt einen weißen Bildschirm an, was der Benutzererfahrung nicht förderlich ist. Es wäre effizienter, wenn wir die den verschiedenen Routen entsprechenden Komponenten in verschiedene Codeblöcke aufteilen und dann beim Zugriff auf die Route die entsprechenden Komponenten laden könnten. Dadurch wird die Geschwindigkeit der ersten Bildschirmanzeige erheblich erhöht, die Geschwindigkeit anderer Seiten kann jedoch abnehmen.

const Foo = () => import('./Foo.vue')
const router = neuer VueRouter({
 Routen: [
 { Pfad: '/foo', Komponente: Foo }
 ]
})

8. Führen Sie bei Bedarf Plug-Ins von Drittanbietern ein

Wenn wir Bibliotheken von Drittanbietern verwenden, ist es am besten, sie bei Bedarf und nicht global zu importieren, da Bibliotheken von Drittanbietern über viele Plug-Ins verfügen und der Import aller davon das Paketieren langsam machen würde, wie z. B. Element UI, Ant Design von Vue und andere UI-Bibliotheken:

Import auf Anfrage

importiere Vue von „vue“;
importiere { DatePicker } von „Ant-Design-Vue“;
Vue.use(Datumsauswahl);
 

Globaler Import

importiere Antd von „Ant-Design-Vue“;
Vue.use(Antd);

9 Optimieren der Leistung unendlicher Listen

Wenn Sie eine Liste mit unendlichem Scrollen rendern, müssen Sie zur Leistungsoptimierung die Fenstertechnologie verwenden. Sie müssen nur einen kleinen Inhaltsbereich rendern, wodurch die Zeit zum erneuten Rendern von Komponenten und Erstellen von DOM-Knoten reduziert wird. Sie können auf die folgenden Open-Source-Projekte vue-virtual-scroll-list und vue-virtual-scroller verweisen, um dieses Szenario mit einer unendlichen Liste zu optimieren.
Bitte gehen Sie zu Github, um die Anweisungen zu lesen.

10. Serverseitiges Rendering SSR oder Pre-Rendering

Im Allgemeinen führen Einzelseitenanwendungen das Rendern der Seite auf der Browserseite durch und erhalten die Daten durch Senden einer Anforderung aus dem Hintergrund. Beim serverseitigen Rendering (SSR) hingegen wird die Struktur der Seitenelemente (HTML) bereits auf der Serverseite erstellt und die gesamte Seite wird direkt an den Client zurückgegeben.
Was sind also die Vor- und Nachteile von SSR:

• Bessere SEO: Webcrawler können Seiteninformationen direkt crawlen, was der Aufnahme in Suchmaschinen förderlich ist, während der Inhalt asynchroner Ajax-Anfragen nicht aufgenommen wird. Daher sind die von SSR gerenderten vollständigen Seiteninformationen der SEO förderlicher.
• Die unterstützten Hook-Funktionen sind nur vor und nach dem Erstellen, und der Server muss sich in der Node-Server-Umgebung befinden.
• Erfordert eine höhere Serverkonfiguration: Da die Datenverarbeitung und das Rendern der Seite enthalten sind, steigen die Serverkosten.

Wenn Sie hohe Anforderungen an die Ladegeschwindigkeit des ersten Bildschirms oder an SEO haben, können Sie SSR-Rendering verwenden.

PS: Die Optimierung ist nur ein Vorschlag. Sie müssen überlegen, ob sie für Ihr Projekt geeignet ist, einschließlich der Schwierigkeit der Optimierung, des Wirkungsbereichs, anwendbarer Szenarien, ob sie andere Module betrifft, ob der Optimierungseffekt offensichtlich ist usw. Am besten ist, was zu Ihnen passt!

Damit ist dieser Artikel über die Implementierung der Codeoptimierung zur Leistungsoptimierung von Vue2.x-Projekten abgeschlossen. Weitere relevante Inhalte zur Vue2.x-Codeoptimierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!