ant-design-vue在vite按需加载时页面刷新reloading

ant-design-vue在vite按需加载时页面刷新reloading

• 在配置项目过程中遇到启动项目展开页面过程中网页刷新，切换异步路由页面时网页刷新

reloading出现时依赖环境

• node v18.16.0
• vite@4.3.9
• vue@3.3.4
• ant-design-vue@3.2.20
• unplugin-vue-components@0.22.12

reloading截图

可能的原因分析

新路由加载时vite会对相关依赖项进行编译，触发依赖更新导致页面重启

解决方案

1. 放弃按需加载全量引入（冗余较多）
2. 本地开发环境全量引入ant-design-vue，生产环境按需引入（生产开发差异大，存在一些隐藏问题，如message、notification 等功能样式错误）
3. 使用optimizeDeps.include选项是指定哪些依赖需要进行预编译

import glob from 'glob' // glob@7.2.3
import vue from '@vitejs/plugin-vue' // @vitejs/plugin-vue
import { defineConfig} from 'vite' // vite@4.3.9
import Components from "unplugin-vue-components/vite"; // unplugin-vue-components@0.22.12
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  optimizeDeps: {
    include: glob
      .sync('node_modules/ant-design-vue/es/*/style')
      .map((path: string) => path.replace('node_modules/', ''))
  },
  plugins: [
    vue(),
    Components({
      dts: 'auto-import-ant.d.ts',
      resolvers: [
        AntDesignVueResolver({
          resolveIcons: true,
          importStyle: 'less'
        })
      ],
      directoryAsNamespace: true
    })
    /* ...其他plugin */
  ]
  /* ...其他UserConfig */
})