vite+ant-design-vue 开启css module 后加载组件库less文件初次加载时间会很慢

[JobinJia]

Describe the bug

利用vite搭建vue3+ant-design-vue项目，使用css modules时引用antdv组件的less文件时初次启动加载很慢

Reproduction

vite.config.ts中的CSS配置为

引用ant-design-vue的less文件

在index.module.less中引用

之后在BasicLayout.tsx中引用
import styles from './index.module.less';
项目启动后浏览器第一次加载情况

可以看到，初次启动无缓存时
index.module.less的加载时间为 45.11S
而且有vite缓存时，偶尔加载index.module.less也会变慢

具体啥原因实在没排查出来，麻烦指教下。谢谢

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

➜  antdv-components npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Memory: 167.51 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.2.1 - /usr/local/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 7.11.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 91.0.4472.77
    Firefox: 80.0
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-vue: ^1.2.2 => 1.2.2 
    vite: ^2.3.4 => 2.3.4 

Used package manager:
yarn

Logs

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run dev --scripts-prepend-node-path=auto

antdv-components@0.0.0 dev
vite --force

Pre-bundling dependencies:
vue
ant-design-vue
vue-router
@vueuse/core
(this will be run only when your dependencies or config have changed)

vite v2.3.4 dev server running at:

Local: http://localhost:10086/
Network: use --host to expose

ready in 1173ms.

[@vue/compiler-sfc] <script setup> is still an experimental proposal.
Follow its status at vuejs/rfcs#227.

[@vue/compiler-sfc] When using experimental features,
it is recommended to pin your vue dependencies to exact versions to avoid breakage.

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[Xwudao]

盲猜是因为antd的less文件太大了，解析不要时间的么？

同理，webpack也有同样的问题，毕竟要处理less。

同样，element-plus也是，要处理scss啊...

不过今天又试了vite+el plus，还换了主题色（自定义主题色之后解析/编译时间更长），感觉比以前快多了。。。

[JobinJia]

盲猜是因为antd的less文件太大了，解析不要时间的么？

同理，webpack也有同样的问题，毕竟要处理less。

同样，element-plus也是，要处理scss啊...

不过今天又试了vite+el plus，还换了主题色（自定义主题色之后解析/编译时间更长），感觉比以前快多了。。。

但是这个第一次解析花的时间太多~

[yyx990803]

这个 vite 没办法的，因为你直接加载 less 源码，时间是消耗在 less 的编译上，并不是 vite 能改善的问题。

[JobinJia]

这个 vite 没办法的，因为你直接加载 less 源码，时间是消耗在 less 的编译上，并不是 vite 能改善的问题。

thank u

[haoqunjiang]

如果你只是需要变量的话，可以在项目的 less 中只引入 ant-design-vue/lib/style/themes/default.less？
AntD 本身组件的样式用 CSS 引入即可。

这样应该能提不少速度。

[JobinJia]

如果你只是需要变量的话，可以在项目的 less 中只引入 ant-design-vue/lib/style/themes/default.less？
AntD 本身组件的样式用 CSS 引入即可。

这样应该能提不少速度。

OK,我去试试，非常感谢！

更新：

很好使：） 再次感谢

[github-actions]

This issue has been locked since it has been closed for more than 14 days.

If you have found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest Vite version. If you have any other comments you should join the chat at Vite Land or create a new discussion.