SplitChunksPlugin 这2个条件是啥意思？没看到它想表达的意思

Question

附链接：https://webpack.docschina.org...

1 . Maximum number of parallel requests when loading chunks on demand would be lower or equal to 30
指模块引用的按需chunk必须小于等于30才可以继续分离出新chunk吗？

就是说如果一个chunk符合前2个条件，但是分离出去后导致某个模块引用的按需chunk大于30，那么这个chunk就不能分离出去？

2 . * Maximum number of parallel requests at initial page load would be lower or equal to 30
入口按需引用的chunk<=30？看起来跟上一条一样啊

查了好多资料，都是照着英文翻译的，有懂的解析大神不？

Answer 1

第一个对应的配置应该是 maxAsyncRequests 这个配置的意思是限制了 页面在加载一个资源的时候并行加载的资源最大请求数量

• 当你配置了splitChunks的时候，webpack会对你的代码按照配置进行分割出来很多chunk, 一种是初始化的，需要用cacheGroups来申明，这种会打到html中，当然这个个数依然受限于maxInitialRequests这个，详细可以看下面解释，其他的无数个chunks会根据你的依赖来判断是否要动态引入，那么你加载页面要动态引入多少chunks就由maxAsyncRequests这个字段来控制，当你数量很小的时候，有些chunk是不会单独隔离出来的。

第二个对应的配置应该是 maxInitialRequests 这个配置对应是的在加载一个页面的时候最大的初始化资源的数量

• 当你webpack打包好之后，html文件里面会多出几个js文件，vendor.js，index.js, common.js 等等 这些js不是无故加上去的，而是配置cacheGroups并且通过maxInitialRequests这个字段来做限制，当你 maxInitialRequests这个字段值很小的时候比如设置为2，那么webpack可能不会去把common.js(这只是个例子，并不真的是common.js)单独分割出来

---

补充一下回答哈，自己也没理解透彻，所以说的比较含糊不清

通常情况下webpack会把所有的代码打包成一个bundle叫index.js
这时候如果你使用了htmlWebpackPlugin那么打包出来的这个index.js 会被引入到html文件中，在访问html文件的时候会去找到这个文件，文件里面的所有的内容就是你项目的entry文件开始所依赖的所有module

然后为了优化，会进行代码分割(splitChunks)
在你代码分割之后 index.js 会变成很多 文件 vendor.js/common.js/xxx.js 等等可能会有几十个但是至于哪些会在打包之后写入html中， htmlWebpackPlugin中有一段源码

这段代码过滤的手段主要还是 isInitial这个函数和initial这个字段以及一些外部配置。剩下的文件会被写入到html中就像这样
, 像现在我动态(此处不准确，应该是在html中初始化引入2个js文件)引入了2个js文件，那么InitialReuqest的值就是2, 当你项目比较复杂或者拆分的包比较多的时时候会有更多的文件被写入进去，InitialReuqest会上涨，那么就需要maxInitialReuqest来控制最大有多少个文件需要初始化到html中，在加载页面的时候当然并不只加载 initialReuqests这几个js文件，而是在加载的时候还会继续添加其他的js, 比如你动态引入的jquery, 或者其他单独打的bundle都算asyncRequest, 你可能还要额外的引入 a.js b.js 那么这时候加上初始化的2个文件，你的AysncRequests的值为4， 如果你设置为3，那么a.js和b.js就是剩下一个。另外一个会打包initial中的js，不在单独隔离出来。

个人见解。 欢迎讨论。