webpack的splitChunks和cacheGroups

发布时间 2023-10-31 15:30:31作者: 看风景就

splitChunks 的 chunks 用途说明

chunks: "all", // 必须三选一: "initial"(同步包) | "all"(推荐,同步或异步包) | "async" (默认就是async,异步包)

chunks 指的是 分离包的作用范围

initial 则只分离初始包,例如 入口包,意思是,入口包引入的包将被分离,而不是指入口包本身

async 异步包,import('./xxx') 引入的包,只有异步包引入的包被分离

all 所有包都分离,包括异步和同步的,这样可分离所以引入的包,推荐

cacheGroups 继承 splitChunks 里的所有属性的值,如 chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、automaticNameDelimiter、name ,我们还可以在 cacheGroups 中重新赋值,覆盖 splitChunks 的值

即 cacheGroups 的 chunks也是指分离范围

另外,还有一些属性只能在 cacheGroups 中使用:testpriorityreuseExistingChunk

通过 cacheGroups,我们可以定义自定义 chunk 组,通过 test 条件对模块进行过滤,符合条件的模块分配到相同的组。

cacheGroups 有两个默认的组,一个是 vendors,将所有来自 node_modules 目录的模块;一个 default,包含了由两个以上的 chunk 所共享的模块。

拆分出的chunk名字,例如 vendors~app(默认由 cacheGroups 中组的 key + 源chunk名组成)。我们看一下如何自定义拆分出的chunk名。

 
详细可参考 如何使用 splitChunks 精细控制代码分割