SplitChunkPlugin插件配置参数详解
- 对引入的库代码(例如:lodash、jQuery等)进行代码的分割进行优化
- 若配置时只写chunks:"all",其余则为默认配置
- 代码分割后的每一个js文件即为Chunk,如下图中的(main.js、vendors.js)
optimization: {
splitChunks: {
chunks: "all", // 共有3个值"initial","async"和"all"。配置后,代码分割优化仅选择初始块,按需块或所有块
minSize: 30000, // (默认值:30000)块的最小大小
minChunks: 1, // (默认值:1)在拆分之前共享模块的最小块数
maxAsyncRequests: 5, //(默认为5)按需加载时并行请求的最大数量
maxInitialRequests: 3, //(默认值为3)入口点的最大并行请求数
automaticNameDelimiter: '~', // 默认情况下,webpack将使用块的来源和名称生成名称,例如vendors~main.js
name: true,
cacheGroups: { // 以上条件都满足后会走入cacheGroups进一步进行优化的判断
vendors: {
test: /[\/]node_modules[\/]/, // 判断引入库是否是node_modules里的
priority: -10, // 数字越大优先级越高 (-10大于-20)
filename: 'vendors.js' // 设置代码分割后的文件名
},
default: { //所有代码分割快都符合默认值,此时判断priority优先级
minChunks: 2,
priority: -20,
reuseExistingChunk: true // 允许在模块完全匹配时重用现有的块,而不是创建新的块。
}
}
}
},
学习文档:https://www.webpackjs.com/plugins/split-chunks-plugin/