react中引入的组件为什么会重复打包？

Question

react(17.0.2)项目（CRA）
同一个依赖组件在页面中引入了两次（一次在路由的主组件，一次在主组件里面的子组件），打包后发现分别被打进两个bundle中了，webpack打包不去重吗？如果引入多次就会被多次打包吗？

Answer 1

和分不分包没什么关系，建议将chunk设置为all，这样会共计引用次数

optimization: {
    // ... 忽略其它配置
    splitChunks: {
      cacheGroups: {
        // ...其它规则
        common: {
          name: 'common',
          test: /[\\/]src[\\/]/,
          // 分包和主包共用的组件或者js，被引用2次及以上的时候就会被抽到common.js里
          minChunks: 2,
          chunks: "all"
        }
      }
    }
  }

Answer 2

猜测是分包之后，两个包都需要，webpack 没法判断哪个包会先被加载，所以就都加上了。

如果不分包，那么引用多次应该也不会重复打包。