webpack概念module、chunk和bundle
- module:js的模块化,简单说就是通过import引入的代码
- chunk:webpack根据功能拆分的代码块,包含三种情况
- bundle:webpack打包后的各个文件,对chunk编译压缩打包后的产物。
webpack默认配置
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
webpack.splitChunks.chunk
- async表示只从异步加载得模块(动态加载import())里面进行拆分
- initial表示只从入口模块进行拆分
- all表示以上两者都包括
webpack.splitChunks.chunk.cacheGroups
cacheGroups会继承默认配置里面的chunks、minSize、minChunks等等,除了test
, priority
和reuseExistingChunk
,这三个是只在cacheGroup这一层生效。
webpack.splitChunks.chunk.maxInitialRequests
限制入口的拆分数量
- 入口文件本身算一个请求
- 如果入口里面有动态加载得模块这个不算在内
- 通过runtimeChunk拆分出的runtime不算在内
- 只算js文件的请求,css不算在内
- 同时有两个模块满足cacheGroup的规则要进行拆分,但是maxInitialRequests的值只能允许再拆分一个模块,那尺寸更大的模块会被拆分出来
webpack.splitChunks.chunk.maxAsyncRequests
限制异步模块内部的并行最大请求数,可以理解为是每个import()它里面的最大并行请求数量。
- import()文件本身算一个请求
- 并不算js以外的公共资源请求比如css
- 同时有两个模块满足cacheGroup的规则要进行拆分,但是maxAsyncRequests的值只能允许再拆分一个模块,那尺寸更大的模块会被拆分出来
其它
- cacheGroup必须同时满足各个条件才能生效
- splitChunks的配置项都是作用于cacheGroup上的,如果将cacheGroup的默认两个分组vendor和default设置为false,则splitChunks就不会起作用
- minChunks、maxAsyncRequests、maxInitialRequests的值必须设置为大于等于1的数
- 当chunk没有名字时,通过splitChunks分出的模块的名字用id替代,当然也可以通过name属性自定义
- 当父chunk和子chunk同时引入相同的module时,并不会将其分割出来而是删除掉子chunk里面共同的module,保留父chunk的module,这个是因为 optimization.removeAvaliableModules 默认是true
- 当两个cacheGroup.priority相同时,先定义的会先命中
- 除了js,splitChunks也适用于css
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。