React应用中Webpack将react-transition-group拆分至多块的问题咨询

问题背景 #

在React应用中使用react-transition-group模块时，Webpack 5.36.2将该模块拆分到多个chunk中，未归入配置好的vendor chunk。当前splitChunks配置如下：

splitChunks: {
  name: false,
  cacheGroups: {
    commons:  {
      test: {
        vendor: /[\\/]node_modules[\\/]/,
      },
      name: 'vendor',
      chunks: 'initial'
    },
    default: {
      minChunks: 2,
      reuseExistingChunk: true,
      minSize: 100000
    }
  }
}

• 若将chunks设为all，所有node模块会被归入vendor导致体积过大，因此选择initial。
• 当前核心疑问：
  • 为何Webpack不为react-transition-group生成单独的可复用chunk？
  • 模块与页面不需要的组件打包导致冗余加载，这种行为是否正常？
  • 添加defaultVendors: false后，模块仍被拆分到多个页面对应chunk，是否有配置能让这类未归入vendor的node模块生成单独chunk？

问题分析与解决方案 #

1. 模块未归入vendor chunk的原因 #

你的commons缓存组设置了chunks: 'initial'，该规则仅对初始加载的chunk生效。如果react-transition-group是被异步加载组件（比如React.lazy或动态import()）引入的，它属于异步chunk，不会被initial规则捕获，自然无法进入vendor chunk。

2. 模块被拆分到多个chunk的合理性 #

这种行为是符合Webpack默认代码拆分逻辑的，核心影响因素有两个：

• minChunks阈值：你的default缓存组要求模块被至少2个chunk引用才会被提取成单独chunk。如果react-transition-group在某些页面的异步chunk里仅被引用1次，Webpack会直接将它打包进该页面chunk，不会单独提取。
• minSize限制：default组设置了minSize: 100000（100KB），如果react-transition-group本身体积小于这个值，即使满足minChunks条件，Webpack也不会单独拆分——因为小chunk会增加HTTP请求开销，反而影响性能。

你添加defaultVendors: false后，Webpack默认的defaultVendors缓存组被禁用，模块会按default组规则处理。由于default组的minChunks:2要求，模块在单个页面chunk仅被引用1次时，会被打包进该页面chunk，这种行为是符合你配置规则的正常情况。

3. 让未归入vendor的node模块生成单独chunk的配置方案 #

要让react-transition-group这类异步加载的node模块生成单独chunk，可以新增专门的缓存组，针对特定模块或未被vendor捕获的node模块：

splitChunks: {
  name: false,
  cacheGroups: {
    commons:  {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendor',
      chunks: 'initial',
      priority: 10 // 提高优先级，确保先匹配初始chunk的node模块
    },
    asyncVendors: { // 新增异步vendor缓存组
      test: /[\\/]node_modules[\\/]/,
      name: 'async-vendor',
      chunks: 'async', // 仅处理异步chunk中的node模块
      priority: 5,
      minChunks: 1, // 只要被引用就提取
      minSize: 0 // 取消体积限制，可根据实际需求调整
    },
    default: {
      minChunks: 2,
      reuseExistingChunk: true,
      minSize: 100000,
      priority: -20 // 降低优先级，让上面的组先匹配
    }
  }
}

如果只想针对react-transition-group单独拆分，可将asyncVendors的test修改为：

test: /[\\/]node_modules[\\/]react-transition-group[\\/]/

4. 解决冗余代码加载问题 #

确保路由组件是真正的异步拆分（比如用React.lazy配合Suspense，或直接使用import()），Webpack会自动分析依赖，仅加载当前页面需要的chunk。若仍出现冗余加载，可使用Webpack的bundle-analyzer插件分析依赖树，定位是否有意外引入的组件或依赖。

内容的提问来源于stack exchange，提问作者Vishal