【ant design】antd@5+版本，还需要手动配置插件来实现组件和样式的按需加载吗？

antd支持tree shake，所以组件会自动实现按需加载，不需要我们配置。
但是antd@5之前的版本，我们都是配置babel-plugin-import来处理样式的按需加载。

那么，问题来了，antd@5+版本还需要去配置样式的按需加载吗？为什么？眼见为实，直接在源码里做测试。

首先，安装antd最新版本

npm i antd -D

我得到的是"antd": "^5.3.3"

所用框架为react@18+

antd打了不同种类的包，有dist, es, lib等，而通过import引入是从es包引入的。所以我们直接去node_modules/antd/es目录里做测试。

找两个最简单的组件alert和button吧，我们在项目里引入Button组件，而不引入Alert组件，这样方便对照测试。

import { Button } from 'antd';

我们分别在这两个组件文件和样式文件里加console.log，如果button下的log都打印了内容，而alert下的log没有执行，这说明组件和样式都实现了按需加载。开始–
alert的组件文件

alert的样式组件

button组件文件

button的样式文件

我们在src/App.tsx中引入Button组件，但是不引入任何样式

import type { FC } from 'react';
import { Button } from 'antd';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

可以看到，在引入组件时，组件内部是先引入的样式文件，所以会先打印样式中的日志，然后打印组件文件中的日志。然而，我们并没有看到alert相关的打印。所以，可以很明确的说，我们不需要再去配置组件和样式的按需加载了。因为这个版本的样式已经通过css-in-js被打包成js文件了，通过tree shaking，可以做到自动按需加载。

那么，官方给推荐引入的那个css文件是干啥的？

import 'antd/dist/reset.css';

看名称就能猜出大概，这是一份初始化样式的文件，把它放进项目里，就可以看到，样式得到了初始化

在node_modules/antd/es/style中看下源码就可以知道

打开每个组件，可以发现都有引入这种重置样式

---

好了，谜团解开了。