webpack4 splitChunks的reuseExistingChunk选项有什么作用

在学习webpack4的代码分割的时候,遇到个cacheGroups内的选项reuseExistingChunk,看官方解释大概意思是说当chunks引用了已经存在的被抽离的chunks时不会新创建一个chunk而是复用chunk,一直想不出要是怎样一个场景才会用到这样一个选项,有没有一个例子可以说明一下true和false的区别,谢谢!

阅读 14.9k
2 个回答

reuseExistingChunk详细解释

 cacheGroups: {
      Chunk 1 : {
        test: / A, B, C三个模块/,
        name: 'Chunk 1',
      },
      Chunk 2: {
        test: / B, C/,
        name: 'Chunk 2'
      }
    }

Chunk 1 (named one): modules A, B, C
Chunk 2 (named two): modules B, C

第一种配置:

{
  minChunks: 2,
  reuseExistingChunk: false // default
}

它将创建一个包含公共模块B和C的新块:

Chunk 1 (named one): modules A
Chunk 2 (named two): no modules (removed by optimization)
Chunk 3 (named one~two): modules B, C

第二种配置:

{
  minChunks: 2,
  reuseExistingChunk: true
}

它将重用现有块2,因为它匹配由cacheGroup选择的模块

Chunk 1 (named one): modules A
Chunk 2 (named two): modules B, C

结论:reuseExistingChunk: true, 复用其他chunk内已拥有的模块 当chunks引用了已经存在的被抽离的chunks时不会新创建一个chunk而是复用chunk
设置与否的结果名称有区别。如果你没有名字,也没有区别。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题