环境

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