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、应用
小程序代码拆包。