1、参考
https://www.webpackjs.com/plugins/split-chunks-plugin/
2、核心概念
webpack将根据以下条件自动拆分代码块:
- 会被共享的代码块或者 node_mudules 文件夹中的代码块
- 体积大于30KB的代码块(在gz压缩前)
- 按需加载代码块时的并行请求数量不超过5个
- 加载初始页面时的并行请求数量不超过3个
splitChunks: {
chunks: "all",
minSize: 30000, // 模块的最小体积,大于30000就拆分
minChunks: 1, // 模块的最小被引用次数
maxAsyncRequests: 5, // 按需加载的最大并行请求数
maxInitialRequests: 3, // 一个入口最大并行请求数
automaticNameDelimiter: '~', // 文件名的连接符
name: true,
cacheGroups: { // 缓存组
vendors: {
test: /[\/]node_modules[\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
说明:
chunks属性用来选择分割哪些代码块,可选值有:'all'(所有代码块),'async'(按需加载的代码块),'initial'(初始化代码块)。
4、应用
小程序代码拆包。