浅析 SplitChunksPlugin 及代码分割的意义

本文作者为 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，即