qiankun
qiankun copied to clipboard
开启应用按需加载后出现资源加载失败
出现 类似于 这样的报错 [@umijs/runtime] load component failed ChunkLoadError: Loading chunk layouts__index failed.
发生场景如下,全部采用沙箱模式加载 基座应用O ,应用A 、B ,共享应用C
操作步骤 1 首次打开页面 发生 O -> A -> C -> C chunk 这条链路有效(理应也一样报错) 2 切换页面 发生 O -> B -> C -> C chunk 报异常
原因定位 发现 C chunk 加载过程中注入的window.proxy 与 C entry 本身执行时 定义的 window.proxy 不是同一个。导致 self['webpackChunkAppName'] 定义的对象不是同一个。从而 C chunk 加载成功回调用 都无法生效。
具体调试结果
C entry 执行的 window.proxy 与 chunk 的 window.proxy 访问到不同的 webpackChunkXXXX , 首次访问他们能访问到相同的对象。后续在页面不断切换过程中,发现window.proxy['webpackChunkXXXX'] 始终指向同一个对象,且内容加载记录越来越多,但是这个对象跟entry的 webpackChunkXXXX 对象已经不是同一个。
疑惑: 是不是 启用了预加载 导致 一开始打开的时候window.proxy 都是同一个对象,后续切换到B后,B的entry 因为预加载 所以绑定到之前的window.proxy,而C chunk 使用访问到新的proxy。 哎。。算了 先反馈吧,只能排到这里了
目前解决方式 1 A/B -> C 的过程 关闭sanbox 或设置sandbox: {loose: true} 2 调整webpack 构建产物,让他们在同一个可以被window.proxy 访问到的对象中 3 禁用C的按需加载
如下C的伪代码 ` entry window.TEMP_EVAL_FUNC = (function(window, self, globalThis){ var chunkLoadingGlobal = self["webpackChunkXXXX"] = self["webpackChunkXXXX"] || []; }.bind(window.proxy)(window.proxy, window.proxy, window.proxy);}
chunk window.TEMP_EVAL_FUNC = (function(window, self, globalThis){ with(window){( self["webpackChunkXXXX"] = self["webpackChunkXXXX"] || []).push([["vendors"],{}])} }.bind(window.proxy)(window.proxy, window.proxy, window.proxy);} `
Hello @jxh150535011. In order to facilitate location and troubleshooting, we need you to provide a realistic example. Please forking these link codesandbox or clone qiankun examples to your GitHub repository.
你好 @jxh150535011, 为了方便定位和排查问题,我们需要你提供一个重现实例,请提供一个尽可能精简的链接 codesandbox 或直接 clone qiankun examples,并上传到你的 GitHub 仓库。
请问这个问题解决了吗?
请问这个问题解决了吗?
采用了这个沙箱模式,基本 (sandbox: {loose: true}) 能跑,有问题可以联系
Since the issue was labeled with Need Reproduction
, but no response in 30 days. This issue will be close. If you have any questions, you can comment and reply.
由于该 issue 被标记为需要可复现步骤,却 30 天未收到回应。现关闭 issue,若有任何问题,可评论回复。