一开始我们的本地开发运行的环境,如果没有启动子应用的话。对应的页面是白屏的。
问题:
- 当有关联资源需要跳转时无法跳转,需要额外打开一个浏览器tab页到环境上面执行操作。
- 当bug类型为纯ui-server端的内容时,需要手动启动bug相关连的全部子应用。
为了解决上述问题,ui项目需要支持加载远程子应用。
开发者只需要本地开启主应用以及需要进行开发的子应用即可,而不需要改动的其他子应用应该从线上环境进行加载。
实现方案:
我们知道qiankun的微前端实现是基于single-spa管理了子应用加载卸载等生命周期,
所有微前端应用是通过监听url变化动态加载资源的做法将 代码引入到 当前页面。
开发模式下,我们的本地环境会通过本机ip+端口号提供微前端应用的页面资源,
而线上环境其实也是会提供各个微前端应用的页面资源。
只需要在加载子应用的入口处做一层 逻辑处理 理论上可以实现加载远程子应用。
首先需要将获取子应用资源的请求代理到远程环境:
我们就有特定的url可以通过proxy去发送请求到远程环境
最终http://locationHost/proxy-sub-app/子应用入口/index.html
会被代理到 remoteUrl/子应用入口/index.html
.
到目前,我们已经实现了 加载远程 子应用。
现在的问题是,如何判断 哪些子应用需要从远程加载,哪些子应用从本地加载。
注意:远程子应用依赖的js也需要做代理
也就是localAppList是怎么来的?
可以留下你的思考。