So optimieren Sie Vue-Projekte

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 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.

entspricht der .vue-Datei.

<template>,<style>,<script>

Sprechen wir über die Vue-Projekte um eins. Welche Punkte sind es wert, in

template

optimiert zu werden? 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, v-if wird zweifellos auf der Grundlage der Häufigkeit ausgewählt der Benutzerklicks ohne Berechtigungseinschrä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 Anzahl der Seiten auf der Seite zu reduzieren. Für die Gesamtzahl der DOMs bevorzuge ich die Verwendung von v-if, da dadurch die Anzahl der DOMs reduziert und das Rendern des ersten Bildschirms beschleunigt wird. Was die Leistung betrifft, habe ich das Gefühl, dass der Umschalt-Rendering-Prozess mit bloßem Auge nicht erkennbar ist , und die Benutzererfahrung wird dadurch nicht beeinträchtigt.

• Schreiben Sie nicht zu viele Ausdrücke und Urteile in die Vorlage v-if="isShow && isAdmin && (a || b)" Obwohl diese Art von Ausdruck erkennbar ist, ist sie keine langfristige Lösung , Verwenden Sie geeignete Methoden, um sie zu berechnen und in einer Methode zu kapseln. Der Vorteil besteht darin, dass wir denselben Ausdruck bequem an mehreren Stellen beurteilen können anzeigen.

• Schlüssel hinzufügen, wenn Unterkomponenten in einer Schleife aufgerufen werden. Schlüssel kann eine einzelne Schleife beispielsweise eindeutig identifizieren Schlüssel, wenn die Array-Daten so sind item.id, ist es offensichtlich sinnlos, ['a' , 'b', 'c', 'a'] während der Schleife zu verwenden und dann :key="item", um die Eindeutigkeit des Schlüssels sicherzustellen. (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
• 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 besteht keine Notwendigkeit für

  und dergleichen. Klasse, nur 29a253b0031c0123b0974f4b50635daa um es zu erledigen. .header-title__text.title

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
• in globale Dateien kapseln und dann

  verwenden für Kompatibilität. Die Kompatibilität von Flex und Grid ist durchschnittlich. Die Implementierung der Funktionen im Float-Layout wird nicht für verwirrend gehalten. .fl -- float: left.clearfloat

  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 export default {} konsistent beizubehalten, um das Auffinden der entsprechenden Methode zu erleichtern. Meine persönliche Gewohnheit Daten, Requisiten, Haken, Uhr, berechnet, Komponenten.

• 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 vollständig zu steuern. {{ isEditing ? 编辑中 : 保存 }}

• Requisiten an Versuchen Sie bei übergeordneten und untergeordneten Komponenten, :width="" :heigth="" anstelle von :option={} zu verwenden. Der Vorteil der Verfeinerung besteht darin, dass nur die Parameter übergeben werden, die geändert werden müssen Fügen Sie den Datentyp zu Requisiten hinzu, ob er übergeben werden muss, und den Standardwert, um die Fehlersuche zu erleichtern und die Wertübertragung strenger zu gestalten.

• 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.

• 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.

• 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 auszulösen

Die Komponentisierung von Vue ist bei allen sehr beliebt. Das Ausmaß, in dem Komponenten sinnvoll zerlegt werden, hängt von der Größe des Projekts ab. Kleine Projekte können mit nur wenigen Komponenten abgeschlossen werden, ohne dass Vuex, Axios usw. verwendet werden müssen. Wenn der Maßstab groß ist, müssen die Komponenten unterteilt werden. Je detaillierter, desto besser, einschließlich Layoutkapselung, Schaltflächen, Formularen, Eingabeaufforderungsfeldern, Karussells usw. Es wird empfohlen, den Code der Elementkomponentenbibliothek herunterzuladen. Wenn Sie keine Zeit haben, solche Details zu schreiben, können Sie direkt die Elementbibliothek verwenden und sie in mehreren Punkten optimieren.

• Komponenten haben klare Bedeutungen und verarbeiten nur ähnliche Geschäfte. Je höher die Wiederverwendbarkeit, desto besser und je stärker die Konfigurierbarkeit, desto besser.

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

• 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

vue-router Die am häufigsten verwendete Logik ist die Berechtigungskontrolle. Es gibt viele verwandte Demos und Artikel Erwähnenswert ist das verzögerte Laden von Komponenten

中午官网链接如上，例子如下

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')

这段代码将 Foo, Bar, Baz 三个组件打包进了名为 group-foo 的 chunk 文件，当然啦是 js 文件

其余部分正常写就可以，在网站加载时会自动解析需要加载哪个 chunk，虽然分别打包的总体积会变大，但是单看请求首屏速度的话，快了好多。

vuex 面临的问题和解决方案有几点

• 当网站足够大时，一个状态树下，根的部分字段繁多，解决这个问题就要模块化 vuex，官网提供了模块化方案，允许我们在初始化 vuex 的时候配置 modules。每一个 module 里面又分别包含 state 、action 等，看似是多个状态树，其实还是基于 rootState 的子树。细分后整个 state 结构就清晰了，管理起来也方便许多。

• 由于 vuex 的灵活性，带来了编码不统一的情况，完整的闭环是 store.dispatch('action') -> action -> commit -> mutation -> getter -> computed，实际上中间的环节有的可以省略，因为 API 文档提供了以下几个方法 mapState、mapGetters、mapActions、mapMutations，然后在组件里可以直接调取任何一步，还是项目小想怎么调用都可以，项目大的时候，就要考虑 vuex 使用的统一性，我的建议是不论多简单的流程都跑完整个闭环，形成代码的统一，方便后期管理，在我的组件里只允许出现 dispatch 和 mapGetters，其余的流程都在名为 store 的 vuex 文件夹里进行。

• 基于上面一条，说下每个过程里面要做什么，前后端数据一定会有不一致的地方，或是数据结构，或是字段命名，那么究竟应该在哪一步处理数据转换的逻辑呢？有人会说其实哪一步都可以实现，其实不然，我的建议如下

1. 在发 dispatch 之前就处理好组件内需要传的参数的数据结构和字段名

2. 到了 action 允许我们做的事情很多，因为这部支持异步，支持 state, rootState, commit, dispatch, getters，由此可见责任重大，首先如果后端需要部分其他 module 里面的数据，要通过 rootState 取值再整合到原有数据上，下一步发出请求,建议（async await + axios），拿到数据后进行筛选转换，再发送 commit 到 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 中。

例如：

fe1955b5a271a2d2ad9da0c29e9600282cacc6d41bbb37262a98f745aa00fbf0
a3f2dbbc8c9775a0a77b6bb3360b57052cacc6d41bbb37262a98f745aa00fbf0
948c393b837f3e71dfeb3d56f8ffbd1c2cacc6d41bbb37262a98f745aa00fbf0
a2410c7c1519f1c8646b704e836e26742cacc6d41bbb37262a98f745aa00fbf0

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

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

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

Das obige ist der detaillierte Inhalt vonSo optimieren Sie Vue-Projekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!