Chunk Group

Build

Chunk Group 是 Webpack 4 中新产生的一个概念。

在 Webpack 中,一个文件/资源在打包时就是一个 module,一些 module 被打包到一起,生成一个 chunk。在原来的 Webpack 中,chunk 之间的依赖是一种父子关系:如果一个 chunk 有父 chunk,那么就可以认定,在这个 chunk 被加载的时候,至少其一个父 chunk 已经被加载了。在这种假设下,Webpack 可以对 chunk 进行一些优化,比如:如果一个 chunk 中的某个 module 被所有父 chunk 使用了,那么这个 module 就可以从 chunk 中删除(因为在加载 chunk 的时候,至少有一个父 chunk 已经被加载了,故这个 module 肯定已经存在了)。

然而,这种父子关系的模式,并不利于 chunk 的拆分:在 CommonsChunkPlugin 中,如果一个 chunk 被拆分了出来,那么这个 chunk 会被“当作”是原来 chunk 的父 chunk 进行处理。这种父子关系其实是不正确的,因此也会影响到其他一些优化的进行。

因此,在 Webpack 4 中,引入了 chunk group 的概念,目的就是修正这一概念。

一个 chunk group,顾名思义,就是一组 chunk 的集合。一个 Webpack 的加载入口、或是一个异步加载点就是一个 chunk group,这个 group 中所有的 chunk 都是可以被并行加载的。同时,一个 chunk 也可以归属于多个不同的 chunk group。有了 chunk group 的概念,在通过 SplitChunksPlugin 进行拆分的时候,只需要将拆出来的 chunk 划分到对应的各个 chunk group 中去,就可以保证正常的使用了。

参考文档见这里