webpack4抽离公共代码

webpack中有一种优化就是抽离公共代码
先举一个小例子说明一下
比如:我们创建一个多页面入口的代码
在webpack.config.js中

entry:{
		index:'./src/index.js',
		other:'./src/other.js'
},
output:{
		filename:'bundle.[name].js',
		path:path.resolve(__dirname,'dist/')
},

在index.js文件中

import './util.js';
import $ from "jquery";
console.logh('这里是index.js文件')

在other.js

import './util.js';
import $ from "jquery";
console.logh('这里是other.js文件')

如果我们这个时候时候打包的话
会在dist文件夹下 生成 俩个 bundle.index.js和bundle.other.js文件 虽然生成成功了
但是 会发现一个问题 俩个 生成的js文件 里面都打包了 jquery和util.js文件
这个明显 不是 我们的理想化 我们想要的是 既然这俩个文件都引入了相同的代码块
能不能抽离出来 这些公共部分 那个页面引入的时候 引入这个公共部分的代码不就事半功倍了
这个时候webpack刚好有这样的配置

optimization:{  // 抽离公共样式
		splitChunks:{ // 分割代码块
			cacheGroups:{  //缓存组
				common:{  // 公共的模块
					chunks:'initial',
					minSize:0,
					minChunks:2   // 公共的代码块 引入 最小数量 在俩个文件中都引入 
				},
				vendor:{  //  处理第三方插件库 不是自己定义的
					priority:1,  // 升级权重 先执行这个  要不上面的代码执行了下面就不会执行了
					test:/node_modules/, // 把你抽离出来
					chunks:'initial',
					minSize:0,
					minChunks:2
				}
			}
		}
	},

上面的bundle.common-index-other.js 是公共的自定义代码块
bundle.vendor-index-other.js 是第三方插件库 就是刚刚的jquery库
这样我们打包完成直接引入 我们需要的公共代码 效果就很好了 避免了重复打包相同的代码

生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！