À quoi devons-nous faire attention lors de l’optimisation des projets Vue ?

Cet article présente principalement la méthode d'optimisation des projets Vue. L'éditeur pense que c'est plutôt bon. Maintenant, je vais le partager avec vous et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil

Cela fait longtemps que je n'ai pas écrit d'article de blog. Cet article est un résumé de mon expérience d'utilisation du framework vue pendant six mois. Parlons-en avec désinvolture. Cet article s'applique uniquement aux projets initialisés par vue-cli ou qui reposent sur des éléments packagés Webpack.

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 être résolu à terme. problème avec les performances du framework. Tous les principaux sites Web de tests l'ont. 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 à optimiser

correspondent à ，d477f9ce7bf77f53fbcf36bec1b69b7a,c9ccee2e6ea535a969eb3f532ad9fe89,3f1c4e4b6b16bbbd69b2ee476dc4f83a， dans le fichier .vue Parlons un par un des points à optimiser dans le projet vue

. modèle

Les balises sémantiques, évitant l'imbrication aléatoire, la dénomination raisonnable des attributs et d'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

1. 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 que les affichages liés aux autorisations sont impliqués, v-if sera sans aucun doute utilisé. La deuxième dimension est sélectionnée en fonction de la fréquence. des clics de l'utilisateur 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 total de DOM dans la page. si, parce que cela réduit le nombre de DOM et accélère le rendu du premier écran, en ce qui concerne les performances, j'estime que le processus de rendu de commutation ne peut pas être vu à l'œil nu et n'affectera pas l'expérience utilisateur.

2. N'écrivez pas trop d'expressions et de jugements dans le modèlev-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. il est approprié d'écrire des méthodes, de les calculer et de les encapsuler dans une seule méthode. L'avantage de ceci est qu'il est pratique pour nous de juger la même expression à plusieurs endroits, et que d'autres éléments avec les mêmes autorisations peuvent appeler la même méthode lors du jugement et. affichage.

3. Ajouter une clé lors d'une boucle pour appeler des sous-composants. La clé peut identifier de manière unique un individu de la boucle. Vous pouvez utiliser item.id comme clé, par exemple si les données du tableau sont comme ceci Utiliser ['a' , 'b', 'c', 'a'], Évidemment, cela n'a aucun sens. Une meilleure façon est de garantir l'unicité de la clé lors du bouclage :key="item" . (item, index) in arr，然后 :key="index"

style

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

   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 classes telles que 192521596740c72ca3a5b3d83e125015, juste .title. .header-title__text

2. 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 fichier global.

3. N'utilisez pas la mise en page float. J'ai vu de nombreuses personnes encapsuler

   dans un fichier global et ensuite exiger .clear. Les navigateurs d'aujourd'hui ne sont pas si faibles que cela soit nécessaire. pour la compatibilité, qui est entièrement compatible avec flex, Grid a une compatibilité moyenne, et ses fonctions peuvent en fait être implémentées dans une disposition flex, ce qui entraînera des problèmes de mise en page. Quiconque l'a utilisé ne croira pas l'explication. .fl -- float: left

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.

1. Lors du développement avec plusieurs personnes, essayez de garder l'ordre des méthodes dans chaque composant

   cohérent pour faciliter la recherche de la méthode correspondante. J'utilise personnellement des données, des accessoires, des crochets, des montres, des calculs et des composants. export default {}

2. 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, ce qui peut être fait dans le modèle

   {{ isEditing ? 编辑中 : 保存 }}

3. Lorsque vous transmettez des valeurs des accessoires aux composants parents et enfants, essayez de :width="" :heigth="" et évitez :option={} L'avantage du raffinement est que seul le. les paramètres qui doivent être modifiés sont transmis et ajoutés aux accessoires du composant enfant. Le type de données, s'il doit être transmis et la valeur par défaut facilitent le dépannage des erreurs et rendent le transfert de valeur plus rigoureux.

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

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

6. 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 par tout le monde. Dans quelle mesure est-il raisonnable de démonter des composants ? Cela dépend de la taille du projet. Les petits projets peuvent être réalisés avec seulement quelques composants, sans même. en utilisant 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 regarder le code du Bibliothèque de composants Element. Si vous n'avez pas le temps d'écrire de tels détails, vous pouvez utiliser directement la bibliothèque Element et l'optimiser en plusieurs points

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

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

3. 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. comme la bannière. , le côté, etc., placez les composants qui apparaissent au moins deux fois sur plusieurs pages dans la mise en page, comme l'icône, le scrollTop, etc.

vue-router et l'optimisation de vuex

En plus de changer d'itinéraire, vue-router utilise le plus de logique pour traiter les autorisations. Je n'entrerai pas ici dans les détails du contrôle des autorisations. en ce qui concerne l'optimisation, il convient de mentionner que le chargement paresseux du composant

Le lien du site officiel de midi est ci-dessus, et l'exemple est le suivant

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

Ce code regroupe les trois composants Foo, Bar et Baz dans un fichier chunk nommé group-foo. Bien sûr, il s'agit d'un fichier js

et le reste peut être écrit normalement. Lorsque le site Web est chargé, il le sera automatiquement. Analysez quel morceau doit être chargé. Bien que le volume total des packages séparés devienne plus important, la vitesse de demande du premier écran seul est très rapide.

Vuex est confronté à plusieurs problèmes et solutions.

Lorsque le site Web est suffisamment grand, il existe de nombreux champs dans la partie racine d'un arbre d'état. Pour résoudre ce problème, Vuex modulaire est requis. , tel que fourni par le site officiel Une solution modulaire nous permet de configurer des modules lors de l'initialisation de vuex. Chaque module contient un état, une action, etc., qui semblent être plusieurs arbres d'état, mais sont en réalité des sous-arbres basés sur rootState. Après la subdivision, l’ensemble de la structure étatique sera clair et la gestion sera beaucoup plus facile.

En raison de la flexibilité de vuex, le codage est incohérent. La boucle fermée complète est store.dispatch('action') -> commit -> . En fait, certaines des étapes intermédiaires peuvent être omises, car le document API fournit les méthodes suivantes : mapState, mapGetters, mapActions et mapMutations. Ensuite, n'importe quelle étape peut être appelée directement dans le composant, ou vous pouvez l'appeler comme vous le souhaitez. dans le projet. Lorsque le projet est grand, nous devons considérer l'uniformité de l'utilisation de vuex. Ma suggestion est d'exécuter l'intégralité de la boucle fermée, quelle que soit la simplicité du processus, pour former un code unifié et faciliter la gestion ultérieure uniquement. sont autorisés à apparaître dans mes composants, le reste du processus est effectué dans le dossier vuex nommé store.

Sur la base du point ci-dessus, parlons de ce qu'il faut faire dans chaque processus. Il doit y avoir des incohérences dans les données front-end et back-end, soit dans la structure des données, soit dans la dénomination des champs. L'étape doit gérer la conversion des données ? Qu'en est-il de la logique ? Certaines personnes diront que n'importe quelle étape peut être réalisée, mais ce n'est pas le cas. Mes suggestions sont les suivantes

1. Avant d'envoyer l'envoi, gérez la structure des données et les noms de champs des paramètres. doivent être transmis dans le composant

2. Quand il s'agit d'action, nous sommes autorisés à faire beaucoup de choses, car cette partie prend en charge l'asynchrone, prend en charge l'état, rootState, commit, dispatch, getters. Cela montre que la responsabilité est lourde. Premièrement, si le backend nécessite d'autres modules, les données à l'intérieur doivent être intégrées aux données d'origine via la valeur rootState. L'étape suivante consiste à émettre une requête et une suggestion (attente asynchrone + axios). . Après avoir obtenu les données, effectuez le filtrage et la conversion, puis envoyez le commit à la 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中自适应处理方法

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!