Comment optimiser la configuration du webpack

Cette fois, je vais vous montrer comment optimiser la configuration du webpack et quelles sont les précautions pour optimiser la configuration du webpack. Ce qui suit est un cas pratique, jetons un coup d'œil.

Le récent projet a dépassé la période chargée de construction d'infrastructures, et il s'est 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. .

Le projet utilise le bucket de la famille Vue et la configuration de construction 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 se base essentiellement sur les points diffusés sur Internet

1. Extrayez les bibliothèques communes via la configuration externe, reportez-vous au cdn

2. Configurez correctement CommonsChunkPlugin

3. Faites 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 de l'extérieur 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 plusieurs fragments d'entrée. module public. 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 des alias pour l'importation ou require pour faciliter l'importation de modules. Par exemple, certains modules courants situés sous le dossier src/ :

Cependant, grâce à 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 emballer un projet est en gros d'environ 40 secondes. 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 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.

Une fois la DLL empaquetée, elle existe indépendamment tant que les bibliothèques qu'elle contient ne sont pas ajoutées, supprimées ou mises à niveau, le hachage ne changera pas. Par conséquent, 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, en raison de modifications apportées à d'autres fichiers professionnels, l'optimisation du cache de la build est affectée, ce qui nous oblige à rechercher à nouveau les fichiers associés dans le package npm. temps. . Après avoir utilisé la DLL, tant que la bibliothèque incluse n'a pas été mise à jour, Augmentez ou diminuez, pas besoin de reconditionner. Cela améliore également la vitesse de construction.

Alors comment utiliser la Dll pour optimiser le projet

Tout d'abord, créez un dll fichier de configuration et introduisez les bibliothèques tierces nécessaires au 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 lu des informations sur 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 au même niveau du répertoire. L'un est verdor.js généré dans le dossier dist, qui contient le code après que la dépendance d'entrée vient d'être compressée ; le dossier dll. manifest.json, indexe chaque bibliothèque par numéro et utilise l'identifiant au lieu du nom.

接下去你只要去你的webpack配置文件的里的plugin中添加一行代码就ok了。

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

这时候再执行webpack命令，可以发现时间直接从40秒锐减到了20s左右，整整快了一倍有木有(不知道是不是因为自己依赖库太多了才这样的，手动捂脸)。

2.happypack多线程编译

一般node.js是单线程执行编译，而happypack则是启动node的多线程进行构建，大大提高了构建速度。使用方法也比较简单。以我项目为例,在插件中new一个新的happypack进程出来，然后再使用使用loader的地方替换成对应的id

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秒的时间也可以了。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Angular 4中显示CSS样式

vue综合组件通信使用案例

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!