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

长孙俊荣提问于 2026-03-20 20:38:19 阅读 6

组件

我用 create-react-app 搭了个项目，想按需加载 Ant Design 组件减少打包体积。装了 babel-plugin-import，也配了 .babelrc，但打包后发现还是把整个 antd 都引进来了，体积一点没小。

我这样引入 Button 的：

import { Button } from 'antd';
import 'antd/dist/reset.css';

function App() {
  return <Button type="primary">测试</Button>;
}

是不是哪里配置漏了？还是现在新版不用这个插件了？

UI组件按需加载

我来解答赞 2 收藏

反馈

1 条解答

长孙怡瑶 Lv1

你这个问题挺常见的，按需加载 Ant Design 确实有时候会出问题。首先检查一下你的 .babelrc 或 babel.config.js 文件，确保配置正确。应该是这样的：

{

  "plugins": [

    ["import", {

      "libraryName": "antd",

      "libraryDirectory": "es",

      "style": "css"

    }]

  ]

}

注意这里的 libraryDirectory 要设置为 "es"，这样才能按需加载 ES6 模块，减少打包体积。

另外，你引入 CSS 的方式也不对。按需加载的时候，不需要手动引入 antd/dist/reset.css 或 antd/dist/antd.css，因为 babel-plugin-import 会自动帮你按需加载对应的样式文件。

改完配置之后，记得重启一下开发服务器，有时候缓存问题也会导致配置不生效。

如果还是有问题，可以检查一下你的 node_modules 目录，确认 babel-plugin-import 是否正确安装。有时候 npm 或 yarn 安装依赖可能会出问题，重新安装一下试试。

2026-03-20 22:01