背景

修改公司后台管理系统（简称系统A）的 一个页面的文字，然后发现需要等待5-7秒才会热更新到页面。

刚开始怀疑是vite的问题。看完了整个vite的官方文档和热更新相关的issue。无果。

谷歌搜索。无果。

然后想起公司还有另外一个后台管理系统，也是基于 vite+vue3+typescript 简称系统B 做了下对比（都是修改几个文字）：

系统A：

修改一个字几百个请求，整个系统的组件都加载了，浏览器也扛不住呀。

系统B：

发现在系统A的store目录下的user.ts文件内 有一行代码：

const modules = import.meta.globEager("../pages/**/*.vue");

目的是获取用户信息的时候加载动态路由。

查看vite官方文档可以看到。globEager已经被废弃了（这是直接引入所有模块）
应该改成glob 这会把每个模块转译成异步加载(就是import动态导入)模块函数的方式。

备注：globEager这个api被废弃，但是功能还是支持的。在glob函数传入eager:true配置项即可.
const modules = import.meta.glob('./dir/*.js', { eager: true })

解决

globEager改成glob，也就是异步的方式引入组件

const modules = import.meta.glob("../pages/**/*.vue");

之前的引入方法

route.component = modules[`../pages/${route.component}/index.vue`]?.default;

改成

route.component = modules[`../pages/${route.component}/index.vue`];

完美解决。 （route.component是接口返回的动态路由名）

备注:主要是pinia的user控制动态路由权限的加载，所以需要glob组件。 如果不用到useUserStore的页面，也不会有这种问题，但是各种依赖肯定会引用到user的。所以必须解决这个问题。