[vitejs/vite]vite 是否可以配置 antd-vue 按需求加载

有没有配置文件分享一下呀

https://www.npmjs.com/package/vite-plugin-imp 有类似的插件

It should use babel-plugin-import to resolve this. Here has a similar issues https://github.com/vitejs/vite/issues/1223. But it should be wait for vite-babel-plugin support 2.0.

Just close it because it will not include in core.

For babel, @rollup/plugin-babel should just work for Vite 2.0.

react 版的 ant design：

vite.config.ts 中：

export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/lib/${name}/style/index.css`,
        },
      ],
    }),
  ],
});

main.tsx 中

import "antd/lib/style/index.css"; 

可以尝试下这个 https://github.com/vbenjs/vite-plugin-style-import 。vite本身已经按需加载，所以只需加载对应的css即可

我的配置如下，可作为参考。基于 vite-plugin-imp，支持定制主题，楼上直接引用 CSS 的方式不能定制主题。

import vitePluginImp from 'vite-plugin-imp';

export default defineConfig({
  plugins: [
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});

更多配置可以参考我项目里的配置 pinyin/vite.config.ts

使用了你这个配置是可以的， 但是启动项目的时候，会弹出这么多，并且页面会持续刷新多次

这是样式按需加载导致的，页面首次加载会有这个问题，可以考虑在开发环境全量引入 antd 的样式，编译的时候使用这种方式。这么一说，今晚我就研究一下这种方式看看。

好的，研究出来了分享一下，哈哈

@bihongbin3027 重新回顾了一下，只是第一次加载 vite 没有编译过的资源才会如此，之后都 ok 了，因此硬要做这点优化好像没什么必要 :joy: