Exemple détaillé de configuration Webpack optimisée vue-cli

Le récent projet a dépassé la période chargée de construction des infrastructures et je me suis progressivement détendu. Je vais enregistrer mes récentes mesures d'optimisation du webpack, dans l'espoir d'avoir pour effet de revoir le passé et d'apprendre le nouveau. Cet article présente principalement l'explication détaillée de la configuration du webpack basée sur l'optimisation vue-cli. L'éditeur pense que c'est assez bon, je vais donc la partager avec vous maintenant et la donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Le projet utilise le bucket de la famille vue et la configuration de build est améliorée en fonction de vue-cli. Concernant la configuration originale du webpack, vous pouvez lire cet article analyse de la configuration du webpack vue-cli#2.0 L'article explique essentiellement chaque ligne de code du fichier en détail, ce qui vous aidera à mieux comprendre le webpack.

Après avoir soigneusement résumé, mon optimisation repose essentiellement sur les points circulés sur Internet

1. Extraire les bibliothèques communes via une configuration externe, en citant cdn

2. Configurer correctement CommonsChunkPlugin

3. Faire bon usage de l'alias

4. dllplugin activer la précompilation

5. projet de construction multicœur happypack

externes

Adresse du document https://doc.webpack-china .org /configuration/externals/

Empêchez certains packages importés d'être regroupés dans des bundles et obtenez à la place ces dépendances externes au moment de l'exécution.

CommonsChunkPlugin

Adresse du document https://doc.webpack-china.org/plugins/commons-chunk-plugin/

Le plug-in CommonsChunkPlugin est une fonction facultative permettant de créer un fichier indépendant (également appelé chunk). Ce fichier comprend des modules communs de chunks à entrées multiples. En séparant les modules communs, le fichier final synthétisé peut être chargé une seule fois au début puis stocké dans le cache pour une utilisation ultérieure. Cela apporte des améliorations de vitesse car le navigateur extraira rapidement le code commun du cache au lieu de charger un fichier plus volumineux à chaque accès à une nouvelle page.

resolve.alias

Adresse du document https://doc.webpack-china.org/configuration/resolve/#resolve-alias

Créez une importation ou exigez des alias pour faciliter l'introduction du module. Par exemple, certains modules courants situés dans le dossier src/ :

Cependant, de par ma propre pratique, les trois derniers points sont les plus optimisés pour mon propre projet. L'article explique également principalement les points suivants en détail

Il s'avère que le temps nécessaire pour packager un projet est en gros d'environ 40 secondes, alors combien de temps faudra-t-il pour passer par les trois prochaines étapes d'optimisation

1. Utilisez dllplugin pour précompiler et référencer

Pourquoi devriez-vous référencer Dll en premier lieu ? Après avoir parcouru quelques articles sur Internet, j'ai découvert qu'en plus d'accélérer la construction, l'utilisation de la DLL de Webpack présente un autre avantage.

La DLL existe indépendamment après avoir été empaquetée. Tant que les bibliothèques qu'elle contient ne sont pas augmentées, diminué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. . Étant donné que les fichiers empaquetés à l'aide de Dll sont essentiellement des fichiers de bibliothèque indépendants, l'une des caractéristiques de ce type de fichiers est qu'ils ne changent pas beaucoup. Lorsque nous empaquetons normalement ces fichiers de bibliothèque dans un app.js, les modifications apportées aux autres fichiers professionnels affectent l'optimisation du cache de la construction, ce qui entraîne la nécessité de rechercher à nouveau les fichiers pertinents dans le package npm. Après avoir utilisé la DLL, tant que les bibliothèques incluses ne sont pas mises à niveau, ajoutées ou supprimées, il n'est pas nécessaire de reconditionner. Cela améliore également la vitesse de construction.

Alors comment utiliser Dll pour optimiser le projet ?

Tout d'abord, créez un fichier de configuration dll et introduisez les bibliothèques tierces requises par le projet. La caractéristique de ce type de bibliothèque est qu'elle n'a pas besoin d'être mise à jour fréquemment avec les sorties de versions et qu'elle est stable sur le long terme.

const webpack = require('webpack');
const path = require('path');

module.exports = {
 entry: {
  //你需要引入的第三方库文件
  vendor: ['vue','vuex','vue-router','element-ui','axios','echarts/lib/echarts','echarts/lib/chart/bar','echarts/lib/chart/line','echarts/lib/chart/pie',
   'echarts/lib/component/tooltip','echarts/lib/component/title','echarts/lib/component/legend','echarts/lib/component/dataZoom','echarts/lib/component/toolbox'],
 },

 output: {
  path: path.join(__dirname, 'dist-[hash]'),
  filename: '[name].js',
  library: '[name]',
 },

 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, 'dll', '[name]-manifest.json'),
   filename: '[name].js',
   name: '[name]',
  }),
 ]
};

Les paramètres de configuration de base sont fondamentalement les mêmes que ceux du webpack. Je pense que tous ceux qui ont vu l'optimisation comprendront ce que cela signifie, donc je ne l'expliquerai pas. Exécutez ensuite le code pour compiler le fichier. (Mon fichier de configuration est placé dans build, et le chemin ci-dessous doit être modifié en fonction du chemin du projet)

webpack -p --progress --config build/webpack.dll.config.js

Une fois l'exécution terminée, deux nouveaux fichiers seront générés. Des répertoires au même niveau, l'un est verdor.js généré dans le dossier dist, qui contient le code compressé de la dépendance d'entrée, l'autre est verdor-manifest.json dans le dossier dll, qui indexe chaque bibliothèque par numéro ; . Et utilisez l'identifiant au lieu du nom.

Ensuite, il vous suffit d'ajouter une ligne de code au plugin dans votre fichier de configuration webpack.

const manifest = require('./dll/vendor-manifest.json');
...
...,
plugin:[
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest,
  }),
]

À ce moment, si vous exécutez la commande webpack, vous pouvez constater que le temps a fortement chuté, passant de 40 secondes à environ 20 secondes. ? (Je ne sais pas si c'est le cas. Ce n'est pas comme ça parce que je compte sur trop de bibliothèques, je me couvre le visage manuellement).

2.compilation multithread happypack

Généralement, node.js effectue la compilation dans un seul thread, tandis que happypack démarre le multithreading du nœud pour la construction, ce qui améliore considérablement la vitesse de construction. La méthode d'utilisation est également relativement simple. En prenant mon projet comme exemple, créez un nouveau processus happypack dans le plug-in, puis remplacez l'endroit où le chargeur est utilisé par l'identifiant correspondant

var HappyPack = require('happypack');
...
...
modules:{
  rules : [
    ...
    {
      test: /\.js$/,
      loader:[ 'happypack/loader?id=happybabel'],
      include: [resolve('src')]
    },
    ...
  ]
},
...
...
plugin:[
  //happypack对对 url-loader,vue-loader 和 file-loader 支持度有限，会有报错，有坑。。。
  new HappyPack({
     id: 'happybabel',
     loaders: ['babel-loader'],
     threads: 4,//HappyPack 使用多少子进程来进行编译
  }),
  new HappyPack({
     id: 'scss',
     threads: 4,
     loaders: [
        'style-loader',
        'css-loader',
        'sass-loader',
     ],
  })
]

这时候再去执行编译webpack的代码，打印出来的console则变成了另外一种提示。而编译时间大概从20s优化到了15s左右(感觉好像没有网上说的那么大，不知道是不是因为本身js比重占据太大的缘故)。

3.善用alias

3.配合resolve，善用alias

本来是没有第三点的，只不过在搜索网上webpack优化相关文章的时候，看到用人提到把引入文件改成库提供的文件(原理我理解其实就是1.先通过resolve指定文件寻找位置，减小搜索范围；2.直接根据alias找到库提供的文件位置)。

vue-cli配置文件中提示也有提到这一点，就是下面这段代码

resolve: {
  //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
  extensions: ['.js', '.vue', '.json'],
  //模块别名定义，方便后续直接引用别名，无须多写长长的地址
  alias: {
   'vue$': 'vue/dist/vue.esm.js',//就是这行代码，提供你直接引用文件
   '@': resolve('src'),
  }
 },

然后我将其他所有地方关于vue的引用都替换成了vue$之后，比如

// import 'vue';
import 'vue/dist/vue.esm.js';

时间竟然到了12s，也是把我吓了一跳。。。

然后我就把jquery，axios，vuex等等全部给替换掉了。。。大概优化到了9s左右，美滋滋，O(∩_∩)O~~

4.webpack3升级

本来是没第四点，刚刚看到公众号推出来一篇文章讲到升级到webpack3的一些新优点，比如Scope Hoisting(webpack2升级到webpack3基本上没有太大问题)。通过添加一个新的插件

// 2017-08-13配合最新升级的webpack3提供的新功能，可以使压缩的代码更小，运行更快
...
plugin : [
  new webpack.optimize.ModuleConcatenationPlugin(),
]

不过在添加这行代码之后，构建时间并没有太大变化，不过运行效率没试过，不知道新的效果怎么样

好了基本上感觉就是以上这些效果对项目的优化最大，虽然没有到网上说的那种只要3~4秒时间那么变态，不过感觉基本8,9秒的时间也可以了。

相关推荐：

图文解析如何使用vue-cli脚手架

实例详解vue-cli vscode 配置 eslint

如何使用 vue-cli 开发多页应用方法

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!