Comment accélérer et optimiser le code vue-cli

Cette fois, je vais vous montrer comment accélérer et optimiser le code vue-cli Quelles sont les précautions pour accélérer et optimiser le code vue-cli. cas, jetons un coup d'oeil.

Avant-propos

Avec la mondialisation de Vue, divers frameworks de composants Vue sont devenus de plus en plus parfaits, depuis les premiers éléments-ui jusqu'à vux, iview et d'autres projets de haute qualité, l'utilisation de Vue pour la construction frontale est déjà une tâche d'ingénierie, Modularisation, choses agiles

Parmi eux, je pense que de nombreuses personnes choisiront le modèle de projet d'initialisation officiel vue-cli, puis le développeront et le construiront en introduisant des frameworks et des outils de composants tiers. Je recommande personnellement fortement cette approche. Cependant, le modèle de projet initialisé par vue-cli s'adresse à tous les développeurs après tout, et il y aura certains compromis en termes de compatibilité. Je pense que de nombreuses personnes ont recherché divers articles sur l'optimisation de la construction de webpacks, mais beaucoup d'entre eux sont soit trop anciens, soit peu rigoureux

Cet article espère trouver un équilibre entre une optimisation fastidieuse et une amélioration des performances de build, c'est-à-dire passer le moins de temps et apporter le moins de modifications au modèle officiel pour obtenir une amélioration maximale des performances de build

Pensées

Dans les premières versions de vue-cli et webpack2, les configurations optimisées suivantes circulaient sur Internet, mais en fait, les nouvelles versions de vue-cli et webpack3 ne nécessitent plus

1. Utilisez ParallelUglifyPlugin pour remplacer UglifyPlugin (la nouvelle version d'UglifyPlugin prend déjà en charge et active la construction parallèle multithread par défaut, cette étape n'est donc pas nécessaire)

Activer Scope Hoisting de webpack3 (la nouvelle version de vue -cli a été configuré avec webapck3, Et cette configuration a été activée par défaut)
Faites bon usage de l'alias (la nouvelle version de vue-cli a déjà fait ce travail)
Configurer CommonsChunkPlugin pour extraire le code public (la nouvelle version de vue-cli l'a déjà fait)

Pour la nouvelle version de vue-cli et webpack3, la configuration simple suivante peut augmenter la vitesse de construction d'au moins 2 fois après optimisation

1. Référence sur demande

Activer le projet de construction multicœur happypack
Modifier la configuration de la carte source
Activer DllPlugin et fichiers de bibliothèque précompilés DllReferencePlugin

Pratique

1. Devis sur demande

1.1 Presque tous les frameworks de composants tiers fournissent des méthodes de référence à la demande pour les composants. En prenant iview comme exemple, en utilisant le plug-in babel-plugin-import, vous pouvez charger des composants à la demande et réduire la taille du fichier. pour modifier le fichier .babelrc

npm install babel-plugin-import --save-dev
// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

1.2 Introduisez ensuite les composants nécessaires pour réduire la taille

import { Button } from 'iview'
Vue.component('Table', Table)

2. Activer le projet de construction multicœur happypack

Après avoir installé happypack, modifiez le fichier /build/webpack.base.conf.js

npm install happypack --save-dev
// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
 new HappyPack({
  id: 'happy-babel-js',
  loaders: ['babel-loader?cacheDirectory=true'],
  threadPool: happyThreadPool,
 })
 ]
// 修改引入loader
{
 test: /\.js$/,
 // loader: 'babel-loader',
 loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
 include: [resolve('src'), resolve('test')]
}

3. Modifier la configuration de la carte source

3.1 Modifiez d'abord le fichier /config/index.js

// /config/index.js
dev环境：devtool: 'eval'（最快速度）
prod环境：productionSourceMap: false（关闭source-map）

3.2 Modifiez ensuite le fichier /src/main.js et désactivez les informations de débogage de l'environnement de production

// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode

4. Activer les fichiers de bibliothèque précompilés DllPlugin et DllReferencePlugin

C'est l'étape la plus compliquée et la plus évidente pour améliorer l'effet. Le principe est de compiler et de conditionner les fichiers de bibliothèques tierces séparément une fois. Il n'est pas nécessaire de compiler et de conditionner les bibliothèques tierces dans les versions suivantes

4.1 Ajoutez le fichier build/webpack.dll.config.js et configurez les modules qui doivent être DLL séparément

4.2 Ajoutez les plug-ins suivants

const path = require("path")
const webpack = require("webpack")
module.exports = {
 // 你想要打包的模块的数组
 entry: {
  vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
 },
 output: {
  path: path.join(dirname, '../static/js'), // 打包后文件输出的位置
  filename: '[name].dll.js',
  library: '[name]_library'
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(dirname, '.', '[name]-manifest.json'),
   name: '[name]_library',
   context: dirname
  }),
  // 压缩打包的文件
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

à build/webpack.dev.conf.js et build/webpack.prod.conf.js 4.3 Ajoutez la commande

new webpack.DllReferencePlugin({
  context: dirname,
  manifest: require('./vendor-manifest.json')
})

dans /package.json 4.4 Ajouter une introduction JS basée sur DLL dans /index.html (doit être introduit en premier)

"dll": "webpack --config ./build/webpack.dll.config.js"

4.5 Exécuter le build

<script src="/static/js/vendor.dll.js"></script>

npm run dll（这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js）
npm run dev 或 npm run build

Post-scriptum

Une fois les quatre étapes principales ci-dessus terminées, nous avons terminé l'optimisation et l'amélioration de la construction du projet de modèle vue-cli. Bien que cela ne semble toujours pas simple, c'est déjà l'optimisation la plus simple, et il y a plus de trucs et astuces par coïncidence. Je ne l'ai pas étendu car je pense que trop de configuration d'optimisation n'a que peu d'importance, mais apportera trop de redondance et de complexité au projet

L'effet réel de la construction de tests de la configuration ci-dessus a été réduit des 13 secondes d'origine à environ 6 secondes, et le déploiement à chaud a même duré des millisecondes

La chose la plus importante est que la configuration la plus simple peut être facilement reconfigurée et utilisée après la mise à niveau future de vue-cli et webpack vers de nouvelles versions. Après une configuration compétente, il ne faut que 5 minutes environ pour restaurer la configuration. Le simple fait de modifier la configuration en 5 minutes peut augmenter la vitesse de chaque build de plus de 2 fois. N'êtes-vous pas un peu excité :)

. Permettez-moi de dire quelques mots supplémentaires ici. En fait, la mise à niveau de webpack2 vers webpack3 est assez décevante, car elle ne résout toujours pas fondamentalement le problème d'une configuration trop complexe en tant que produit construit dans le but d'occuper tous les projets Web. dans le monde, cela devrait être considéré davantage du point de vue de la facilité d'utilisation/de l'humanité

Chaque fois que je regarde les différents .babelrc, .postcssrc.js... et divers .confs dans les fichiers du projet webpack , et même divers fichiers principaux, d'index et d'application. Je ne peux m'empêcher de me plaindre de la raison pour laquelle la construction frontale s'est développée ainsi. Dans un bon projet, il y a plus d'une douzaine de fichiers de configuration<.> , est-ce vraiment nécessaire ? Au départ, je pensais que webpack3 simplifierait tout cela, mais ce n'est pas le cas. Mais comme il n'y a aucun moyen de le changer pour le moment, ce que nous pouvons faire est de comprendre les principes autant que possible et de faire de notre mieux pour simplifier/. optimiser Je pense que vous maîtrisez la méthode de lecture de cet article. Pour plus de passionnant, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

HTML+JS pour implémenter une horloge numérique roulante

Comment utiliser la garde de navigation de VueRouter

Explication détaillée des étapes pour implémenter la pagination des tableaux à l'aide de vue+element

                                    

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!