乐趣区

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

jiezi

环境

  • 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 ==================================================
退出移动版