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

Ant Design Vue (ant-design-vue) 是一套基于 Vue 的 Ant Design 实现，它提供了一套丰富的 UI 组件库。在 Vite 环境下，为了实现按需加载，通常会使用动态导入 (dynamic import) 和 webpack 的模块优化功能，如 `import()` 或 `import.meta`。

当你只引入你需要的 Ant Design 组件时，例如：

<template>
  <div>
    <LazyLoad component={AntdButton} />
  </div>
</template>

<script>
import { LazyLoad } from 'ant-design-vue';
import AntdButton from '@ant-design-vue/button/dist/button.vue';

export default {
  components: {
    LazyLoad,
    // 使用动态导入按需加载 Button 组件
    AntdButton: () => import(AntdButton),
  },
};
</script>

按需加载的好处是可以减少初始加载时的体积，提高首屏渲染速度。然而，如果你的项目配置了 HMR（热更新），当按需加载的组件发生变化时，由于浏览器需要刷新页面以获取最新的 JavaScript 模块内容，可能会触发页面的重新加载(reloading)。这是因为 Vue 的 Hot Module Replacement 特性仅限于修改已存在的模块，而按需加载的新模块被视为新的。

解决这个问题的一种策略是禁用或降低 Vite 的 HMR 功能，或者使用第三方插件如 `vue-cli-plugin-vite-hmr-proxy` 来处理按需加载和 HMR 的兼容性问题。