WO2022135178A1 - 微前端系统、子应用加载方法、电子设备、计算机程序产品及计算机可读存储介质 - Google Patents

Abstract

本申请实施例提供一种微前端系统、子应用加载方法、电子设备、计算机程序产品及计算机可读存储介质，该微前端系统包括：路由注册服务、命令行工具和微前端运行框架，其中，所述路由注册服务，为独立维护运行的节点Node后端服务，配置为为所述主应用的微前端运行框架提供子应用的路由信息、所述子应用的加载模式和所述子应用的部署信息；所述命令行工具，配置为通过命令行提供新建子应用功能、接入子应用功能、服务注册功能；所述微前端运行框架，为运行在主应用的框架，配置为基于获取到的网络请求加载并运行所述子应用，并提供多框架下的子应用运行能力。

Description

微前端系统、子应用加载方法、电子设备、计算机程序产品及计算机可读存储介质

相关申请的交叉引用

本申请基于申请号为202011520184.6、申请日为2020年12月21日的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的全部内容在此引入本申请作为参考。

技术领域

本申请实施例涉及互联网技术领域，涉及但不限于一种微前端系统、子应用加载方法、电子设备、计算机程序产品及计算机可读存储介质。

背景技术

在进行前端开发的过程中，开发工程越来越庞大，并且产品功能复杂，代码冲突频繁，影响面巨大。针对这一系列的问题，微前端应运而生。微前端借鉴后端微服务的概念，将一个巨大的前端工程拆分成一个个的小工程，这些小工程完全具备独立开发、运行能力。整个系统由这些小工程协同合作，实现所有页面的展示与交互。

相关技术的微前端框架路由服务使用Nginx服务转发，效率低下，中心路由依靠Nginx服务的稳定性，容灾处理方案复杂，Nginx服务高度依赖Nginx服务配置，配置修改需要重启中心路由Nginx服务，维护成本高。

发明内容

本申请实施例提供一种微前端系统、子应用加载方法、电子设备、计算机程序产品及计算机可读存储介质，通过可独立维护运行的节点(Node)服务，提升扩容以及容灾能力，并提供多框架下子应用运行能力。

本申请实施例的技术方案是这样实现的：

本申请实施例提供一种微前端系统，包括：

路由注册服务、命令行工具和微前端运行框架，其中，

所述路由注册服务，为独立维护运行的Node后端服务，配置为为主应用的微前端运行框架提供子应用的路由信息、所述子应用的加载方式和所述子应用的部署信息；

所述命令行工具，配置为通过命令行提供新建子应用功能、接入子应用功能、服务注册功能；

所述微前端运行框架，为运行在所述主应用的框架，配置为基于获取到的网络请求加载并运行所述子应用，并提供多框架下的子应用运行能力。

本申请实施例提供一种子应用加载方法，所述方法由电子设备执行，并应配置为微前端系统，所述微前端系统包括：路由注册服务、子应用加载模块和子应用运行模块，所述方法包括：

获取配置为访问子应用的网络访问请求，所述网络访问请求中携带有所述子应用的统一资源定位符(URL，Uniform Resource Locator)地址；

基于所述子应用的URL地址从所述路由注册服务拉取所述子应用对应的路由信息；

当基于所述路由信息确定所述待访问页面为子应用页面时，所述子应用加载模块基于所述路由信息，从所述路由注册服务获取所述路由信息对应的子应用资源；

当需要加载所述子应用资源时，所述子应用加载模块加载所述子应用资源；

所述子应用运行模块运行所述子应用资源，并渲染出子应用的页面。

本申请实施例提供一种计算机可读存储介质，存储有可执行指令，配置为被处理器执行时，实现上述的基于微前端系统的子应用加载方法。

本申请实施例提供一种电子设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行上述的基于微前端系统的子应用加载方法。

本申请实施例提供一种计算机程序产品，包括计算机程序，所述计算机程 序被处理器执行时实现上述的基于微前端系统的子应用加载方法。

本申请实施例具有以下有益效果：

在本申请实施例提供的微前端系统，包括路由注册服务、命令行工具和微前端运行框架，通过独立维护运行的Node后端服务，如此能够提供很好的扩容和容灾能力，通过路由注册服务为主应用的微前端运行框架提供子应用的路由信息、加载方式和子应用的部署信息；通过命令行工具提供新建子应用、接入子应用、服务注册功能；通过提供多框架下的子应用运行能力。

附图说明

图1为本申请实施例提供的微前端系统的组成结构示意图；

图2为本申请实施例提供的微前端系统的另一种组成结构示意图；

图3为本申请实施例提供的基于微前端系统的子应用加载方法的实现流程示意图；

图4为本申请实施例提供的基于微前端系统的子应用加载方法的另一种实现流程示意图；

图5为本申请实施例提供的基于微前端系统的子应用加载方法的实现流程示意图；

图6为本申请实施例提供的微前端系统架构示意图；

图7为本申请实施例提供的微前端系统中通信机制的示意图；

图8为本申请实施例提供的子应用加载模块加载子应用资源的实现流程示意图；

图9为本申请实施例提供的JS沙箱的设计示意图；

图10为本申请实施例提供的应用分层示意图。

具体实施方式

为了使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请作进一步地详细描述，所描述的实施例不应视为对本申请的限制，本领域普 通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。除非另有定义，本申请实施例所使用的所有的技术和科学术语与属于本申请实施例的技术领域的技术人员通常理解的含义相同。本申请实施例所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

对本申请实施例进行进一步详细说明之前，对本申请实施例中涉及的名词和术语进行说明，本申请实施例中涉及的名词和术语适配置为如下的解释。

1)Vue框架：是一套构建用户界面的渐进式前端框架，Vue的核心库只关注视图层。

2)React框架：是配置为构建用户界面的JavaScript(JS)库，主要配置为构建用户界面，React能够传递多种类型的参数，如声明代码，渲染出用户界面、也可以是静态元素、也可以传递动态变量、甚至是可交互的应用组件。

3)JavaScript沙盒机制：是一种安全机制，为运行中的程序提供隔离环境，通过提供一个与外界隔绝的执行环境来运行JS代码，在微前端中常用来帮助独立上线互不干扰的代码，解耦，减少维护成本。

4)Web Worker：是超文本标记语言(HTML，HyperText Markup Language)5提供的一个JavaScript多线程解决方案，可以将一些大计算量的代码交由Web Worker运行而不冻结用户界面。它独立于其他脚本，不会影响页面的性能。

5)影子文件对象模型(Shadow Dom，Shadow Document Object Model)：是超文本标记语言的规范，它允许在文档渲染时插入一颗文档对象模型元素子树，它允许浏览器开发者封装自己的HTML标签、层叠样式表(CSS：Cascading  Style Sheets)样式和特定的JavaScript代码、同时开发人员也可以创建类似<input>、<video>、<audio>等这样的自定义的一级标签。

6)Props传输：父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件收到后根据参数的不同来渲染不同的内容，或者执行操作，这个正向传递数据的过程是通过Props来实现的。

7)自定义事件(Custom Event)传输：JavaScript与HTML之间的交互是通过事件来实现的，事件是文档或浏览器窗口发生的一些特定的交互瞬间，通过JavaScript可以在任何时刻触发特定的自定义事件，并且这些事件与浏览器创建的事件是相同的。

8)发送消息PostMessage：是HTML5引入的应用程序接口方法，支持来自不同源的脚本采用异步方式进行有效的通信，可以实现跨文本文档，多窗口跨域消息传递，多配置为窗口间数据通信，这也使它成为跨域通信的一种有效的解决方案。

9)Iframe：是超文本标记语言标签，配置为创建包含另外一个文档的内联框架(即行内框架)。

10)Node.js：是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。

11)Polyfilling：表示某个方法在JavaScript规范中已存在，但是特定的JavaScript引擎尚不支持该方法，那么可以通过手动实现它，并用以填充内建原型。

12)Single-SPA：是一套微前端框架，它接管浏览器地址切换以达到切换应用的目的，也管理着各个应用从启动到销毁的生命周期，在生命周期变化过程中可以添加额外的功能(例如动画)，同时Single-SPA也为不同的SPA框架提供了插件，以整合现存的应用。

13)微前端：包括主应用和子应用，是将应用程序划分为多个垂直部分的 切片，每个切片都是从底层数据库到上层的用户界面构建的。主应用的是一个框架，主要是集成登录、菜单、导航，以及提供全局数据和公共方法，而具体的功能模块尽量在子应用中实现。例如，主应用的功能可以包括：登录、菜单和导航；子应用的功能可以对应具体的页面内容。

14)模块打包器(webpack)：它用于分析项目结构，找到JavaScript模块以及浏览器不能直接运行的拓展语言，并将其转换和打包为合适的格式供浏览器使用。参见图10，图10本申请实施例提供的应用分层示意图，下面结合实际的后管系统为例进行说明，后管系统需要登录鉴权，有左侧的菜单栏和上方的个人信息导航栏，中间部分是具体的页面内容，基于这个特点，可以把后管系统分成主应用(登录模块+菜单模块+导航模块)和子应用(具体的内容页面模块)两个部分。主应用的定位是主体框架，主要集成登录模块、菜单模块、导航模块，并提供全局数据和公共方法，子应用需要额外考虑独立性，如果是在微前端的环境中，子应用是作为整体应用的一部分的，因此会与主应用有着紧密的联系，但是子应用本身也应该做到相对的独立，脱离了主应用也能单独运行，子应用既能集成在主应用中以微前端的架构运行，也能够脱离主应用单独运行，例如，主应用为网页搜索应用，子应用为广告推荐应用、热搜应用等等。

相关技术的微前端方案中路由服务使用Nginx服务转发，效率低下，中心路由依靠Nginx服务的稳定性，容灾处理方案复杂，Nginx方案高度依赖Nginx服务配置，配置修改需要重启中心路由Nginx服务，维护成本高，通信机制单一，会造成应用过多后事件难以管理，使用Iframe作为应用加载器，缺少对子应用的编排和控制能力。相关技术的微前端方案，没有考虑多前端框架下的子应用运行能力，没有考虑子应用在多级路由下的激活能力，没有考虑子应用通过主应用主动调用激活的能力；没有提供资源跨域解决方案，相关技术的微前端方案资源统一部署，没有解决在资源分布式部署后，前端跨域调用资源的问题，包括但不限于接口请求，私有静态资源，内容分发网络(CDN，Content Delivery Network)静态资源，Web Worker资源等。

本申请实施例提供一种微前端系统，该系统提供应用加载器模块配置为加 载各个不同框架的前端应用，如Vue框架、React框架等；实现JavaScript沙盒机制，保证JS环境隔离；该系统还提供子应用Web Worker的跨域处理，通过子应用打包注入CSS前缀、子应用运行时注入CSS前缀、子应用Shadow Dom方式加载等方式实现CSS隔离，提供包括Props传递、Custom Event、PostMessage在内的三种父子应用通信机制，提供一个路由注册服务，提供中心化的路由发现能力，且兼容支持原始Iframe下的运行。

下面说明本申请实施例提供的微前端系统的示例性应用，图1为本申请实施例提供的微前端系统的组成结构示意图，如图1所示，该微前端系统100包括：路由注册服务101、命令行工具102和微前端运行框架103，其中，路由注册服务101，为独立维护运行的Node后端服务，配置为为主应用的微前端运行框架提供子应用的路由信息、子应用的加载方式和子应用的部署信息。通过提供路由注册服务，作为一个可独立维护运行的Node服务，提供很好的扩容，容灾能力，维护微前端的子应用的注册和加载路由。

作为示例，路由注册服务可以是一个提供超文本传输协议(HTTP，Hyper Text Transfer Protocol)服务的服务器，在实际实现时可以由Node.js实现，通过Koa框架实现一套记录路由、删除路由、查询路由、登录授权等功能的网页端服务器，数据库使用关系型数据库管理系统(例如MySQL)。路由注册服务101可以是由任何服务器或者语言实现同样功能的服务，如Java Spring Cloud，C++Server Kit等。

由于该路由注册服务是独立维护运行的Node后端服务，在该路由注册服务中还可以前置一个负载均衡服务，在获取到网络请求后，能够基于各个路由注册服务的负载，将网络请求分配至负载较小的路由注册服务，并且在多个路由注册服务的负载都较大时，还能提供很好的扩容和容灾能力。

命令行工具102，配置为通过命令行提供新建子应用功能、接入子应用功能、服务注册功能。

作为示例，可以通过Inquirer.js提供一个用户与命令行交互的工具，也即该 命令行工具102，在实现时，该命令行工具可以是命令行界面(CLI，command-line interface)工具，还可以是npm库或者图形用户界面(GUI，Graphical Us er Interface)工具。通过该命令行工具102可以接收用户输入的用户新建子应用、接入子应用等命令，并基于接收到的命令进行服务注册。

微前端运行框架103，为运行在主应用的框架，配置为基于获取到的网络请求加载并运行子应用，并能够提供多框架下的子应用运行能力。

作为示例，主应用也即任意接入微前端运行框架的应用。在实现时，微前端运行框架可以是基于Single-SPA提供多框架子应用加载能力。

本申请实施例提供的微前端系统，包括路由注册服务、命令行工具和微前端运行框架，其中，路由注册服务，为独立维护运行的Node后端服务，如此能够提供很好的扩容和容灾能力，该路由注册服务为主应用的微前端运行框架提供子应用的路由信息、加载方式和子应用的部署信息；命令行工具，配置为通过命令行提供新建子应用、接入子应用、服务注册功能；微前端运行框架，为运行在主应用的框架，配置为基于获取到的网络请求加载并运行子应用，并能够提供多框架下的子应用运行能力。

在一些实施例中，如图1所示，微前端系统还包括：与路由注册服务对应的前端界面104，通过前端界面104获取针对子应用注册需要设置的子应用注册信息，并将子应用注册信息发送至路由注册服务。

子应用注册信息包括：子应用框架、子应用路由模式、子应用加载模式。例如，子应用框架可以包括Vue、React等，子应用路由模式可以包括哈希模式(hash)、历史(history)模式等，子应用加载模式可以包括：JS加载模式、CSS加载模式、HTML加载模式等。

在一些实施例中，子应用注册信息还可以包括服务名称、子应用本地开发环境地址、子应用线上环境地址等。

路由注册服务101，配置为接收子应用注册信息，并基于子应用注册信息注册子应用。

在一些实施例中，该命令行工具102配置为接收新建子应用命令，获取子应用的路由信息、资源信息和子应用模板信息。

在本申请实施例中，子应用的路由信息可以包括：子应用资源地址和子应用资源注册路径，子应用的资源信息可以包括子应用资源名、子应用资源类型，子应用模板信息可以包括模板标识。

命令行工具102基于子应用模板信息生成子应用模板，并向路由注册服务101发送子应用新建请求，子应用新建请求中携带有路由信息和资源信息。在一些实施例中，路由注册服务101接收到子应用新建请求后，基于该子应用新建请求中携带的路由信息和资源信息新建子应用。

在本申请实施例中，在命令行工具102向路由注册服务发送子应用新建请求之后，命令行工具102向部署服务器发送子应用部署请求，部署服务器基于部署请求中的子应用资源地址进行资源部署。

在一些实施例中，命令行工具102，还配置为接收接入子应用命令，获取子应用的路由信息和资源信息，并向路由注册服务101发送子应用接入请求，子应用接入请求中携带有子应用的路由信息和资源信息；

路由注册服务101，还配置为接收子应用接入请求，并基于子应用的路由信息和资源信息进行子应用注册。

在一些实施例中，图1所示的微前端运行框架103的组成结构如图2所示包括：基础功能库模块1031、通信模块1032、统一路由模块1033、子应用加载模块1034和子应用运行模块1035，其中：

基础功能库模块1031，配置为提供公共方法和公共组件，通过全局变量和函数的方式将公共方法和公共组件注入到子应用，供子应用使用。

在一些实施例中，基础功能库模块还可以提供常见的Polyfilling供子应用使用。

通信模块1032，配置为支持主应用到子应用、子应用到子应用和子应用到主应用的通信机制。

在本申请实施例中，主应用到子应用的通信机制包括道具Props传输和自定义事件Custom Event传输，子应用到子应用的通信机制包括不同源脚本异步PostMessage传输，子应用到主应用的通信机制包括Custom Event传输。Props传输可以提供响应式的双向数据传递能力；Custom Event可以基于组件定义事件的分发和注册，避免应用过多后无关事件影响；PostMessage提供全局的事件发送与接收，用于实现广播类的消息通知。本申请实施例中，在各个通信维度都有相应的实现方案，手段丰富，副作用小。

本申请实施例提供三种通信支持，包括Props传输，Custom Event传输，PostMessage传输，Props传输可以提供响应式的双向数据传递能力，Custom Event传输可以基于组件定义事件的分发和注册，避免应用过多后无关事件影响，PostMessage传输提供全局的事件发送与接收，配置为实现广播类的消息通知，在各个通信维度都有响应的实现方案，手段丰富，副作用小。

统一路由模块1033，配置为监听浏览器路由变更。

在实现时，统一路由模块1033利用Single-SPA来监听浏览器路由变更，加载和激活、运行指定框架下的子应用或主应用子路径，主应用初始化时从路由注册服务拉取该统一路由模块1033下的子应用注册路径，资源等信息。

子应用加载模块1034，配置为基于从路由注册服务获取到的子应用资源地址，获取并加载子应用资源地址对应的资源。

作为示例，子应用加载模块1034在加载子应用资源地址对应的资源时，会根据子应用注册信息中的子应用加载模式对子应用资源进行加载，其中，该子应用加载模块加载子应用的模式至少包括HTML实体模式、JS实体模式和Iframe模式。当加载模式为HTML实体模式时，加载HTML文件，当加载模式为JS实体模式时加载JS文件，当加载模式为Iframe模式时，直接将URL嵌到Iframe里打开。

在一些实施例中，子应用加载模块1034，在获取到子应用资源地址对应的资源后，基于该资源获取子应用的业务代码，并对获取到的子应用的业务代码进行解析，并将解析后的业务代码传输至子应用运行模块1035。

子应用运行模块1035，配置为运行子应用资源地址对应的资源，以渲染出子应用页面。

子应用运行模块1035，包括运行环境沙箱，在子应用运行模块得到解析后的业务代码，将解析后的业务代码在运行环境沙箱中执行。

在实际实现时，运行环境沙箱包括：JS沙箱、CSS沙箱和Web Worker沙箱。利用with语句和代理实现基本的JS沙箱，在子应用可控的情况下做到基本安全，通过堆栈检查，关键字检查来克服作用域逃逸手段。其中，代理是子应用可访问的对象集合，JS沙箱能够让子应用的业务代码只能访问代理里面可访问的对象，不能访问其他子应用或者主应用的对象。当解析后的业务代码在JS沙箱中执行时，解析后的业务代码，以代理作为全局根对象放入沙箱中执行，也就是说业务代码只能访问到代理的对象以及属性而不能影响到外层的其他变量，做到安全的隔离。

在本申请实施例中提供三种CSS沙箱手段：一是基于子应用webpack打包前缀，子应用webpack打包前缀也即为每个子应用的样式分配单独的命名空间，如此避免样式互相影响；二是基于子应用运行时前缀，在子应用运行时动态为子应用的样式增加前缀，来避免样式的冲突；三是基于Shadow Dom，基于Shadow Dom的CSS沙箱能够提供浏览器级别的样式隔离能力，可以做到完全隔离。

Web Worker沙箱，配置为内联运行分配给Web Worker的脚本文件，以实现Web Worker的跨域调用。

子应用资源加载模块在加载资源时劫持*.worker.js的文件，把该文件作为文本内容加载回浏览器内存中，利用Web Worker沙箱内联运行Web Worker的脚本文件(*.worker.js)，内联运行的Web Worker脚本文件不会产生跨域问题，从而解决Web Worker的跨域问题。

在一些实施例中，微前端系统还包括支持跨域资源共享的服务器。在实现时，该服务器自动带有跨源资源共享(CORS，Cross-origin Resource Sharing)头，从而能够支持跨域资源共享，使得浏览器可以跨域访问私有静态资源、CD N静态资源。

本申请实施例提供包括接口资源在内的服务器端CORS方案支持跨域，CDN静态资源提供CORS方案，Web Worker提供内联构建加载器和内联运行加载器解决跨域调用worker问题。本申请实施例还提供缓存，预加载，Web Worker等手段加速子应用的加载和调用。

在一些实施例中，如图2所示，微前端运行框架103还包括：数据管理模块1036、性能监控模块1037和错误处理模块1038，其中：

数据管理模块1036，配置为通过Props传输机制提供的数据，实现数据双向绑定功能，从而共享父子应用的数据。

在本申请实施例中，父子应用在一个相同的运行环境中加载的，主应用会传一个有监听功能的对象给子应用，子应用变更的时候能够被该对象监听到，从而能够实现父子应用数据的共享。

性能监控模块1037，配置为监控子应用的加载时长、运行时长。

在实现时，主应用通过预设的函数监控子应用的加载时长，运行时长等信息。

错误处理模块1038，配置为监控并处理子应用在加载和运行过程中的错误信息。

在实现时，主应用通过注册window.addEventListener('error',errorHandler)、window.addEventListener('unhandledrejection',errorHandler)来监控子应用报错并处理，从而能够及时处理子应用的错误信息，保证微前端系统的可靠性。

基于前述实施例提供的微前端系统，本申请实施例再提供一种基于微前端系统的子应用加载方法，应配置为上述实施例提供的微前端系统，图3为本申请实施例提供的基于微前端系统的子应用加载方法的实现流程示意图，如图3所示，该方法包括：

步骤S301，获取网络访问请求。

作为示例，该网络访问请求中携带有URL地址。该网络访问请求可以是由用户的网络访问操作而触发的。该功能网络访问请求可以是配置为访问主应用的请求，还可以是访问子应用的请求。当该网络访问请求为访问子应用的网络访问请求时，可以是用户在浏览器中输入主应用的URL地址，并且浏览器渲染出主应用界面后，用户基于主应用界面中提供的子应用的图标而触发对子应用的网络访问请求。

在本申请实施例中，在步骤S301之前，该微前端系统已经完成了主应用部署和路由注册服务的部署，并且已通过CLI工具完成子应用创建和注册。

步骤S302，基于URL地址从微前端系统的路由注册服务拉取对应的路由信息。

作为示例，步骤S302在实现时，可以是将URL地址发送至路由注册服务，路由注册服务根据该URL地址，确定要访问的应用标识，然后在基于该应用标识拉取对应的路由信息。

步骤S303，当基于路由信息确定待访问页面为子应用页面时，微前端系统的子应用加载模块基于路由信息，向路由注册服务获取路由信息对应的子应用资源。

作为示例，在获取到应用对应的路由信息之后，如果确定待访问页面为子应用页面时，路由注册服务即可根据该路由信息，获取对应的子应用资源，例如可以是CSS、JS等静态资源文件。

步骤S304，当需要加载子应用资源时，子应用加载模块加载子应用资源。

在本申请实施例中，子应用加载模块在获取到子应用资源后，首先要判断是否需要加载该子应用资源，当需要加载子应用资源时再基于子应用的加载模式加载子应用资源，当确定不需要加载子应用资源时，说明该子应用资源已经进行过了加载，此时直接运行该子应用资源，以渲染子应用页面。

步骤S305，微前端系统的子应用运行模块运行子应用资源，以渲染出子应用的页面。

在一些实施例中，子应用加载模块在获取到子应用资源后，基于该子应用 资源获取子应用的业务代码，并对获取到的子应用的业务代码进行解析，并将解析后的业务代码传输至子应用运行模块。子应用运行模块得到解析后的业务代码，将解析后的业务代码在自身运行环境沙箱中执行，以渲染出子应用的页面。

在实际实现时，运行环境沙箱包括：JS沙箱、CSS沙箱和Web Worker沙箱。其中：利用with语句和代理实现基本的JS沙箱，在子应用可控的情况下做到基本安全，通过堆栈检查，关键字检查来克服作用域逃逸手段。其中，代理是子应用可访问的对象集合，JS沙箱能够使得子应用的业务代码只能访问代理里面可访问的对象，不能访问其他子应用或者主应用的对象。当解析后的业务代码在JS沙箱中执行时，解析后的业务代码，以代理作为全局根对象放入沙箱中执行，也就是说业务代码只能访问到代理的对象以及属性而不能影响到外层的其他变量，做到安全的隔离。

在本申请实施例中提供三种CSS沙箱手段：一是基于子应用webpack打包前缀，子应用webpack打包前缀也即为每个子应用的样式分配单独的命名空间，如此避免样式互相影响；二是基于子应用运行时前缀，通过子应用运行时动态加载卸载应用样式来避免样式的冲突；三是基于Shadow Dom，基于Shadow Dom的CSS沙箱能够提供浏览器级别的样式隔离能力，可以做到完全隔离。

Web Worker沙箱，配置为内联运行分配给Web Worker的脚本文件，以实现Web Worker的跨域调用。子应用资源加载模块在加载资源时劫持*.worker.js的文件，把该文件作为文本内容加载回浏览器内存中，利用Web Worker沙箱内联运行Web Worker的脚本文件(*.worker.js)，内联运行的Web Worker脚本文件不会产生跨域问题，从而解决Web Worker的跨域问题。

在本申请实施例提供的基于微前端系统的子应用加载方法中，在获取到网络访问请求之后，基于网络访问请求中携带的URL地址，从微前端系统的路由注册服务拉取对应的路由信息，当基于路由信息确定待访问页面为子应用页面时，微前端系统的子应用加载模块基于路由信息，从路由注册服务获取路由信息对应的子应用资源，在需要加载子应用资源时，子应用加载模块加载子应用 资源再由微前端系统的子应用运行模块运行子应用资源，以渲染出子应用的页面。

在一些实施例中，如图4所示，在步骤S304之前，该基于微前端系统的子应用加载方法还包括：

步骤S003，确定子应用资源是否被预加载或者是否被打开。

作为示例，当子应用资源没有被预加载并且没有被打开时，确定子应用资源需要被加载，此时进入步骤S304；当子应用资源已经被预加载或者已经被打开时，确定子应用资源不需要再次加载，此时进入步骤S305。如此能够加速子应用的加载和调用。

在一些实施例中，在进行子应用加载之前，需要先进行子应用的注册和部署，子应用注册过程可以通过以下步骤实现：

步骤S001，获取针对子应用注册需要设置的子应用注册信息，并将子应用注册信息发送至路由注册服务。

作为示例，子应用注册信息至少包括：子应用框架、子应用路由模式、子应用加载模式。

在微前端系统中可以包括与路由注册服务对应的前端界面，还可以包括配置为新建子应用及接入子应用的命令行工具，对应地，步骤S001在实现时，有两种实现方式：

一、通过路由注册服务对应的前端界面，获取针对子应用注册的输入操作，并基于输入操作确定子应用注册信息。

当基于第一种方式获取子应用注册信息时，首先要基于打开该前端界面的操作指令呈现该前端界面，然后通过该前端界面接收针对子应用注册的输入操作，该输入操作为输入子应用注册需要设置的参数，例如可以包括：服务名称、子应用框架、子应用本地开发环境地址、子应用线上环境地址、子应用注册子路由、子应用路由模式(hash或者history)、子应用加载模式等。

在一些实施例中，该前端界面还提供有确定注册的图形控件，在用户确定完成对子应用注册信息的设置后，可以点击或者触控该图形控件，以将子应用注册信息发送至路由注册服务。在将子应用注册信息发送给路由注册服务时，可以是通过向路由注册服务发送一个子应用注册的HTTP请求，该HTTP请求中可以携带有子应用注册信息。

二、通过命令行工具接收新建子应用命令，获取针对新建子应用的输入操作，并基于输入操作确定子应用注册信息。

与第一种实现方式类似，在基于命令行工具获取子应用注册信息时，首先要启动命令行工具，然后通过该命令行工具接收新建子应用命令，并进而获取针对新建子应用的输入操作，该输入操作为输入子应用注册需要设置的参数，继而根据该输入操作获取子应用注册信息，例如可以包括子应用资源名、子应用资源地址、子应用资源类型、子应用资源注册路径等信息，在实现时，还需要通过命令行工具选择子应用模板标识，然后由命令行工具自动生成对应模板并注入子应用资源地址、子应用资源注册地址等信息。在将子应用注册信息发送至路由注册服务时，可以是通过输入发送信息命令，基于该发送信息命令把子应用注册信息发送到路由注册服务。

步骤S002，路由注册服务接收子应用注册信息，并基于子应用注册信息注册子应用。

通过上述的步骤S001至步骤S002，利用该微前端系统，能够自行对子应用的路由信息和资源信息进行注册，从而提高注册子应用的灵活性。

在一些实施例中，图3所示的步骤S304“当需要加载子应用资源时，子应用加载资源加载子应用资源”可以通过以下步骤实现：

步骤S3041，当需要加载子应用资源时，获取子应用的框架标识和资源加载模式。

作为示例，子应用的框架标识可以包括Vue、React等，资源加载模式可以包括：JS实体加载模式、CSS实体加载模式、Iframe加载模式等。

步骤S3042，根据资源加载类型，在框架标识对应的子应用框架中加载子应用资源。

作为示例，当加载模式为HTML实体模式时，加载HTML文件，当加载模式为JS实体模式时加载JS文件，当加载模式为Iframe模式时，直接将URL嵌到Iframe里打开。

在一些实施例中，如图5所示，在步骤S302之后，还可以执行以下步骤：

步骤S201，基于路由信息确定待访问页面是否为主应用页面。

作为示例，当基于路由信息确定待访问页面为主应用页面时，执行步骤S202；当基于路由信息确定待访问页面为子应用页面时，进入步骤S303。

步骤202，根据生命周期确定主应用当前挂载的子应用。

步骤S203，从当前挂载的子应用中确定要渲染的目标子应用。

作为示例，步骤S203可以是根据预设规则从当前挂载的子应用中确定要渲染的至少一个目标子应用，例如可以是从当前挂载的子应用中选择访问次数最多的一个或多个确定为目标子应用。

步骤S204，基于暴露的加载函数和目标子应用，模拟路由切换，获取目标子应用的子应用资源和主应用资源。

作为示例，在待访问页面为主应用页面时，那么首先会根据路由信息获取主应用资源。在本申请中，由于加载函数是暴露的，那么加载函数可以被主应用主动调用，当主应用主动调用暴露的加载函数时，能够模拟路由切换，从而触发微前端系统的子应用加载模块获取目标子应用的子应用资源。

步骤S205，加载并运行主应用资源和子应用资源，以在渲染出的主应用的页面中渲染出子应用。

步骤S205在实现时，首先加载并运行主应用资源，以渲染出主应用界面，进而再运行子应用资源，也渲染出子应用页面，如此主应用可以主动渲染子应用，而不用依赖于路由注册。

在上述步骤S201至步骤S205所在的实施例中，当待访问页面为主应用页 面时，可以根据主应用的生命周期确定出当前挂载的子应用，并基于预设原则确定出目标子应用，并且通过调用暴露的加载函数，模拟路由切换，获取目标子应用的子应用资源，并在渲染出的主应用页面中显示子应用页面，从而实现主应用对子应用的主动渲染。

下面，将说明本申请实施例在一个实际的应用场景中的示例性应用。

图6为本申请实施例提供的微前端系统示意图，如图6所示，该微前端系统包括：路由注册服务601与该路由注册服务相应的前端页面、子应用接入和生成的CLI工具602、主应用的微前端运行框架603。

路由注册服务601，为微前端运行框架603提供子应用的路由信息、加载方式以及子应用的部署信息。

在实现时，可以提供一个前端界面以进行子应用路由注册，通过该页面可以对路由注册需要的参数进行设置，需要设置的参数包括但不限于：服务名称、子应用框架、子应用本地开发环境地址、子应用线上环境地址、子应用注册子路由、子应用路由模式(hash或者history)、子应用加载模式。

路由注册服务601是一个提供HTTP服务的服务器，主要由Node.js实现，通过Koa框架实现一套记录路由、删除路由、查询路由、登录授权等功能的网页服务器，数据库可以使用MySQL，也可以使用其他形式的数据库。

在实现时，路由注册服务可以是Node后端服务，通过该Node后端服务接收子应用的注册信息，应用加载器通过该Node后端服务解析和发现子应用，并通过信息确定如何加载子应用的资源。多个Node单服务通过PM2启动，PM2是一个带有负载均衡功能的Node应用进程管理器另外路由注册服务中还可以包括一个负载均衡服务，配置为提供服务的容灾保活和扩容能力。

CLI工具602，提供包括新建子应用、接入子应用、服务注册和部署等功能。

在实现时，通过Inquirer.js提供一套命令行工具，提供包括新建子应用、接入子应用、服务注册和部署等功能。

新建子应用在实现时，可以是用户首先在命令行输入新建子应用命令，并 填写子应用资源名、子应用资源地址、子应用资源类型、子应用资源注册路径，并选择子应用模板，CLI工具自动生成对应模板并注入路由信息，并把资源信息自动注册到路由注册服务。

接入子应用在实现时，可以是用户在命令行输入接入子应用命令，并填写子应用资源名、子应用资源地址、子应用资源类型、子应用资源注册路径，CLI工具自动寻找子应用入口文件，并添加主应用所需的生命周期函数，CLI工具自动把资源信息自动注册到路由注册服务。

服务注册功能在实现时，CLI工具通过携带新建子应用命令，并填写子应用资源名、子应用资源地址、子应用资源类型、子应用资源注册路径等参数，通过HTTP请求发送给路由注册服务。

部署功能在实现时，CLI工具通过HTTP请求发送部署请求至路由注册服务。

微前端运行框架603，是一个运行在主应用的框架，主应用还可以称为父应用或者应用程序外壳(APP shell)，APP shell包括一个公共资源库、应用加载器、资源装载器(Single-SPA的封装)和运行环境沙箱。运行环境沙箱包括js沙箱、Web Worker内联沙箱和CSS环境隔离沙箱。APP shell也支持Iframe模式的运行。

主应用是任意接入微前端运行框架的应用。

如图6中的603所示，该微前端运行框架包括基础功能库、通信模块、数据管理模块、性能监控模块、错误处理模块、统一路由模块、子应用加载模块和子应用运行模块。

基础功能库，提供常见的polyfills、公共方法和组件，通过全局变量和函数等方式注入到子应用，供子应用使用。

通信模块，通过Custom Event提供事件通信，通过PostMessage提供消息通信，通过生命周期中Props传递提供系统数据通信。

图7为本申请实施例提供的微前端系统中通信机制的示意图，如图7所示，主应用到子应用的通信方式可以包括：Props和Custom Event两种通信机制， 子应用到主应用的通信方式可以包括：Custom Event(组件)和Custom Event(window)两种通信机制，子应用与子应用之间的通信方式包括：PostMessage和广播信道(BroadcastChannel)两种通信方式。

数据管理模块，通过Props提供的数据，可以实现数据双向绑定功能，共享父子应用的数据。

性能监控模块，配置为实现主应用通过函数对子应用的加载时间，运行时间等数据的监控。

错误处理模块，配置为监控并处理子应用在加载和运行过程中的错误信息。

作为示例，主应用通过注册监听器来监控子应用报错并处理，其中，所注册的监听器包括window.addEventListener('error',errorHandler)和window.addEventListener('unhandledrejection',errorHandler)。

统一路由模块，利用Single-SPA来监听浏览器路由变更，加载和激活运行指定框架下的子应用或主应用子路径，主应用初始化时从路由注册服务拉取该统一路由模块下的子应用注册路径，资源等信息。

子应用加载模块，配置为加载子应用资源。

图8为本申请实施例提供的子应用加载模块加载子应用资源的实现流程示意图，如图8所示，该流程包括：

步骤S801，基于获取到的网络请求，从路由注册服务拉取路由以及静态资源。

作为示例，该网络请求中携带有URL地址，步骤S801在实现时，可以是基于该URL地址从路由注册服务确定该URL地址对应的应用标识，路由注册服务再根据该应用标识确定对应的路由信息，并基于路由信息获取静态资源。

步骤S802，资源加载器加载子应用资源。

资源加载器可以加载不同框架的子应用，并且可以加载HTML Entry，JS Entry模式和Iframe模式，HTML模式通过HTML中的引用资源加载静态文件，js模式通过js中的动态加载资源，也提供传统的Iframe模式加载子应用。

在本申请实施例中，考虑到性能和跨域影响，资源加载器还可以提供预加 载、缓存、idle加载等手段。

步骤S803，在资源加载器加载出子应用资源后，进行资源信息注册。

作为示例，在资源加载器加载出子应用资源后，在内存里注册加载出的子应用资源信息。

子应用加载模块包括资源加载器和资源装载器，其中，资源装载器是基于Single-SPA的封装，能够提供多前端框架下的子应用运行能力，Single-SPA提供了路由监听的功能，在应用路由切换时，会根据生命周期，加载对应子应用的框架代码和业务代码，从而实现运行不同框架和多级路由激活能力；并且通过暴露加载函数，模拟路由切换，实现主应用主动调用激活能力。

子应用运行模块，包括JS沙箱和CSS沙箱(非传统的Iframe模式存在)，子应用运行模块负责加载子应用加载模块拉取回来的js资源等。

JS沙箱设计如图9所示，利用with函数901和代理902实现基本的js沙箱，在本申请实施例中，能够实现Proxy代理和快照代理模式，快照代理模式兼容不支持ES6Proxy的环境。如图9所示，通过应用加载器的资源加载器解析后的子应用实际代码903，放入代理沙箱中执行。并且对于常见的作用域逃逸手段，通过堆栈检查，关键字检查来进行防止，从而在子应用可控的情况下做到基本安全。

在本申请实施例中，提供以下三种CSS沙箱手段：

第一、基于子应用webpack打包前缀。子应用需要统一接入打包工具，并对每个子应用的样式分配单独的命名空间；

第二、基于子应用运行时前缀。

某些样式很难支持，例如@keyframes，@font-face，@import等，并且动态加载的<link>样式需要特殊处理，因此可以在子应用运行时，为子应用的样式增加前缀，来避免样式的冲突。

第三、基于Shadow Dom。Shadow Dom需要处理shadow边界、事件丢失、访问控制(shadowRoot)等问题。

本申请实施例提供的微前端系统，提供路由注册服务，作为一个可独立维 护运行的Node服务，提供很好的扩容，容灾能力，维护微前端的子应用的注册和加载路由；并且基于Single-SPA提供多框架下的子应用运行能力，基于定制化的加载方案，提供主应用主动渲染子应用能力，不一定需要依赖路由注册；另外在通信机制上供三种通信支持，包括Props传递，Custom Event，PostMessage，Props传递可以提供响应式的双向数据传递能力，Custom Event可以基于组件定义事件的分发和注册，避免应用过多后无关事件影响，PostMessage提供全局的事件发送与接收，配置为实现广播类的消息通知，在各个通信维度都有响应的实现方案，手段丰富，副作用小；该微前端系统提供包括接口资源在内的服务器端CORS方案支持跨域，私有静态资源、CDN静态资源提供CORS方案支持跨域，Web Worker提供内联构建加载器和内联运行时加载器解决跨域调用worker问题，还提供缓存，预加载，Web Worker等手段加速子应用的加载和调用；并且提供运行时加载子应用的方案，可以在运行时改变子应用渲染内容，交互逻辑，提供更高自由性。

本申请实施例提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行本申请实施例上述的基于微前端系统的子应用加载方法。

本申请实施例提供一种存储有可执行指令的存储介质，其中存储有可执行指令，当可执行指令被处理器执行时，将引起处理器执行本申请实施例提供的子应用加载方法，例如，如图3、图4及图5示出的子应用加载方法。

在一些实施例中，存储介质可以是计算机可读存储介质，例如，铁电存储器(FRAM，Ferromagnetic Random Access Memory)、只读存储器(ROM，Read Only Memory)、可编程只读存储器(PROM，Programmable Read Only Memory)、可擦除可编程只读存储器(EPROM，Erasable Programmable Read Only Memory)、带电可擦可编程只读存储器(EEPROM，Electrically Erasable Programmable Read Only Memory)、闪存、磁表面存储器、光盘、或光盘只读 存储器(CD-ROM，Compact Disk-Read Only Memory)等存储器；也可以是包括上述存储器之一或任意组合的各种设备。

在一些实施例中，可执行指令可以采用程序、软件、软件模块、脚本或代码的形式，按任意形式的编程语言(包括编译或解释语言，或者声明性或过程性语言)来编写，并且其可按任意形式部署，包括被部署为独立的程序或者被部署为模块、组件、子例程或者适合在计算环境中使用的其它单元。

作为示例，可执行指令可以但不一定对应于文件系统中的文件，可以可被存储在保存其它程序或数据的文件的一部分，例如，存储在超文本标记语言(HTML，Hyper Text Markup Language)文档中的一个或多个脚本中，存储在专配置为所讨论的程序的单个文件中，或者，存储在多个协同文件(例如，存储一个或多个模块、子程序或代码部分的文件)中。作为示例，可执行指令可被部署为在一个计算设备上执行，或者在位于一个地点的多个计算设备上执行，又或者，在分布在多个地点且通过通信网络互连的多个计算设备上执行。

以上所述，仅为本申请的实施例而已，并非配置为限定本申请的保护范围。凡在本申请的精神和范围之内所作的任何修改、等同替换和改进等，均包含在本申请的保护范围之内。

Claims (20)

1. 一种微前端系统，所述微前端系统包括：

   路由注册服务、命令行工具和微前端运行框架，其中，

   所述路由注册服务，为独立维护运行的节点Node后端服务，配置为为主应用的微前端运行框架提供子应用的路由信息、所述子应用的加载方式和所述子应用的部署信息；

   所述命令行工具，配置为通过命令行提供新建子应用功能、接入子应用功能、服务注册功能；

   所述微前端运行框架，为运行在所述主应用的框架，配置为基于获取到的网络请求加载并运行所述子应用，并提供多框架下的子应用运行能力。
2. 根据权利要求1中所述的微前端系统，其中，所述微前端系统还包括：

   与所述路由注册服务对应的前端界面，配置为获取针对子应用注册需要设置的子应用注册信息，并将所述子应用注册信息发送至所述路由注册服务，所述子应用注册信息包括：子应用框架、子应用路由模式、子应用加载模式；

   所述路由注册服务，还配置为接收所述子应用注册信息，并基于所述子应用注册信息注册所述子应用。
3. 根据权利要求1中所述的微前端系统，其中，

   所述命令行工具，还配置为接收新建子应用命令，获取所述子应用的路由信息、所述子应用的资源信息和子应用模板信息；

   所述命令行工具，还配置为基于所述子应用模板信息生成子应用模板，并向所述路由注册服务发送子应用新建请求，所述子应用新建请求中携带有所述路由信息和所述资源信息；

   所述命令行工具，还配置为向部署服务器发送子应用部署请求，其中，所述子应用部署请求用于触发所述部署服务器基于所述子应用部署请求中的子应用资源地址进行资源部署。
4. 根据权利要求2中所述的微前端系统，其中，

   所述命令行工具，还配置为接收接入子应用命令，获取所述子应用的路由信息和所述子应用的资源信息；

   所述命令行工具，还配置为向所述路由注册服务发送子应用接入请求，所述子应用接入请求中携带有所述子应用的路由信息和资源信息；

   所述路由注册服务，还配置为接收所述子应用接入请求，并基于所述子应用的路由信息和资源信息进行子应用注册。
5. 根据权利要求1所述的微前端系统，其中，

   所述微前端运行框架包括：基础功能库模块、通信模块、统一路由模块、子应用加载模块和子应用运行模块，其中，

   所述基础功能库模块，配置为提供公共方法和公共组件，并通过全局变量和函数的方式将所述公共方法和所述公共组件注入到所述子应用，供所述子应用使用；

   所述通信模块，配置为支持所述主应用到所述子应用、所述子应用到所述子应用和所述子应用到所述主应用的通信机制；

   所述统一路由模块，配置为监听浏览器路由变更；

   所述子应用加载模块，配置为从所述路由注册服务获取子应用资源地址，获取并加载所述子应用资源地址对应的资源；

   所述子应用运行模块，配置为运行所述子应用资源地址对应的资源，并渲染出子应用页面。
6. 根据权利要求5中所述的微前端系统，其中，所述主应用到子应用的通信机制包括道具Props传输和自定义事件Custom Event传输，所述子应用到子应用的通信机制包括发送消息PostMessage传输，所述子应用到主应用的通信机制包括Custom Event传输；

   所述子应用加载模块加载所述子应用的模式包括超文本标记语言HTML实体模式、脚本语言JS实体模式和页面嵌套Iframe模式。
7. 根据权利要求5中所述的微前端系统，其中，所述微前端运行框架还包括：数据管理模块、性能监控模块、错误处理模块，其中：

   所述数据管理模块，配置为通过Props传输机制提供的数据，实现数据双向绑定功能；

   所述性能监控模块，配置为监控子应用的加载时长、运行时长；

   所述错误处理模块，配置为监控并处理子应用在加载和运行过程中的错误信息。
8. 根据权利要求5中所述的微前端系统，其中，

   所述子应用加载模块，还配置为对获取到的所述子应用的业务代码进行解析，并将解析后的业务代码传输至所述子应用运行模块；

   所述子应用运行模块包括运行环境沙箱，所述解析后的业务代码在所述运行环境沙箱中执行。
9. 根据权利要求8中所述的微前端系统，其中，所述运行环境沙箱包括：JS沙箱、层叠样式表CSS沙箱和后台脚本Web Worker沙箱。
10. 根据权利要求9中所述的微前端系统，其中，所述Web Worker沙箱，配置为内联运行分配给Web Worker的脚本文件，并执行所述Web Worker的跨域调用。
11. 根据权利要求1至10任一项所述的微前端系统，其中，所述微前端系统还包括支持跨域资源共享的服务器。
12. 一种基于微前端系统的子应用加载方法，所述方法由电子设备执行，所述微前端系统包括：路由注册服务、子应用加载模块和子应用运行模块，所述方法包括：

    获取网络访问请求，所述网络访问请求中携带有待访问页面的统一资源定位符URL地址；

    基于所述URL地址从所述路由注册服务拉取对应的路由信息；

    当基于所述路由信息确定所述待访问页面为子应用页面时，所述子应用加载模块基于所述路由信息，从所述路由注册服务获取所述路由信息对应的子应用资源；

    当需要加载所述子应用资源时，所述子应用加载模块加载所述子应用资源；

    所述子应用运行模块运行所述子应用资源，并渲染出子应用的页面。
13. 根据权利要求12中所述的方法，其中，所述方法还包括：

    确定所述子应用资源是否被预加载或者是否被打开；

    当所述子应用资源没有被预加载并且没有被打开时，确定所述子应用资源需要被加载。
14. 根据权利要求12中所述的方法，其中，所述方法还包括：

    获取针对子应用注册需要设置的子应用注册信息，并将所述子应用注册信息发送至路由注册服务，所述子应用注册信息包括：子应用框架、子应用路由模式、子应用加载模式；

    通过所述路由注册服务接收所述子应用注册信息，并基于所述子应用注册信息注册所述子应用。
15. 根据权利要求14中所述的方法，其中，所述获取针对子应用注册需要设置的子应用注册信息，包括：

    通过所述路由注册服务对应的前端界面，获取针对子应用注册的输入操作；

    基于所述输入操作确定所述子应用注册信息；或者，

    通过命令行工具接收新建子应用命令，获取所述子应用的路由信息、所述子应用的资源信息和子应用模板信息。
16. 根据权利要求12中所述的方法，其中，所述当需要加载所述子应用资源时，所述子应用加载模块加载所述子应用资源，包括：

    当需要加载所述子应用资源时，获取所述子应用的框架标识和资源加载类型；

    根据所述资源加载类型，在所述框架标识对应的子应用框架中加载所述子应用资源。
17. 根据权利要求12至16任一项所述的方法，其中，所述方法还包括：

    当基于所述路由信息确定待访问页面为主应用页面时，根据生命周期确定主应用当前挂载的子应用；

    从所述当前挂载的子应用中确定要渲染的目标子应用；

    基于暴露的加载函数和所述目标子应用，模拟路由切换，并获取所述目标子应用的子应用资源和主应用资源；

    加载并运行所述子应用资源和所述主应用资源，并在渲染出的所述主应用的页面中渲染出子应用。
18. 一种计算机可读存储介质，存储有可执行指令，用于被处理器执行时，实现权利要求12至17任一项所述的基于微前端系统的子应用加载方法。
19. 一种电子设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为通过所述计算机程序执行所述权利要求12至17任一项中所述的基于微前端系统的子应用加载方法。
20. 一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现权利要求12至17任一项所述的基于微前端系统的子应用加载方法。

Images