qiankun icon indicating copy to clipboard operation
qiankun copied to clipboard

开启应用按需加载后出现资源加载失败

Open jxh150535011 opened this issue 2 years ago • 1 comments

出现 类似于 这样的报错 [@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);} `

jxh150535011 avatar Sep 22 '22 04:09 jxh150535011

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 仓库。

github-actions[bot] avatar Sep 22 '22 11:09 github-actions[bot]

请问这个问题解决了吗?

meoki-wong avatar Oct 06 '22 15:10 meoki-wong

请问这个问题解决了吗?

采用了这个沙箱模式,基本 (sandbox: {loose: true}) 能跑,有问题可以联系

jxh150535011 avatar Nov 03 '22 06:11 jxh150535011

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,若有任何问题,可评论回复。

github-actions[bot] avatar Dec 04 '22 00:12 github-actions[bot]