项目使用unplugin-vue-components按需导入element-plus组件和样式
原先是这样的写法，最近写着写着项目页面切换变得越来越卡顿，经过原因排查后，发现是vite.config.js下方代码导致的

ElementPlusResolver({
            importStyle:"sass",
          }),

查看网络请求，会发现每次都会请求大量element-plus的样式文件
我觉得原因是这样的：vite会预加载style，当首次启动 vite 服务时会对 style 进行依赖预构建，因为element-plus的按需样式会导入大量style文件，导致页面会卡住直至style构建完成

改成开发环境不使用按需加载样式

ElementPlusResolver({
            importStyle: mode === "development" ? false : "sass",
          }),

然后自定义一个插件，main.js中插入element-plus全部样式

这里只列举vite.config.js中的修复该问题的代码

import Components from "unplugin-vue-components/vite"
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"

export default ({ mode }) => {
  console.log(mode === "development" ? "开发环境 " + mode : "生产环境 " + mode)
  return defineConfig({
    ...
    plugins: [
      ...
      // 自动按需注册导入组件
      Components({
        dirs: ["src/components"], // 要导入组件的目录路径
        extensions: ["vue"],
        deep: true, // 搜索子目录
        dts: false, // 不使用ts
        include: [/\.vue$/, /\.vue\?vue/], // 只识别vue文件
        resolvers: [
          // 使用unplugin-vue-components按需加载样式，开发环境会导致项目异常卡顿
          // 导致原因：vite会预加载style，当首次启动 vite 服务时会对 style 进行依赖预构建，，因为element-plus的按需样式会导入大量style文件，导致页面会卡住直至style构建完成
          // https://github.com/antfu/unplugin-vue-components/issues/361
          //  这里开发环境不按需加载样式，生产环境才按需加载样式
          ElementPlusResolver({
            importStyle: mode === "development" ? false : "sass",
          }),
        ],
      }),
      // 使用unplugin-vue-components按需加载样式，开发环境会导致项目异常卡顿
      // 导致原因：vite会预加载style，当首次启动 vite 服务时会对 style 进行依赖预构建，，因为element-plus的按需样式会导入大量style文件，导致页面会卡住直至style构建完成
      // https://github.com/antfu/unplugin-vue-components/issues/361
      // 这里自定义一个vite插件，更改src/main.js内容，开发环境全局引入样式
      {
        name: "import-element-plus-style",
        transform(code, id) {
          if (/src\/main.js$/.test(id)) {
            if (mode === "development") {
              return {
                code: `${code};import 'element-plus/dist/index.css';`,
                map: null,
              }
            } else {
              return {
                code: `${code};import 'element-plus/theme-chalk/src/message-box.scss';import 'element-plus/theme-chalk/src/message.scss';`,
                map: null,
              }
            }
          }
        },
      },
    ],
  })
}