【微前端开发环境下，加载远程子应用的实战。】

一开始我们的本地开发运行的环境，如果没有启动子应用的话。对应的页面是白屏的。
问题：

当有关联资源需要跳转时无法跳转，需要额外打开一个浏览器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是怎么来的？
可以留下你的思考。

【微前端开发环境下，加载远程子应用的实战。】相关推荐

flask keras 多线程环境下加载模型
keras 多线程环境下加载模型 Tensor Tensor is not an element of this graph. 问题场景 keras 使用flask 发布深度学习模型服务,模型有一个定 ...
Unity 编辑器环境下加载任意处资源 Resources.LoadAssetAtPath方法
1.Resources.LoadAssetAtPath 在Unity3D中如何实现动态加载资源的方法,就是把资源放在Resources目录下,使用Resources.Load方法即可动态加载资源. 但 ...
HTML运行到浏览器自动刷新,web前端开发之热加载—liveReload（浏览器自动刷新）...
今天主要写一下,如何配置,保存前端代码后,浏览器自动刷新的功能,双屏操作,真的会方便很多,对于前端开发来说,一边写样式,一边看效果,爽翻~ 图片发自简书App 一.开发环境 1.电脑系统:mac 2. ...
记前端项目首屏加载优化（网络篇）
继之前的一篇<记前端项目首屏加载优化(打包篇)>之后,这次来讲一讲我的首屏加载在网络方面的优化?. 写在前面资源加载是一个网站的展示在用户浏览器的必经之路,资源的请求次数和响应时间决定了 ...
使用Grunt搭建自动化的web前端开发环境-完整教程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! AD: jQuery在使用grunt,bootstrap在使用grunt, ...
【Yeoman】热部署web前端开发环境
本文来自 "简时空":<[Yeoman]热部署web前端开发环境>(自动同步导入到博客园) 1.序言记得去年的暑假看RequireJS的时候,曾少不更事般地惊为前端利 ...
前端自动化构建工具：用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化.开发和部署.在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新.ES6编译.代码压缩. ...
Grunt搭建自动化web前端开发环境--完整流程
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...
Linner和WebStorm前端开发环境搭建
Linner和WebStorm前端开发环境搭建注意: 1. Jdk1.6以上 2. 数据库推荐用MySQL 以下是前端工厂开发环境搭建,主要用到Lin ...

【微前端开发环境下，加载远程子应用的实战。】

【微前端开发环境下，加载远程子应用的实战。】相关推荐

最新文章

热门文章