Comment implémenter l'optimisation du packaging du projet webpack2 dans vue-cli

Je vais maintenant partager avec vous un article sur l'optimisation du packaging du projet vue-cli webpack2, qui a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Réduire la portée de la recherche de fichiers

Configurer solve.modules

Resolve.modules de Webpack Configurer le emplacement de la bibliothèque de modules (c'est-à-dire node_modules). Lorsque l'import 'vue' apparaît dans js qui n'est pas un chemin relatif ou absolu, il sera trouvé dans le répertoire node_modules. Cependant, la configuration par défaut sera trouvée via une recherche récursive ascendante, mais il n'y a généralement qu'un seul node_modules dans le répertoire du projet, et il se trouve dans le répertoire racine du projet. Afin de réduire la portée de la recherche, vous pouvez directement spécifier le chemin complet de. node_modules; de même, pour les alias (la même chose s'applique à la configuration de `alias) :

function resolve (dir) {
 return path.join(__dirname, '..', dir)
}
module.exports = {
 resolve: {
 extensions: ['.js', '.vue', '.json'],
 modules: [
  resolve('src'),
  resolve('node_modules')
 ],
 alias: {
  'vue$': 'vue/dist/vue.common.js',
  'src': resolve('src'),
  'assets': resolve('src/assets'),
  'components': resolve('src/components'),
  // ...
  'store': resolve('src/store')
 }
 },
 ...
}

 Définir raisonnablement le test, l'inclusion et l'exclusion

test : conditions qui doit être rempli (expression régulière, non Ajouter des guillemets pour correspondre aux fichiers à traiter)

exclure : Conditions qui ne peuvent pas être remplies (exclure les répertoires qui ne sont pas traités)

inclure : Le chemin ou un tableau de fichiers que le fichier importé sera converti par le chargeur (put Les répertoires à traiter sont inclus)

Cela peut réduire les traversées inutiles et ainsi réduire la perte de performances.

Remplacer l'outil de compression de code

Le plug-in UglifyJS fourni par Webpack par défaut est lent en raison de la compression à un seul thread

webpack-parallel ; -uglify- Le plugin plugin peut exécuter le plugin UglifyJS en parallèle, permettant une utilisation plus complète et raisonnable des ressources CPU, ce qui peut réduire considérablement le temps de construction

Bien sûr, le plugin doit être utilisé dans l'environnement de production ; plutôt que l'environnement de développement. Après avoir installé le plugin, procédez comme suit Configuration :

// 删掉webpack提供的UglifyJS插件
// new webpack.optimize.UglifyJsPlugin({
// compress: {
//  warnings: false,
//  drop_console: true
// },
// sourceMap: true
// }),
// 增加 webpack-parallel-uglify-plugin来替换
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
 cacheDir: '.cache/', // 设置缓存路径，不改动的调用缓存，第二次及后面build时提速
 uglifyJS:{
 output: {
  comments: false
 },
 compress: {
  warnings: false
 }
 }
})

J'ai aussi essayé le même type de plug-in webpack-uglify-parallel, mais il n'était pas aussi efficace que webpack-. parallel-uglify-plugin (cela peut varier d'un projet à l'autre, vous pouvez l'utiliser à des fins de comparaison dans votre projet) ).

Le package produit par le plug-in webpack-parallel-uglify-plugin est légèrement plus grand (mais pas évident) que celui d'UglifyJsPlugin par rapport à la taille accrue, j'ai choisi de rechercher la vitesse (après l'avoir utilisé, il est passé de 40 secondes à 40 secondes à 19 secondes).

Copier les fichiers statiques

Utilisez le plug-in copy-webpack-plugin : copiez les fichiers du dossier spécifié dans le répertoire spécifié ;

var CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
 ...
 // copy custom static assets
 new CopyWebpackPlugin([
 {
  from: path.resolve(__dirname, '../static'),
  to: config.build.assetsSubDirectory,
  ignore: ['.*']
 }
 ])
]
DllPlugin & DllReferencePlugin

Le concept de Dll doit être emprunté à la dll du système Windows. Un package dll est une bibliothèque purement dépendante. Il ne peut pas s’exécuter seul et est utilisé pour le référencer dans votre application.

Lors de l'empaquetage d'une dll, Webpack créera un index de toutes les bibliothèques incluses et les écrira dans un fichier manifeste. Lors de l'empaquetage, le code qui fait référence à la dll (utilisateur de la dll) n'a besoin que de lire ce fichier manifeste. c'est ça.

1. Ajoutez le fichier webpack.dll.conf.js sous le dossier de construction du projet avec le contenu suivant

var path = require('path')
var webpack = require('webpack')
module.exports = {
 entry: {
 vendor: [ // 这里填写需要的依赖库
  'babel-polyfill',
  'axios',
  'vue/dist/vue.common.js',
  'vue-router',
  'pingpp-js',
  "region-picker"
 ]
 },
 output: {
 path: path.resolve(__dirname, '../static/js'),
 filename: '[name].dll.js',
 library: '[name]_library'
 },
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader'
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: /node_modules/
  }
 ]
 },
 plugins: [
 new webpack.optimize.ModuleConcatenationPlugin(),
 new webpack.DllPlugin({
  path: path.join(__dirname, '.', '[name]-manifest.json'),
  libraryTarget: 'commonjs2',
  name: '[name]_library'
 }),
 new webpack.optimize.UglifyJsPlugin({
  compress: {
  warnings: false
  }
 })
 ]
}

2. Ajoutez la section plugin dans le fichier webpack.prod.conf.js :

plugins: [
 ...
 // copy custom static assets
  new webpack.DllReferencePlugin({
    context: path.resolve(__dirname, '..'),
    manifest: require('./vendor-manifest.json')
  })
]

3. Ajoutez index.html dans le répertoire racine du projet Ajoutez le fichier :

<body>
  <p id="app"></p>
  <!-- built files will be auto injected -->
  <script src="<%= webpackConfig.output.publicPath %>spa/js/vendor.dll.js"></script>   //添加这句，路径可根据所需修改
</body>

4. Ajoutez la commande pour empaqueter la dll dans package.json

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

5. Séquence de commandes

npm run build:dll //打包一次之后依赖库无变动不需要执行
npm run build

Avantages

La DLL est indépendante après l'empaquetage Oui, tant que les bibliothèques qu'elle contient ne sont pas ajoutées, supprimées ou mises à niveau, le hachage ne changera pas, de sorte que le code de la DLL en ligne n'a pas besoin d'être mis à jour fréquemment avec les versions.

Une fois le code de la partie App modifié, il vous suffit de compiler le code de la partie App et la partie DLL. Tant que les bibliothèques incluses ne sont pas augmentées, diminuées ou mises à niveau, il n'est pas nécessaire de reconditionner. Cela améliore également considérablement la vitesse de chaque compilation.

Supposons que vous ayez plusieurs projets qui utilisent les mêmes bibliothèques dépendantes, ils peuvent partager une DLL.

19s->15s

Définissez le cacheDirectory de babel sur true

Modifiez babel-loader dans webpack.base.conf.js :

loader: 'babel-loader?cacheDirectory=true',

15s->14s

Set noParse

Si vous êtes sûr qu'il n'y a pas d'autres nouvelles dépendances dans un module, vous pouvez configurer ceci élément, Webpack n'analysera plus les dépendances de ce fichier, ce qui améliorera les performances des bibliothèques de classes relativement volumineuses. Pour plus de détails, veuillez consulter la configuration suivante :

module: {
 noParse: /node_modules\/(element-ui\.js)/,
 rules: [
  {
   ...
  }
}
happypack

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

Articles associés :

Contrôle des autorisations utilisateur dans Vue2.0

Paiement WeChat via vue.js

Explication détaillée de la façon d'implémenter vuex (tutoriel détaillé)

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!