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库
这样我们打包完成直接引入 我们需要的公共代码 效果就很好了 避免了重复打包相同的代码
生活那么苦,为啥不给自己一颗糖吃呢!坚持下去!你会看到不一样的风景!