本文作者为 360 奇舞团前端开发工程师
起因
有同事分享webpack
的代码分割,其中提到了SplitChunksPlugin
,对于文档上的描述大家有着不一样的理解,所以打算探究一下。
Q:什么是 SplitChunksPlugin
?SplitChunksPlugin
是用来干嘛的?
A: 最初,chunks
(以及内部导入的模块)是通过内部webpack
图谱中的父子关系关联的。CommonsChunkPlugin
曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化。从webpack v4
开始,移除了CommonsChunkPlugin
,取而代之的是 optimization.splitChunks
。SplitChunksPlugin
可以去重和分离 chunk
webpack
的中文文档,对SplitChunksPlugin
的描述是这样子的:
针对以上的第二点描述新的 chunk 体积大于 20kb(在进行 min+gz 之前的体积)
,有同事是这么理解的:chunk
大于 20kb
时,webpack
会对当前的chunk
进行拆包,一般情况下,100kb
的包会拆成 5 个包 即 5 * 20kb = 100kb
. 如果有并发请求的限制,webpack
会自动把某些包合并,如并发请求数是 2 ,那么这个100kb
的包将会被拆成 2 个,每个包的大小为50kb
,即