使用webpack打包项目时一方面我们要防止单个文件太大，另一方面要防止文件碎片化，即打包文件太多，导致网络请求过多。所以合理的配置应该是兼顾打包文件的数量以及打包文件的个数。

what-is-webpack.png

代码分离 打包优化

在 webpack4版本之前，我们可以使用 CommonsChunkPlugin进行配置，在webpack4版本之后我们可以通过配置splitChunks来实现。splitChunks的配置选项如下：

• chunks: 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块);
• minSize: 表示在压缩前的最小模块大小；
• minChunks: 表示被引用次数；
• maxAsyncRequests: 最大的按需(异步)加载个数；
• maxInitialRequests: 最大的初始化加载个数；
• name: 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
• cacheGroups: 缓存组。

对于缓存组是一个对象，除了可以有上面的chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、name外，还有其他的一些参数：

如果不在缓存组中重新赋值，缓存组默认继承上面的选项，但是还有一些参数是必须在缓存组进行配置的。

• priority: 表示缓存的优先级；
• test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
• reuseExistingChunk: 表示可以使用已经存在的块，即如果满足条件的块已经存在就使用已有的，不再创建一个新的块。

这里对cacheGroups有些不了解，其实其是对代码拆分进行细化配置的，比如说我想将某个特定的库单独打包，我就需要配置cacheGroups，通过test过滤出要单独打包的模块。

将第三方库的代码单独打包

optimization: {
    splitChunks: {           
      cacheGroups: {
        vendors: {
          chunks: 'initial', 
          test: /[\\/]node_modules[\\/]/,          
        }
      }
    }
  }

以上代码既可以将第三方代码单独打包。

需求：如果我的代码中使用了jquery vue lodash等第三方库，我想将这三个库分别打包进不同的文件(实际项目中不推荐，此处只用于测试)，该如何设置呢？

  optimization:{
    splitChunks: {
      cacheGroups: {
        module1:{ // 键值可以自定义
          chunks:'initial', //
          test: /[\\/]node_modules[\\/]jquery/,
          name:'jquery',
       },
      module2:{
        chunks:'initial',
        test:/[\\/]node_modules[\\/]vue/,
        name:'_vue',
      },
    module3:{
      chunks:'initial',
      test:/[\\/]node_modules[\\/]lodash/,
      name:'loadash',
    }
  }
}

如上配置打包后的输出如下所示：

1.png

可以看出vue文件并没有如我们所愿打包出来，而是跟业务代码一起打包进了index.bundle.js文件，这是为什么呢？我们知道最大的初始化文件加载个数maxInitialRequests的默认值为3，也就是这个的默认值限制了vue文件的单独打包。我们做如下修改：

  optimization:{
    splitChunks: {
      maxInitialRequests: 4,
      cacheGroups: {
        module1:{ // 键值可以自定义
          chunks:'initial', //
          test: /[\\/]node_modules[\\/]jquery/,
          name:'jquery',
       },
      module2:{
        chunks:'initial',
        test:/[\\/]node_modules[\\/]vue/,
        name:'_vue',
      },
    module3:{
      chunks:'initial',
      test:/[\\/]node_modules[\\/]lodash/,
      name:'loadash',
    }
  }
}

如上配置打包后的输出如下所示：

2.png

manifest

若要将manifest单独打包，需要配置runtimeChunk选项。
runtimeChunk: {
name: 'page/manifest'
}

总结

webpack配置千千万，挨个试试又怎样。