vite开发环境跳转页面卡住，加载慢，ant-design-vue 按需导入的新组件导致页面加载慢

环境

• vite: 2.9.9
• unplugin-vue-components: 0.19.6

参考

• issues: 使用按需引入时，首次启动服务会依赖预构建style#361
• vite-plugin-ifdef(在vite中使用condition complie)

问题描述

本地开发时，遇到跳转页面要等10s以上才能跳转成功，打包后没有这个问题

问题分析

发现跳转到的页面如果有新的antd组件，就会有这个问题

问题原因

项目中使用了unplugin-vue-components按需引入antd组件，但是在开发环境中有问题，详情可查看issue，实际是按需引入样式导致的问题

解决方法

开发环境全局引入样式，正式环境按需引入样式

有问题的vite.config.ts如下（此处省略了部分配置，只关注需要修改的项）

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

export default ({ command, mode }: ConfigEnv): UserConfig => {
  // ...
  return {
    // ...
    plugins: [
      // ...
      Components({
        resolvers: [AntDesignVueResolver()],
      }),
    ],
};

我们引入一个插件vite-plugin-ifdef，用于区分开发环境和生产环境，使用yarn或npm安装

yarn add vite-plugin-ifdef

然后修改vite.config.ts如下

import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
import ifdef from "vite-plugin-ifdef";

/** vite-plugin-ifdef插件的配置项 */
type IfdefConfig = { "ifdef-define": any; "ifdef-option": any };

export default ({ command, mode }: ConfigEnv): UserConfig & IfdefConfig => {
  // ...
  return {
    // ...
    plugins: [
      ifdef(),
      // ...
      Components({
       /**
         * 开发环境(serve命令)若配置importStyle会导致使用ant-design的组件加载时间长达10s以上，
         * 故仅在打包环境(build命令)按需加载ant-design的样式，开发环境全量引入样式文件
         * https://github.com/antfu/unplugin-vue-components/issues/361
         */
        resolvers: [AntDesignVueResolver({ importStyle: command === "build" ? "less" : false })],
      }),
    ],
    "ifdef-define": {
      COMMAND: command,
    },
    // 注意此处有坑，vite-plugin-ifdef的文档中给的键名 ifdef-config 是错误的
    "ifdef-option": {
      verbose: false,
    },
};

在项目的入口文件main.js中引入样式

// ============================ 根据开发环境和生产环境使用不同的方法引入antd的样式 start ==================================================
// 仅在开发环境(vite serve命令)全量引入antd样式，生产环境(vite build命令)使用unplugin-vue-components按需引入(参见：vite.config.js)
/// #if COMMAND === 'serve'
import "ant-design-vue/dist/antd.less";
/// #else
// unplugin-vue-components 无法按需引入非组件模块的样式，故在此处引入
import "ant-design-vue/lib/message/style/index.less";
import "ant-design-vue/lib/notification/style/index.less";
/// #endif
// ============================ 根据开发环境和生产环境使用不同的方法引入antd的样式 end ==================================================

补充

踩了个坑，使用这个方案后发现自定义的antd弹框样式本地和发布的版本不一样，发现是因为自定义组件在antd.less之前引入了，导致开发环境和生产环境的样式顺序不一致，故最好把上面的样式引入代码放到main.js顶部