前言

• 项目中选用了element-plus按需引入的方式，但是个别页面在切换时候，会加载很慢。
• 观察后发现每次打开新页面，都会把新页面使用到的组件进行加载，导致加载速度变慢。

解决方案

• 开发环境全量导入组件，打包时候按需导入。

• 代码如下：

• plugins: [
    // element-plus自动按需引入
    AutoImport({
        resolvers: [ElementPlusResolver()],
    }),
    Components({
        dirs: ["src/components/base"], // 要导入组件的目录的路径
        deep: true, // 搜索子目录
        // 使用unplugin-vue-components按需加载样式，开发环境会导致项目异常卡顿
        // 导致原因：vite会预加载style，当首次启动 vite 服务时会对 style 进行依赖预构建，，因为element-plus的按需样式会导入大量style文件，导致页面会卡住直至style构建完成
        // https://github.com/antfu/unplugin-vue-components/issues/361
        //  这里开发环境不按需加载样式，生产环境才按需加载样式
        resolvers: [ElementPlusResolver({ importStyle: mode === "development" ? false : "sass", }),],
    }),
    // 这里自定义一个vite插件，更改src/main.js内容，开发环境全局引入样式
    {
        name: "import-element-plus-style",
        transform(code, id) {
            if (/src\/main.ts$/.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,
                    }
                }
            }
        },
    }
  ]