如何移除代码块中重复的Ant Design组件

我之前用create-react-app配合react-app-rewired做Ant Design按需引入时，也碰到过完全一样的情况——明明配置了按需加载，webpack-bundle-analyzer却显示Button这类通用组件在多个chunk里重复出现，导致终端用户重复下载。下面是我排查和解决的几个关键点：

1. 确认babel-plugin-import配置是否真正生效 #

首先检查你的config-overrides.js写法是否适配当前react-app-rewired版本，旧版的injectBabelPlugin写法在2.x+版本的react-app-rewired中可能失效：

• 旧写法（易失效）：

const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
  return config;
};

• 新写法（适配react-app-rewired 2.x+）：

const { override, addBabelPlugins } = require('customize-cra');
module.exports = override(
  addBabelPlugins([
    'import',
    { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }
  ])
);

如果你的react-app-rewired是2.x以上版本，必须用customize-cra提供的override和addBabelPlugins配置，否则babel-plugin-import可能没作用到所有组件导入。

2. 统一组件的导入方式 #

代码里的导入写法不一致也会导致重复打包：

• 确保所有地方都用import { Button } from 'antd'这种标准写法，不要混合使用import Button from 'antd/lib/button'或import { Button } from 'antd/es/button'。
• 特别检查有没有文件不小心导入了整个Ant Design库（比如import antd from 'antd'），这会直接把所有组件打包进去，完全抵消按需加载的效果。

3. 清理webpack缓存后重新打包 #

webpack的缓存机制可能保留旧的打包产物，导致重复模块残留。执行以下命令清理缓存后重新构建：

rm -rf node_modules/.cache
npm run build

再用webpack-bundle-analyzer分析新的打包结果，看看重复组件是否消失。

4. 调整chunk分割策略 #

如果项目做了代码分割（比如用React.lazy或loadable-components），可能不同chunk重复引入了相同组件。可以通过配置webpack的splitChunks，把Ant Design组件统一提取到公共chunk：
在config-overrides.js中添加如下配置：

const { override, addBabelPlugins } = require('customize-cra');

module.exports = override(
  addBabelPlugins([
    'import',
    { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }
  ]),
  (config) => {
    config.optimization.splitChunks = {
      ...config.optimization.splitChunks,
      cacheGroups: {
        ...config.optimization.splitChunks.cacheGroups,
        antdVendor: {
          test: /[\\/]node_modules[\\/]antd[\\/]/,
          name: 'antd-vendor',
          chunks: 'all',
          priority: 10,
        },
      },
    };
    return config;
  }
);

这样所有Ant Design组件会被打包到antd-vendor这个单独chunk里，避免重复加载。

5. 验证babel-plugin-import的转换效果 #

可以查看编译后的代码确认插件是否生效：找一个导入Button的文件，查看编译后的版本，如果看到的是import Button from 'antd/es/button'和对应的样式导入，说明配置正常；如果还是import { Button } from 'antd'，那说明babel插件没起作用，需要重新检查配置。

我当时的问题就是react-app-rewired版本升级后还在用旧的injectBabelPlugin写法，改成新的customize-cra配置后，重复打包的问题就解决了。

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