Worauf sollten wir bei der Optimierung von Vue-Projekten achten?

In diesem Artikel wird hauptsächlich die Methode zur Optimierung von Vue-Projekten vorgestellt. Der Herausgeber findet sie recht gut. Jetzt werde ich sie mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf

Es ist lange her, dass ich einen Blogbeitrag geschrieben habe. Dieser Artikel ist eine Zusammenfassung meiner Erfahrungen mit der Verwendung des Vue-Frameworks für ein halbes Jahr. Dieser Artikel gilt nur für Projekte, die von vue-cli initialisiert wurden oder auf gepackten Elementen basieren.

Vor ein paar Tagen habe ich Leute sagen sehen, dass es umso schwieriger ist, es zu optimieren, was unvermeidlich ist. Das Problem muss irgendwann gelöst werden Problem mit der Leistung des Frameworks. Alle großen Test-Websites verfügen über relevante Daten. Kommen wir zum Punkt

Grundlegende Optimierung

Die sogenannte Grundoptimierung ist für jedes Webprojekt erforderlich und die Wurzel des Problems. HTML, CSS und JS sind die ersten Schritte zur Optimierung

entsprechend ，<template>,<style>,<script>， in der .vue-Datei. Lassen Sie uns nacheinander über die Punkte sprechen, die es wert sind, im Vue-Projekt optimiert zu werden >

Vorlage

Semantische Tags, Vermeidung zufälliger Verschachtelung, sinnvolle Benennung von Attributen und andere standardmäßig empfohlene Dinge werden nicht besprochen.

Der Vorlagenteil hilft uns, strukturierte Daten anzuzeigen. Achten Sie auf die folgenden Punkte.

Welches soll ich für V-Show verwenden? v-wenn? Meiner Meinung nach müssen wir das Problem in zwei Dimensionen betrachten. Die erste Dimension ist die Berechtigungsfrage. Solange es sich um erlaubnisbezogene Anzeigen handelt, wird v-if zweifellos auf der Grundlage der Häufigkeit ausgewählt Für Benutzerklicks ohne Berechtigungsbeschränkungen verwenden Sie v-show für häufiges Wechseln und v-if für seltenes Wechseln. Der hier zu erwähnende Optimierungspunkt besteht darin, die Gesamtzahl der DOMs auf der Seite zu reduzieren. Wenn es die Anzahl der DOMs reduziert und das Rendern des ersten Bildschirms beschleunigt, bin ich der Meinung, dass der Umschalt-Rendering-Prozess mit bloßem Auge nicht sichtbar ist und die Benutzererfahrung nicht beeinträchtigt.
Schreiben Sie nicht zu viele Ausdrücke und Urteile in die Vorlage
2. Obwohl diese Art von Ausdruck erkennbar ist, ist sie keine langfristige Lösung. Es ist angemessen, Methoden zu schreiben und zu berechnen und sie in einer Methode zu kapseln. Der Vorteil davon besteht darin, dass wir denselben Ausdruck bequem an mehreren Stellen beurteilen können und andere Elemente mit denselben Berechtigungen bei der Beurteilung dieselbe Methode aufrufen können anzeigen.

   v-if="isShow && isAdmin && (a || b)"，

Schlüssel hinzufügen, wenn eine Schleife aufgerufen wird. Sie können beispielsweise item.id als Schlüssel verwenden
3. Verwenden

   Offensichtlich macht es keinen Sinn, die Eindeutigkeit des Schlüssels während des Schleifens sicherzustellen ['a' , 'b', 'c', 'a'],. :key="item" (item, index) in arr，然后 :key="index"

Stil

Stildatei innerhalb oder außerhalb der Vue-Datei platzieren? Es ist sinnlos, es nach Modulen aufzuteilen. Es ist praktisch, Code zu schreiben und in derselben Datei nach oben und unten zu springen. Fügen Sie
1. hinzu, um die Stildatei zu sperren. Unabhängig davon, wie einfach der Standard ist, kann er die Probleme der Mehrpersonenentwicklung nicht vermeiden Wenn Sie den Bereich sperren, versuchen Sie, kurze Benennungsregeln zu verwenden. Es sind keine Klassen wie

   erforderlich, sondern nur .title. <style scopeed> .header-title__text

Um es vom vorherigen Artikel zu unterscheiden, sprechen wir über die globale Stildatei. Die globale Stildatei sollte so abstrakt wie möglich sein, da sie nicht in jeder Komponente wiederholt wird. Dieser Teil sollte so allgemein wie möglich sein. Je besser die Abstraktion, desto kleiner ist die Größe Ihrer Stildatei und desto höher ist die Wiederverwendungsrate. Es wird empfohlen, den Code der kopierten Komponentenbibliothek, z. B. den Elementstil, in den globalen Code einzufügen.
Verwenden Sie kein Float-Layout. Ich habe viele Leute gesehen, die
3. in eine globale Datei kapseln und dann .clear benötigen Aus Gründen der Kompatibilität ist die Kompatibilität mit Flex Grid durchschnittlich, und seine Funktionen können tatsächlich im Flex-Layout implementiert werden. Jeder, der es verwendet hat, weiß, dass er die Erklärung nicht glaubt.

   .fl -- float: left

Was andere allgemeine Spezifikationen betrifft, werde ich hier nicht auf Details eingehen. Es gibt viele verwandte Artikel.

Skript

Dieser Teil ist auch am schwierigsten zu optimieren. Lassen Sie mich Ihnen meine persönliche Meinung sagen.

Wenn Sie mit mehreren Personen entwickeln, versuchen Sie, die Reihenfolge der Methoden in jeder Komponente
1. konsistent beizubehalten, um das Auffinden der entsprechenden Methode zu erleichtern. Ich persönlich verwende Daten, Requisiten, Haken, Uhren, Computer und Komponenten.

   export default {}

Was ich mit Daten sagen möchte, ist, dass die Struktur der initialisierten Daten so detailliert wie möglich sein sollte, mit klarer Benennung, einfach und leicht zu verstehen und nutzlose Variablen zu vermeiden kann tatsächlich zwei Zustände darstellen, wahr oder falsch, nein. Definieren Sie dann notEditing, um die Anzeige zu steuern, was in der Vorlage

2. erfolgen kann

3. Wenn Sie Werte von Requisiten an übergeordnete und untergeordnete Komponenten übergeben, versuchen Sie :width="" :heigth="" und vermeiden Sie :option={}. Der Vorteil der Verfeinerung besteht darin, dass nur die Parameter, die geändert werden müssen, werden übergeben und zu den Requisiten der untergeordneten Komponente hinzugefügt. Der Datentyp, ob er übergeben werden muss, und der Standardwert erleichtern die Fehlerbehebung und machen die Werteübertragung strenger.

4. Solange der Hook die Bedeutung des Lebenszyklus versteht, wann sollte die Anfrage gestellt werden, wann sollte die Methode abgemeldet werden und welche Methoden müssen abgemeldet werden. Einfach und leicht verständlich ist es auf der offiziellen Website geschrieben.

5. Jede Methode in Methoden muss einfach sein und nur eine Aufgabe erfüllen. Versuchen Sie, kurze und wiederverwendbare Methoden ohne zu viele Parameter zu kapseln. Wenn Sie sich bei der Entwicklung stark auf lodash verlassen, sieht die Methode viel einfacher aus, aber der Preis dafür ist, dass die Gesamtpaketgröße größer ist. Wenn das Projekt nur eine kleine Anzahl von Methoden verwendet, kann Loadsh lokal eingeführt werden Wenn Sie lodash verwenden möchten, können Sie selbst eine util.js-Datei kapseln.

6. Für die Frage, welches zwischen Watch und Computed verwendet werden soll, sehen Sie sich bitte das Beispiel auf der offiziellen Website an sind hauptsächlich eine Ebene der Filterkonvertierung. Die Funktion von watch besteht darin, Datenänderungen zu überwachen oder Ereignisse wie this.$store.dispatch('update', { ... })

Komponentenoptimierung

Vues Komponentisierung ist bei allen sehr beliebt. Wie weit ist es sinnvoll, Komponenten zu zerlegen? Kleine Projekte können mit nur wenigen Komponenten abgeschlossen werden sogar unter Verwendung von Vuex, Axios usw. Wenn der Maßstab groß ist, müssen die Komponenten unterteilt werden Wenn Sie keine Zeit haben, solche Details zu schreiben, können Sie die Elementbibliothek direkt verwenden und sie in mehreren Punkten optimieren.

1. Die Komponenten haben klare Bedeutungen ähnliche Geschäfte abwickeln. Je höher die Wiederverwendbarkeit, desto besser und je stärker die Konfigurierbarkeit, desto besser.

2. Wenn Sie Komponenten selbst kapseln, sollten Sie dennoch die Regeln zur Konfiguration der Requisitenverfeinerung befolgen.

3. Komponentenklassifizierung, ich unterteile sie normalerweise in drei Kategorien: Seite, Seitenelement und Layout. Seite ist der Routing-Steuerteil, und Seitenelement gehört zu jedem Layoutblock auf der Seite B. Banner, Seite usw., platzieren Sie Komponenten, die mindestens zweimal auf mehreren Seiten im Layout erscheinen, z. B. Symbol, ScrollTop usw.

vue-router und Vuex-Optimierung

Zusätzlich zum Umschalten von Routen verwendet Vue-Router die meiste Logik für die Berechtigungskontrolle. Es gibt viele verwandte Demos und Artikel Wenn es um die Optimierung geht, ist es erwähnenswert, dass die Komponente verzögert geladen wird

Der Link zur offiziellen Mittags-Website ist oben und das Beispiel lautet wie folgt

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') 
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo') 
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

Dieser Code verpackt die Fügen Sie die drei Komponenten Foo, Bar und Baz natürlich in eine Blockdatei mit dem Namen group-foo ein. Es handelt sich um eine JS-Datei

und der Rest kann normal geschrieben werden. Wenn die Website geladen wird, wird automatisch analysiert, welcher Block Obwohl das Gesamtvolumen der einzelnen Pakete zunimmt, ist die Geschwindigkeit beim Anfordern des ersten Bildschirms viel schneller.

Es gibt mehrere Probleme und Lösungen, mit denen Vuex konfrontiert ist.

Wenn die Website groß genug ist, gibt es viele Felder im Stammteil eines Zustandsbaums. Um dieses Problem zu lösen, ist modulares Vuex erforderlich , wie auf der offiziellen Website bereitgestellt. Eine modulare Lösung ermöglicht es uns, Module bei der Initialisierung von vuex zu konfigurieren. Jedes Modul enthält Status, Aktion usw., die wie mehrere Zustandsbäume erscheinen, in Wirklichkeit aber Teilbäume sind, die auf rootState basieren. Nach der Unterteilung wird die gesamte Staatsstruktur klarer und die Verwaltung deutlich einfacher.

Aufgrund der Flexibilität von vuex ist die vollständige geschlossene Schleife Store.dispatch('action') -> Tatsächlich können einige der Zwischenlinks weggelassen werden, da das API-Dokument die folgenden Methoden bereitstellt: MapState, MapGetters, MapActions und MapMutations. Dann kann jeder Schritt direkt in der Komponente aufgerufen werden, oder Sie können ihn als Projekt bezeichnen Wenn das Projekt groß ist, müssen wir die Einheitlichkeit der Vuex-Nutzung berücksichtigen, egal wie einfach der Prozess ist, um einen einheitlichen Code zu bilden und die spätere Verwaltung zu erleichtern Um in meinen Komponenten angezeigt zu werden, wird der Rest des Prozesses im Vuex-Ordner namens „store“ ausgeführt.

Lassen Sie uns anhand des obigen Punktes darüber sprechen, was in den einzelnen Prozessen zu tun ist. Es müssen Inkonsistenzen in den Front-End- und Back-End-Daten oder in der Datenstruktur oder Feldbenennung vorliegen die Datenkonvertierung übernehmen? Was ist mit der Logik? Einige Leute werden sagen, dass jeder Schritt erreicht werden kann, aber das ist nicht der Fall.

1. Bearbeiten Sie vor dem Senden des Versands die Datenstruktur und die Feldnamen der Parameter müssen in der Komponente übergeben werden

2. Wenn es um Aktionen geht, dürfen wir viele Dinge tun, da dieser Teil asynchron unterstützt, Status, RootState, Commit, Dispatch unterstützt, Dies zeigt, dass die Verantwortung groß ist. Wenn das Backend einige andere Module benötigt, müssen die darin enthaltenen Daten über den RootState-Wert integriert werden ). Nachdem Sie die Daten erhalten haben, filtern und konvertieren Sie sie und senden Sie dann ein Commit an die Mutation

3. 这一步是将转换后的数据更新到 state 里，可能会有数据分发的过程（传进一个 object 改变多个 state 中 key 的 value），可以转换数据结构，但是尽量不做字段转换，在上一步做

4. 此时的 store 已经更新，使用 getter 方法来取值，token: state => state.token，单单的取值，尽量不要做数据转换，需要转换的点在于多个地方用相同的字段，但是结构不同的情况（很少出现）。

5. 在组件里用 mapGetters 拿到对应的 getter 值。

打包优化

上面说了代码方面的规范和优化，下面说下重点的打包优化，前段时间打包的 vender bundle 足足 1.4M，app bundle 也有 270K，app bundle 可以通过组件懒加载解决，vender 包该怎么解决？

有人会质疑是不是没压缩或依赖包没去重，其实都做了就是看到的 1.4M。

解决方法很简单，打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 bootcdn 直接引入到根目录的 index.html 中。

例如：

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script> 
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script> 
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script> 
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

在 webpack 里有个 externals，可以忽略不需要打包的库

externals: { 
 'vue': 'Vue', 
 'vue-router': 'VueRouter', 
 'vuex': 'Vuex', 
 'axios': 'axios' 
}

此时的 vender 包会非常小，如果不够小还可以拆分其他的库，此时增加了请求的数量，但是远比加载一个 1.4M 的 bundle 快的多。

总结

本文谈的优化可以解决部分性能问题，实际开发细节很多，总之按着规范写代码，团队的编码风格尽量统一，处理细节上多加思考，大部分性能问题都能迎刃而解。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Webpack中如何加载SVG

webpack打包配置（详细教程）

在Javascript中自适应处理方法

Das obige ist der detaillierte Inhalt vonWorauf sollten wir bei der Optimierung von Vue-Projekten achten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!