[v5] remove `es` dir for better import

What problem does this feature solve?

Since we want to remove lib and focus on ESM only, it is better remove es dir.

Then we can:

import Button from 'antd/button';

instead of:

import Button from 'antd/es/button';

and have a better tree shaking experience.

What does the proposed API look like?

import Button from 'antd/button';

[afc163]

Why not import { Button } from 'antd'; ?

[izhouteng]

关于你说的这个问题，我深表理解。

题主之所以不喜欢 import { Button } from 'antd' 的语法，一个重要的原因，是因为这样 tree shaking 体验很差。

在 Vite 中，像上面这样简写的解构导入，会在打包时让 Rollup 去分析整个 antd 包，从而极大的拖慢打包速度。

若改成 import Button from 'antd/es/button'，则打包速度可以飞跃提升。

但这种写法，实在是很啰嗦，好在，有一个插件 vite-plugin-imp，可以帮我们自动转换这种写法，并自动引入样式。

其实它就是 babel-plugin-import 的 Vite 版，给你参考一下我的配置，希望对你有帮助。

  plugins: [
    {
      ...styleImport({
        resolves: [
          AntdResolve()
        ]
      }),
      apply: 'serve'
    },
    {
      ...vitePluginImp({
        libList: [
          {
            libName: 'antd',
            style (name) {
              return `antd/es/${name}/style/index.js`
            }
          },
          { libName: 'lodash-es', libDirectory: '' },
          { libName: '@ant-design/icons', libDirectory: 'es/icons', camel2DashComponentName: false }
        ]
      }),
      apply: 'build'
    }
  ],

另外，这个问题其实并不关 antd 的事，删除 lib 目录只留 es 目录更是duck不必。