从零开始写一个Vue3+Element Plus的后台管理系统(三)——按需自动引入组件和unplugin-vue-components

按需导入Element Plus遇到页面卡顿问题

本项目使用Element Plus的方式是按需自动导入

首先安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 配置文件中

Vite#

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

此处有坑！

在本地开发环境，点击菜单切换的时候，新开的页面的加载非常慢，往往过了几十秒才能渲染出来。研究了好一阵，才发现是按需导入的问题 # 使用按需引入时，首次启动服务会依赖预构建style #361

由于采用按需导入，在每次渲染新路由，会对element的组件样式进行依赖预构建，导致页面卡在半路上。

打开F12即可验证，每次切换新的路由，网络都会加载对应Element组件的css。

要解决这个问题，最简单的处理方式是修改为全量导入Element Plus，但是按需导入也有它的突出的优点。所以折衷的解决方案是开发环境全量导入，其他环境保持按需导入。

参考某位大佬的文章： [blog.csdn.net/qq_42611074… unplugin-vue-components按需导入element-plus样式导致vite加载页面耗时变得很久)

plugins: [
     ...
      Components({
        resolvers: [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.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,
              }
            }
          }
        }
      },
    ...
    ],

unplugin-vue-components自动注册自定义组件

虽然Vite在使用unplugin-vue-components产生了一些不愉快的问题，但是无法忽视这个强大的插件，它对于我们开发还是很有帮助。

unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；作者是Vite生态圈大名鼎鼎的Anthony Fu

不知道大家有没有留意项目中这个文件 components.d.ts ，当我们在src/components文件夹下加入新的组件，unplugin-vue-components会自动修改components.d.ts文件内容加入我们新写的组件，我们无须在项目任何地方注册组件即可直接在页面中使用。

又爆红了，尴尬😅

组件使用详见：github.com/antfu/unplu…

🫤 Well，又跨过了一个小坑，前方还有什么在等着我呢？