作者：好学习吧丶
链接：https://juejin.cn/post/6844904174937718792
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前言

在大家的日常开发中，特别是开发大型项目，大家有没有每次打包想要骂娘的冲动！反正我是很痛苦，每次打包20分钟起，这漫长的等待时间，让人非常焦虑，遇见一些特殊问题（比如测试微信分享），必须要打包部署，看效果，你会发现，一天时间全部浪费在打包上，真所谓改代码两分钟，打包代码两小时，于是闲暇之余，研究了一下webpck打包机制，并且通过几个小插件和一些技巧成功的减少公司项目的打包时间，虽然打包时间没有断崖式的减少，但是能少一分钟，是一分钟吧，下面我们一起来研究一下webpack的性能优化，以及体积优化！

1、提升基础环境版本

在项目中，如果发现脚手架打包缓慢，体积又臭又大，那么，升级技术环境是提升的最快方式，比如node环境，比如升级脚手架版本，效果会有显著提升，而且是最廉价的优化方式。

2、使用include或者exclude配置，来避免重复打包

在我们的日常开发中，我们引入的一些插件，类库，都是被打包过了的，那么我们用babel去做编译的时候，就需要配置一下，给已经编译过的语法剔除掉，这样就能减少打包时间，在此，科普一下，我们在使用插件的时候webpack是怎么做的，比如我们在项目中去引入jq插件

  1. import $ from 'jquery'

首先当我们取用esmodel去引用jquery的时候npm搜索会先从当前目录的node_modules中找，找不到。就往上一级目录找node_modules。一直往上找到当前磁盘。如果都没有。才报错。当找到node_modules包之后他回去找package.json文件，在文件中确入口文件，然后找到入口文件去加载，当加载后发现他其实已经是一个已经编译过的文件了

这是一个编译过的es5的代码，因为你可以看到熟悉的原型对象，那我我们应该怎么使用include，或者exclude,比如我们配置webpack的时候我们在babel-loader中去配置：

  1. { 
  2.             test: /\.js$/, 
  3.             //使用include来指定编译文件夹
  4.             include: path.resolve(__dirname, '../src'),
  5.             //使用exclude排除指定文件夹
  6.             exclude: /node_modules/
  7.             use: [{
  8.                 loader: 'babel-loader'
  9.             }]
  10.         }

当然还能使用noParse指定文件，避免重复打包

3、合理的利用缓存来减少打包时间

还拿这个babel-loader来举例

  1. { 
  2.             test: /\.js$/,
  3.             use: [{
  4.                 //如果文件没被改动则使用缓存
  5.                 loader: 'babel-loader?chaheDirectory'
  6.             }]
  7.         }

所以，我们一些公用不改动的库，就是可使用当前方式去打包，除了有这个技巧呢还有个cache-loader，也能开启缓存，用法非常简单，在开销较大的loader前使用即可

  1.  {
  2.         test: /\.js$/,
  3.         use: [
  4.           'cache-loader',
  5.           'babel-loader'
  6.         ],
  7.         include: path.resolve('src')
  8.       }

4、合理的使用plugin，减少打包时间和体积

在我们搭建webpack脚手架的时候，我们会发现必须要使用一些plugin才能实现我们的需求，那我们应该怎么选择呢？

  • 首先我们尽量选择官方推荐的plugin，这些插件经过了官方的测试又可靠的性能
  • 其次合理的使用这些插件，避免出现引入无用模块和代码，

举一些例子，比如在我们使用moment的库的时候，在打包的手webpack默认会给整个库都引入进来，这样就会导致我们的库非常大，我们可以使用IgonrePlugin忽略插件的某个无用的文件夹，这样就能大大的减少打包体积，在比如，我们在使用压缩css的OptimizeCSSAssetsPlugin的时候只需要在生产环境下对代码做压缩，那么我们在开发环境下就不需要这个插件，这样就能有效的缩短压缩时间

5、合理配置relosve，防止减慢打包时间

我们在平常引入es6模块的时候，发现不用写文件后缀也能引用进来，其实，这就是webpack的relosve配置参数给我们提供的便利

  1. //这样配置我们就不用写后缀了
  2. resolve:{
  3.     extensions:['js','jsx']
  4. }

但是正由于这样的便利，大家为了方便，就会配置许多后缀，比如jpg、css、png 等，由于不写后缀，他在查找的时候，会给 extensions数组中的所有后缀遍历完了找不到才去报错，这样就大大增加了查找时间，所以，大家还是要合理配置

6、启用多进程打包（重点有坑）

开启多进程打包主要有三个方法，使用happy和使用thread-loader，

thread-loader

hread-loader 使用起来也非常简单，只要把 thread-loader 放置在其他 loader 之前即可，这样一来，按照官方的解释之后的 loader 就会在一个单独的 worker 池(worker pool)中运行，并且还支持之定义配置，方便性能优化

  2.  {
  3.         test: /\.js$/,
  4.         exclude: /node_modules/,
  5.         // 创建一个 js worker 池
  6.         use: [ 
  7.         //直接在loader之前使用
  8.           'thread-loader',
  9.           'babel-loader'
  10.         ] 
  11. },
  12.     //自定义配置行
  13.     use[
  14.     {
  15.     loader: "thread-loader",
  16.     // loaders with equal options will share worker pools
  17.     // 设置同样option的loaders会共享
  18.     options: {
  19.       // worker的数量，默认是cpu核心数
  20.       workers: 2,
  21.       // 一个worker并行的job数量，默认为20
  22.       workerParallelJobs: 50,
  23.       // 添加额外的node js 参数
  24.       workerNodeArgs: ['--max-old-space-size=1024'],
  25.       // 允许重新生成一个dead work pool
  26.       // 这个过程会降低整体编译速度
  27.       // 开发环境应该设置为false
  28.       poolRespawn: false,
  29.       //空闲多少秒后，干掉work 进程
  30.       // 默认是500ms
  31.       // 当处于监听模式下，可以设置为无限大，让worker一直存在
  32.       poolTimeout: 2000,
  33.       // pool 分配给workder的job数量
  34.       // 默认是200
  35.       // 设置的越低效率会更低，但是job分布会更均匀
  36.       poolParallelJobs: 50,
  37.       }
  38.     }
  39.     'babel-loader'
  40.     ]

ParallelUglifyPlugin

我们知道压缩 JS 需要先将代码解析成 AST 语法树，然后需要根据复杂的规则去分析和处理 AST，最后将 AST 还原成 JS，这个过程涉及到大量计算，因此比较耗时，那么我们使用ParallelUglifyPlugin这个插件就能开启多进程压缩JS使用方式也非常简单

  1. //引入插件
  2. const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
  3.  plugins: [
  4.   // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
  5.         new ParallelUglifyPlugin({
  6.             // 传递给 UglifyJS 的参数
  7.             // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
  8.             uglifyJS: {
  9.                 output: {
  10.                     beautify: false, // 最紧凑的输出
  11.                     comments: false, // 删除所有的注释
  12.                 },
  13.                 compress: {
  14.                     // 删除所有的 `console` 语句，可以兼容ie浏览器
  15.                     drop_console: true,
  16.                     // 内嵌定义了但是只用到一次的变量
  17.                     collapse_vars: true,
  18.                     // 提取出出现多次但是没有定义成变量去引用的静态值
  19.                     reduce_vars: true,
  20.                 }
  21.             }
  22.         })
  23.  ]

ok,基本我们的多进程的优化到这里了，之所以说有坑，是由于好多人配置以后发现打包时间不但没有加快反而慢了，这是由于如果项目较小，打包开启多进程会有额外的性能开销，反而将时间拖慢了，所以，在这里如果项目较大，那么我们推荐使用（我们公司的项目确实是快了一点），如果项目较小，还是算了，杀鸡焉能用牛刀。

7、开发中使用热更新替换自动刷新

我们在日常开发中，由于每次改完代码都要刷新页面，但是如果项目体积过大，没事刷新就得喝几口水，才能出来，那是相当痛苦。
其实我们可以使用热更新，来代替自动刷新，来提高开发体验，不要问我为什么，我体验过，那种每次改代码就要等十秒的感觉（我们公司的angular老项目就这样），那么热更新应该怎么使用呢？同样也非常简单引入插件即可

  1. //引入webpack
  2. const webpack = require('webpack');
  3. //使用webpack提供的热更新插件
  4.    plugins: [
  5.    new webpack.HotModuleReplacementPlugin()
  6.     ],
  7.     //最后需要在我们的devserver中配置
  8.      devServer: {
  9. +     hot: true
  10.     },

8、使用DllPlugin插件，优化提高打包时间

当我们使用一些社区的比较稳定的库的时候，比如react 比如vue，比如jquery 你会发现他几个月都不会更新一次，那么，我们就不需要重复打包了，只需要打包一次，下次打包只引用即可，那我应该怎么做呢，其实在webpack4的版本中，已经集成DllPlugin插件，我们只需要配置即可。
首先第一步我们要编写一个dll的配置文件，去打包dll文件

  1. const path = require('path')
  2. const DllPlugin = require('webpack/lib/DllPlugin')
  3. const { srcPath, distPath } = require('./paths')
  5. module.exports = {
  6.   mode: 'development',
  7.   // JS 执行入口文件
  8.   entry: {
  9.     // 以 React为例 模块的放到一个单独的动态链接库
  10.     react: ['react', 'react-dom']
  11.   },
  12.   output: {
  13.     // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
  14.     // 也就是 entry 中配置的 react 和 polyfill
  15.     filename: '[name].dll.js',
  16.     // 输出的文件都放到 dist 目录下
  17.     path: distPath,
  18.     // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
  19.     // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
  20.     library: '_dll_[name]',
  21.   },
  22.   plugins: [
  23.     // 接入 DllPlugin
  24.     new DllPlugin({
  25.       // 动态链接库的全局变量名称，需要和 output.library 中保持一致
  26.       // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
  27.       // 例如 react.manifest.json 中就有 "name": "_dll_react"
  28.       name: '_dll_[name]',
  29.       // 描述动态链接库的 manifest.json 文件输出时的文件名称
  30.       path: path.join(distPath, '[name].manifest.json'),
  31.     }),
  32.   ],
  33. }

第二步在webpack中配置映射关系，防止打包时再次引用npm包

  1. // 第一，引入 DllReferencePlugin
  2. const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
  3.  plugins: [
  4.   //告诉 Webpack 使用了哪些动态链接库
  5.         new DllReferencePlugin({
  6.             // 描述 react 动态链接库的文件内容
  7.             manifest: require(path.join(distPath, 'react.manifest.json')),
  8.         }),
  9.  ]

第三步在我们的html中引用打包的公用模块，因为当我们在配置DllReferencePlugin的时候，他底层其实是在执行的时候在window中去寻找这个包，所以必须引入进来打包后的这个文件，那么相应的这个公用模块也会在window下挂一个全局变量，引入方式我们可以使用AddAssetHtmlWebpackPlugin插件引入，也可以手动引入
以上就可以大幅提高打包时间，但是由于dllPlugin的使用是为了解决开发时的打包时间缓慢问题，在线上环境时，建议还是不要使用，统一原流程打包即可

9、一些项目体积以及运行时的性能优化

部分代码使用懒加载，加快首屏加载时间

懒加载是老生常谈的问题了，这是性能优化的必要手段，当页面中的大型，并且不太重要的代码，我们就可以使用懒加载的方式去异步加载进来，这样便可以提前达到渲染条件，具体懒加载怎么使用：

  1. import('./util.js').then(data=>{  //  懒加载
  2.         console.log(data.default)  //拿到加载的文件里面的数据信息  输出到控制台上
  3.     })

小图片使用base64格式，不使用用网络请求

在我们打包时，如果遇见小型图片，我们可以直接转换成base64位格式，减少http请求就能达到前端性能优化的目的，使用方式非常简单

  1. rules: [
  2.             // 图片 - 考虑 base64 编码的情况
  3.             {
  4.                 test: /\.(png|jpg|jpeg|gif)$/,
  5.                 use: {
  6.                     loader: 'url-loader',
  7.                     options: {
  8.                         // 小于 5kb 的图片用 base64 格式产出
  9.                         // 否则，依然延用 file-loader 的形式，产出 url 格式
  10.                         limit: 5 * 1024,
  11.                         // 打包到 img 目录下
  12.                         outputPath: '/img1/',
  13.                         // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
  14.                         // publicPath: 'http://cdn.abc.com'
  15.                     }
  16.                 }
  17.             },
  18.         ]

打包时合理使用hash，如果没改动的文件，命中缓存

当我们在打包时，使用hash计算文件变动，如果文件被改变，则hash的值改变，在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的，使用方式如下：

  1. output: {
  2.         filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 后缀
  3.         path: distPath
  4.     },

提取公用代码，代码分割

当我们在打包时，提取公用代码，并且实现代码分割，那么我便可以提取多个模块的公共代码，只需要打包一次，这样我们便能实现更小的代码体积！怎么使用呢，webpack给我们提供了optimization属性，去配置

  2.     optimization: {
  4.         // 分割代码块
  5.        splitChunks: {
  6.         chunks: "async”,//默认作用于异步chunk，值为all/initial/async/function(chunk),值为function时第一个参数为遍历所有入口chunk时的chunk模块，chunk._modules为chunk所有依赖的模块，通过chunk的名字和所有依赖模块的resource可以自由配置,会抽取所有满足条件chunk的公有模块，以及模块的所有依赖模块，包括css
  7.         minSize: 30000,  //表示在压缩前的最小模块大小,默认值是30kb
  8.         minChunks: 1,  // 表示被引用次数，默认为1；
  9.          maxAsyncRequests: 5,  //所有异步请求不得超过5个
  10.         maxInitialRequests: 3,  //初始话并行请求不得超过3个
  11.         automaticNameDelimiter:'~',//名称分隔符，默认是~
  12.         name: true,  //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔
  13.         cacheGroups: { //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
  14.          common: {
  15.          name: 'common',  //抽取的chunk的名字
  16.          chunks(chunk) { //同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取
  17.          },
  18.          test(module, chunks) {  //可以为字符串，正则表达式，函数，以module为维度进行抽取，只要是满足条件的module都会被抽取到该common的chunk中，为函数时第一个参数是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组。自己尝试过程中发现不能提取出css，待进一步验证。
  19.          },
  20.         priority: 10,  //优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中
  21.        minChunks: 2,  //最少被几个chunk引用
  22.        reuseExistingChunk: true，//  如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
  23.        enforce: true  // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
  24.        }
  25.     }
  26. }
  27.         }

使用 tree-shaking 去除无用代码减少代码体积

tree-shaking 的目的就是去除被引用但是没有被使用的代码，在webpack4中，如果一个文件中引用多个函数，却使用一个函数，那么多个函数都会被打包，据说webpack5中，能解析出更强大的依赖图谱，去除最终没有被使用的代码

// a.js
export const a = 'a';
export const b = 'b';

// b.js
import * as c from "./a";
export { c };

// index.js
import * as module from "./b";
console.log(module.c.a);

比如上述代码最终是这个b变量是不会被打包的，说了半天怎么开启呢?

 mode: 'production',