在webpack中配置splitChunks
optimization: {
spliteChunks: {
chunks: "all",
minSize: 20000, //多少字节才开始做代码分割
minRemainingSize: 0,
/**
* 确保拆分后剩余最小chunk体积超过限制来避免大小为0的模块
* developement默认为0，表示不限制
* 其他情况下，默认为spliteChunks.minSize
* 仅在剩余单个chunk时生效
*/
maxAsyncRequests: 30, // 按需加载时的最大并行请求数
maxInitialRequests: 30, // 入口点的最大并行请求数
cacheGroups: {
default: {
name: "common",
chunks: "initial",
minChunks: 2,
priority: 10,
},
libs: {
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 20,
chunks: "initial",
},
elementUI: {
name: "chunk-elementUI",
priority: 30,
test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
},
commons: {
name: "chunk-commons",
test: resolve("src/components"),
minChunks: 3,
priority: 5,
reuseExistingChunk: true,
filename: "chunk-commons.js",
},
},
},
},
1. cacheGroups
cacheGroups是splitChunks配置的核心- 缓存组的每一个属性都是一个配置规则
- 属性值是一个对象
2. name
- name:提取出来的公共模块将会以这个命名，可以不配置，如果不配置，就会生成默认的文件名。
3. chunks
- chunks：指定哪些类型的chunks参与拆分，值可以是string，可以是函数。
string：
all:所有模块，对全部文件处理async:只管异步加载，只对异步导入文件处理initial:初始化时就能获取到的模块，入口chunk,对于异步导入文件不处理
4. minChunks
minChunks是默认配置，默认值为1，任何模块都会被抽离出去（入口模块其实也会被webpack引入一次）minChunks配置的数据n，是指被引用n次以上的才会被抽离
5. priority
priority的值是数字，可以是正数，也可以是负数。- 作用是当缓存组中设置有多个拆分规则，而某个模块同时符合好几个规则的时候，需要通过优先级
priority来决定拿用哪个拆分规则。优先级高的，先执行。
6. test
test属性用于匹配模块的绝对资源路径或chunks名称，匹配chunks名称时，将选择chunks中所有的模块。- 指定node-modules库时
test: /[\\/]node_modules[\\/]/
- 指定node-modules中某个文件时
test: /[\\/]node_modules[\\/]_?element-ui(.*)/
- 指定某个文件时，都是指绝对路径
test: /(src\/locallib\.js)$/
- 指定某个文件夹时，都是指绝对路径
test: resolve("src/components")
7. reuseExistingChunk
reuseExistingChunk只能在缓存组级别上进行配置- 值为
false，禁用缓存 - 值为
true,如果这个模块已经被打包过，可以忽略，不再打包
8. filename
filename：仅在初始chunk时才允许覆盖文件文
