unplugin-vue-components按需导入element-plus样式导致vite加载页面耗时变得很久

拼搏现实的明天。 2024-04-01 14:41 19阅读 0赞

项目使用`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,
                  }
                }
              }
            },
          },
        ],
      })
    }