Problèmes liés à l'optimisation de la vitesse du webpack3 dans vue-cli

Cet article présente principalement l'explication détaillée de la construction du webpack3 de vue-cli et l'optimisation complète de l'accélération. Maintenant, je le partage avec vous et vous donne une référence.

Avant-propos

Avec la mondialisation de vue, divers frameworks de composants vue sont devenus de plus en plus parfaits, du premier element-ui à vux, iview et de plus en plus de projets de haute qualité, utilisant vue pour la construction front-end est déjà une chose d'ingénierie, modulaire et agile

Parmi eux, je pense que beaucoup de gens choisiront le modèle officiel de projet d'initialisation vue-cli, puis introduiront un tiers Développer et construire en utilisant cadres et outils de composants, 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 l'optimisation fastidieuse et l'amélioration des performances de construction, c'est-à-dire passez le moins de temps possible, apportez le minimum de modifications au modèle officiel et obtenez l'amélioration maximale des performances de construction

Idées

Les premières versions de vue-cli et webpack2 étaient circulé sur Internet La configuration optimisée suivante, mais en fait, la nouvelle version de vue-cli et webpack3 n'a plus besoin d'utiliser ParallelUglifyPlugin pour remplacer UglifyPlugin (la nouvelle version d'UglifyPlugin prend déjà en charge et permet la construction parallèle multithread par défaut, donc Cette étape n'est pas nécessaire)

1. Activer le Scope Hoisting de webpack3 (la nouvelle version de vue-cli a été configurée avec webapck3, et cette configuration a été activée par défaut)

2. Faites bon usage de l'alias (la nouvelle version de vue-cli l'a déjà fait)

3. Configurez CommonsChunkPlugin pour extraire le code public (la nouvelle version de vue -cli l'a déjà fait)

4. 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 l'optimisation

Référence sur demande

1. Activer le projet de construction multicœur happypack

2. Modifier la configuration de la carte source

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

4. Pratique

1. 🎜>

1.1 Presque tous les frameworks de composants tiers fournissent une méthode de référence à la demande pour les composants. En prenant iview comme exemple, en utilisant le plug-in babel-plugin-import, les composants peuvent être chargés sur. la demande et la taille du fichier peut être réduite. Il vous suffit de modifier le fichier .babelrc

1.2 et puis comme ceci L'introduction de composants à la demande peut réduire la taille

npm install babel-plugin-import --save-dev

// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

2. Activer le projet de construction multicœur happypack

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

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

3. Modifier la configuration de la carte source

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.1 Modifiez d'abord le fichier /config/index.js

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

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

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

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

C'est l'étape la plus compliquée et la plus évidente pour améliorer le 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 Ajouter build/webpack. js et configurez les modules qui nécessitent des DLL distinctes

4.2 Ajoutez les plug-ins suivants à build/webpack.dev.conf.js et build/webpack.prod.conf.js

4.3 Ajouter une commande dans /package.json

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
   }
  })
 ]
}

4.4 Ajouter une importation DLL JS dans /index.html (doit être introduit en premier)

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

4.5 Exécuter la construction

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

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

Postscript

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

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 semble Ce n'est toujours pas simple, mais c'est déjà l'optimisation la plus simple. Il y a encore d'autres trucs et astuces qui n'ont pas été développés, car je pense que trop de configuration d'optimisation n'a pas d'importance, mais cela apportera trop de problèmes au système. Projet. Redondances et complications multiples

L'effet réel de construction de test de la configuration ci-dessus est réduit des 13 secondes d'origine à environ 6 secondes, et le déploiement à chaud est au niveau de la milliseconde

La chose la plus importante. Autrement dit, 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. pour modifier la configuration. , vous pouvez obtenir plus de 2 fois la vitesse de chaque build. N'êtes-vous pas un peu excité ? :)

Laissez-moi dire quelques mots de plus ici. webpack2 à webpack3 est personnellement assez décevant, car il n'a pas encore fondamentalement résolu le problème d'une configuration trop complexe. En tant que produit construit dans le but d'occuper tous les projets web du monde, il doit être considéré davantage sous l'angle de la facilité. d'utilisation/d'humanité

Chaque fois que je regarde les différents fichiers .babelrc, .postcssrc.js... et divers fichiers .conf du projet webpack, et même divers fichiers principaux, d'index et d'application, je peux Je ne peux m'empêcher de penser à Tucao, pourquoi la construction frontale s'est-elle développée ainsi ? Dans un bon projet, plus d'une douzaine de fichiers de configuration sont-ils vraiment nécessaires ? 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

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Utilisez la fonction de découpage personnalisée de js pour supprimer les espaces aux deux extrémités

Principe de fonctionnement de JavaScript

Sélectionner tout et inverser la sélection dans vue

Explication détaillée de l'utilisation de Jest pour tester les composants natifs de réaction

Sélectionner toute l'implémentation données dans vue Liaison et acquisition

Utilisez le plug-in de temps dans mint-ui et obtenez la valeur de sélection

VUE2 réalise le lien secondaire entre la province et la ville sélection

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!