问题复现场景
qiankun快照沙箱(IE和不支持proxy的低版本Chrome)下,进入子应用,f5刷新留在子应用,再点击切换到主应用的一个路由页面,此时如主应用该子页面是用代码分割懒加载加载css、js,则会发生主应用该子页样式丢失问题。
问题分析
在子应用跳转到主应用时,子应用的卸载需要一点点的时间,在这段时间内,主应用加载了,插入了 css,但是被子项目的 css 沙箱记录了,然后被移除了。父项目的事件监听也是一样的,所以需要在子项目卸载完成之后再跳转。
其实是子应用切到主应用时,要进行快照沙箱的切换(这个切换是循环遍历赋值,所以慢),切换过程需要时间,而主应用的css等资源加载在切换缝隙内,使用了子应用的沙箱机制,加载和插入到了子应用容器,js资源默认执行不受影响,因为加载后放到了内存里。
解决方案
临时解决办法:先复制一下 HTMLHeadElement.prototype.appendChild 和 window.addEventListener ,路由钩子函数 beforeEach 中判断一下,如果当前路由是子应用,并且去的路由是父应用的,则还原这两个对象。
const childRoute = ['/