webpack Code Splitting详解

webpack4 废除了CommonsChunkPlugin 引入了 optimization.splitChunks

如果在webpack4中使用了weppack3的CommonsChunkPlugin 会出现以下报错：

（运行配置文件 webpack3.config.js)Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks

代码分割（Code Splitting）

将一个文件分割成多个文件：因为浏览器会缓存你的代码，每当你对某一文件做点改变，访问你站点的人们就要重新下载它，包括依赖。如果你将（这些依赖）分离成单独的文件，访问者就无需多次重复下载它们了。

使用webpack生成一个或多个包含你源代码最终版本的“打包好的文件”（bundles），（概念上我们当作）它们由（一个一个的）chunks组成。

​ 作用：

​ 提取公用代码，减少代码的冗余，

​ 提高用户的加载速度

​ 单页面减少下载，多页面可以使用缓存

配置项

module.exports = {
 	//...
 	optimization: {
  		splitChunks: {
   			chunks: 'async', 
   			minSize: 30000,
   			minChunks: 1,
   			maxAsyncRequests: 5,
   			maxInitialRequests: 3,
   			automaticNameDelimiter: '~', 
   			name: true,
   			cacheGroups: {}
  		}
 	}
}

• chunks: 表示哪些代码需要优化，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为async
• minSize: 表示在压缩前的最小模块大小，默认为30000
• minChunks: 表示被引用次数，默认为1
• ````maxAsyncRequests```: 按需加载时候最大的并行请求数，默认为5
• maxInitialRequests: 一个入口最大的并行请求数，默认为3
• automaticNameDelimiter: 命名连接符
• name: 拆分出来块的名字，默认由块名和hash值自动生成
• cacheGroups: 缓存组。缓存组的属性除上面所有属性外，还有test, priority, reuseExistingChunk
  • test: 用于控制哪些模块被这个缓存组匹配到
  • priority: 缓存组打包的先后优先级
  • reuseExistingChunk: 如果当前代码块包含的模块已经有了，就不在产生一个新的代码块

注意：initial 模式下会把异步和非异步模块分开打包。而 all 会把异步和非异步同时进行打包。也就是说moduleA在indexA中异步引入，indexB中同步引入， initial 下moduleA会出现在两个打包块中，而 all 只会出现一个。

官方文档：webpack.js.org/plugins/spl…