Ant Design 按需加载为啥没生效？

子寨 Dev 提问于 2026-03-13 20:32:21 阅读 43

组件

我按照官网文档配置了 babel-plugin-import，但打包后还是把整个 antd 的 CSS 和 JS 都引进来了，体积一点没小。是不是我哪里配错了？

这是我在 .babelrc 里的配置：

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

组件是这么用的：import { Button } from 'antd';，但最终 bundle 分析显示整个 antd 都被打包进去了。

Table组件 UI组件

我来解答赞 0 收藏

反馈

1 条解答

书生シ紫萱 Lv1

这个问题挺常见的，我之前也踩过坑。

先检查一下你的项目类型。如果是 create-react-app 默认创建的项目，那 .babelrc 根本不会生效，CRA 把 babel 配置藏起来了。你需要用 react-app-rewired + customize-cra 来覆盖配置：

先装依赖：

npm install react-app-rewired customize-cra babel-plugin-import --save-dev

然后在项目根目录创建 config-overrides.js：

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



module.exports = override(

  addBabelPlugin([

    'import',

    {

      libraryName: 'antd',

      libraryDirectory: 'es',

      style: true,

    },

  ])

);

最后把 package.json 里的 scripts 改一下：

"scripts": {

  "start": "react-app-rewired start",

  "build": "react-app-rewired build",

  "test": "react-app-rewired test"

}

如果不是 CRA 项目，那检查两点：

第一，webpack 配置里 babel-loader 的 include/exclude 是否把 node_modules 排除了，如果排除了 antd 那插件根本没机会处理。

第二，确保没有其他地方全量引入了 antd，比如某个文件写了 import antd from 'antd' 或者 import 'antd/dist/antd.css'，这种会直接把所有东西拽进来。

还有一个小坑：如果你的 antd 版本是 v5+，那它默认就支持按需加载了，不需要 babel-plugin-import，配置了反而可能冲突。检查一下 package.json 里的 antd 版本。

基本上就这些，先试试看。

2026-03-13 21:03