qiankun 主应用umi3加载子应用umi4无限刷新页面

67 阅读2分钟

场景

使用qiankun实现微前端的过程中出现了这样的一个问题,公司的基座应用是用umi3工程搭建的,属于一个老应用,在线上有四五年时间,装载了四五十个子应用在跑。有umi3,react,vue2,vue3各种不同技术栈,不同版本的微应用

我这里有个子应用需要接入进主应用里,技术栈用的umi4,各种配置都加上了,是先自己电脑上启动一个dev环境,去到线上做测试发现接入成功了,但是会持续的刷新页面

类似于 location.reload() 效果

尝试

1、查找location.reload()

一开始想着会不会是这个项目里有什么地方没处理好刷新操作,导致一直无限刷新。但是经过工具全局搜索发现并没有

2、各种加配置

想着会不会是某个路由冲突导致,路由前缀是否没设置好等等,百度搜索,大模型问题排查各种情况都试过了,但都得不到解决

3、排除法

因为前面已经有很多个不同技术栈接入成功,所以肯定不会是基座哪里有问题。一门心思认定是子应用的某个地方有问题。

4、奇妙

后面实在是没办法了,想着也同样本地启动主应用,试试看是不是要添加些什么才能兼容到umi4子应用。发现本地的主应用加载本地的子应用不会有问题

解决

github.com/umijs/qiank… github.com/umijs/umi/i…

查阅了一些资料,发现好像只有本地才会有这样的情况。于是干脆尝试本地打包成dist目录,然后本地启动dist目录,同样主应用也用打包后的。神奇的解决了。

结论

这个其实是 qiankun + umi4 开发模式(dev)和生产模式(build)行为差异导致的
尤其是 历史模式、资源路径、公用路由监听冲突 三类问题共同作用。

Umi4 的 dev 模式会自己主动监听路由和热更新,而 qiankun 也会监听路由,两者冲突,导致 dev 环境识别为子应用“脱离沙箱”,从而触发强制重新加载(类似 reload)。

这就是所谓 “线上不会,本地dev才会” 的根本原因。

Umi4 Dev 模式注入的热更新 / 路由监听与 Qiankun 沙箱机制造成冲突 → 热更新无法连接 → dev 自动 reload → 无限循环。

所以:

这是 必然现象,不是代码 bug,所有 qiankun 体系都存在。

解决办法就是:联调用 build,不用 dev。