Comment optimiser les projets Vue

Il y a quelques jours, j'ai vu des gens dire que plus le projet Vue est grand, plus il est difficile à optimiser, ce qui est inévitable. Le problème doit finalement être résolu. performances du framework. Tous les principaux sites Web de test disposent de données pertinentes. Entrons dans le vif du sujet

Optimisation de base

L'optimisation dite de base est requise pour tout projet Web et est à l'origine du problème. HTML, CSS et JS sont les premières étapes d'optimisation

correspond respectivement au fichier .vue,

<template>,<style>,<script>

Parlons de celui des projets vue. par un. Quels sont les points qui méritent d'être optimisés dans le

modèle

Les balises sémantiques, éviter l'imbrication aléatoire, nommer raisonnablement les attributs et autres éléments standard recommandés ne seront pas abordés.

La partie modèle nous aide à afficher des données structurées. Vue pilote la vue à travers les données

• Lequel dois-je utiliser pour v-show et. v-si ? À mon avis, nous devons réfléchir au problème en deux dimensions. La première dimension est la question des autorisations. Tant qu'il s'agit d'affichages liés aux autorisations, v-if sera sans aucun doute utilisée en fonction de la fréquence. des clics des utilisateurs sans restrictions d'autorisation. , utilisez v-show pour les changements fréquents et utilisez v-if pour les changements peu fréquents. Le point d'optimisation à mentionner ici est de réduire le nombre de pages dans la page. Pour le nombre total de DOM, je préfère utiliser v-if, car cela réduit le nombre de DOM et accélère le rendu du premier écran. Quant aux performances, j'ai l'impression que le processus de rendu de commutation n'est pas visible à l'œil nu. , et cela n’affectera pas l’expérience utilisateur.

• N'écrivez pas trop d'expressions et de jugements dans le modèle v-if="isShow && isAdmin && (a || b)" Bien que ce type d'expression puisse être reconnu, ce n'est pas une solution à long terme lorsqu'elle semble inconfortable. , utilisez-le de manière appropriée. Il est écrit dans des méthodes et calculé et encapsulé dans une seule méthode. L'avantage est qu'il est pratique pour nous de juger la même expression à plusieurs endroits, et d'autres éléments avec les mêmes autorisations peuvent appeler la même méthode lors du jugement. et l'affichage.

• Ajouter une clé lors de l'appel de sous-composants dans une boucle. La clé peut identifier de manière unique un individu de la boucle. Par exemple, item.id peut être utilisé comme. clé, si les données du tableau sont comme ceci ['a' , 'b', 'c', 'a'], cela n'a évidemment pas de sens d'utiliser :key="item". Une meilleure façon est d'utiliser (item, index) in arr pendant la boucle, puis :key="index" pour garantir l'unicité du. clé.

style

• Placer le fichier de style à l'intérieur ou à l'extérieur du fichier vue ? Cela n'a aucun sens d'en discuter. Le point clé est de le diviser par module. Mon habitude est de le mettre dans le fichier vue. Il est pratique d'écrire du code et de sauter de haut en bas dans le même fichier. ajoutez 29a253b0031c0123b0974f4b50635daa pour verrouiller le fichier de style.Le butC'est très simple. Même si la norme est facile à utiliser, elle ne peut pas éviter les problèmes de développement par plusieurs personnes. en verrouillant la zone, essayez d'utiliser des règles de dénomination courtes. Il n'est pas nécessaire de .header-title__text et autres. cours, juste .title pour le faire.

• Afin de le distinguer de l'article précédent, parlons du fichier de style global. Le fichier de style global doit être le plus abstrait possible puisqu'il n'est pas répété dans chaque composant. elle doit être aussi générale que possible. Cette partie Plus l'abstraction est bonne, plus la taille de votre fichier de style est petite et plus le taux de réutilisation est élevé. Il est recommandé de mettre le code de la bibliothèque de composants copiée telle que le style d'élément dans le global.

• N'utilisez pas la mise en page flottante. J'ai vu de nombreuses personnes encapsuler .fl -- float: left dans des fichiers globaux puis utiliser .clear. Les navigateurs d'aujourd'hui ne sont pas si faibles. pour la compatibilité. La compatibilité de flex et de grille est moyenne. En fait, les fonctions peuvent être implémentées dans une mise en page flex, cela posera des problèmes de mise en page. Quiconque l'a utilisé ne croira pas que l'explication est déroutante. float

En ce qui concerne les autres spécifications générales, je n'entrerai pas dans les détails ici. Il existe de nombreux articles connexes.

script

Cette partie est aussi la plus difficile à optimiser. Laissez-moi vous donner mon avis personnel.

• Lors du développement avec plusieurs personnes, essayez de garder l'ordre des méthodes dans chaque composant export default {} cohérent pour faciliter la recherche de la méthode correspondante. Mon habitude personnelle données, accessoires, crochets, montre, calculés, composants.

• Ce que je veux dire dans les données, c'est que la structure des données initialisées doit être aussi détaillée que possible, avec une dénomination claire, simple et facile à comprendre, et éviter les variables inutiles. peut en fait représenter deux états, vrai ou faux, non Ensuite, définissez notEditing pour contrôler l'affichage Vous pouvez l'utiliser complètement dans le modèle {{ isEditing ? 编辑中 : 保存 }}

• props lors du passage de valeurs. Composants parent-enfant, essayez d'utiliser :width="" :heigth="" au lieu de :option={} L'avantage du raffinement est que seuls les paramètres qui doivent être modifiés sont dans le sous-composant. Ajoutez le type de données aux accessoires, s'il doit être transmis, ainsi que la valeur par défaut pour faciliter le dépannage des erreurs et rendre la transmission de la valeur plus rigoureuse.

• Tant que le hook comprend la signification du cycle de vie, quand la demande doit-elle être faite, quand la méthode doit-elle être déconnectée et quelles méthodes doivent être déconnectées. Simple et facile à comprendre, il est écrit sur le site officiel.

• Chaque méthode dans les méthodes doit être simple et ne faire qu'une seule chose. Essayez d'encapsuler des méthodes courtes et réutilisables sans trop de paramètres. Si vous comptez beaucoup sur lodash pour le développement, la méthode semblera beaucoup plus simple, mais le coût est que la taille globale du bundle sera plus grande. Si le projet n'utilise qu'un petit nombre de méthodes, loadsh peut être introduit localement. Si vous souhaitez utiliser lodash, vous pouvez encapsuler vous-même un fichier util.js

• Pour savoir lequel utiliser entre watch et calculé, veuillez consulter l'exemple sur le site officiel des attributs calculés. sont principalement une couche de conversion de filtre. N'ajoutez pas de méthodes d'appel. La fonction de watch est de surveiller les changements de données pour modifier les données ou déclencher des événements tels que this.$store.dispatch('update', { ... })

Optimisation des composants.

La composantisation de Vue est profondément appréciée de tous. La mesure dans laquelle les composants sont raisonnablement démontés dépend de la taille du projet. Les petits projets peuvent être réalisés avec seulement quelques composants, sans même utiliser vuex, axios, etc. Si l'échelle est grande, les composants doivent être subdivisés, plus ils sont détaillés, mieux c'est, y compris l'encapsulation de la mise en page, les boutons, les formulaires, les boîtes d'invite, les carrousels, etc. Il est recommandé de lire Téléchargez le code de la bibliothèque de composants Element si vous ne le faites pas. Si vous n'avez pas le temps d'écrire de tels détails, vous pouvez utiliser directement la bibliothèque Element et l'optimiser sur plusieurs points

• Les composants ont des significations claires et ne gèrent que des activités similaires. Plus la réutilisabilité est élevée, mieux c'est, et plus la configurabilité est forte, mieux c'est.

• Si vous encapsulez les composants vous-même, vous devez toujours suivre les règles de configuration du raffinement des accessoires.

• Classification des composants, je la divise habituellement en trois catégories, page, élément de page et mise en page. La page est la partie de contrôle de routage, et l'élément de page appartient à chaque bloc de mise en page de la page. tels que la bannière. , le côté, etc., placez les composants qui apparaissent au moins deux fois sur plusieurs pages de la mise en page, tels que l'icône, le scrollTop, etc.

vue-router et optimisation vuex

vue-router En plus de changer d'itinéraire, la logique la plus couramment utilisée est de gérer les autorisations. Je n'entrerai pas ici dans les détails du contrôle des autorisations. Il existe de nombreuses démos et articles connexes. , il convient de mentionner le chargement paresseux des composants

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

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 快的多。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!