关于vite:vite开发环境跳转页面卡住加载慢antdesignvue-按需导入的新组件导致页面加载慢

环境

• 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 ==================================================