[发明专利]一种微前端系统

说明书

本申请的目的是提供一种微前端系统。所述微前端系统包括若干个主应用，每个所述主应用包括若干个子应用。与现有技术相比，本申请在开发阶段，每个所述子应用由多webpack进程并发构建，每个所述子应用采用不同的端口启动，所述主应用直接加载编译后的代码，从而极大地提高所述微前端系统的开发构建速度。进一步地，所述微前端系统的子应用对外暴露生命周期函数，供对应的主应用调用，从而方便主应用加卸载子应用，提高系统效率。进一步地，本申请通过read‑on‑write方式代理所述主应用的window对象并传递给所述子应用，在哈希化时为每个所述子应用添加特殊前缀，从而有效地避免内存冲突问题。

技术领域

本申请涉及信息技术领域，尤其涉及一种微前端技术。

背景技术

随着计算机技术的蓬勃发展，各个网站的用户交互界面愈加复杂，单个站点的代码行数动辄几十万行，甚至百万行。为了保证编译速度和开发效率，微前端方案应运而生。具体地，微前端是一种设计思想，在实践上可以采用MPA、IFrame、Single-SPA等多种方式。微前端解决的是超大型项目的开发问题，负责开发单个子应用的团队规模可以很小，甚至可以是单人。现在的前端技术在开发阶段一般采用ES6或者TS，经过webpack构建后在浏览器端运行，开发采用的代码和编译后的代码差异非常大。如果采用单一webpack进行构建，当代码量超过10万行时，构建速度会显著变慢，严重影响开发速度。

发明内容

本申请的一个目的是提供一种微前端系统。

根据本申请的一个方面，提供了一种微前端系统，其中，所述系统包括若干个主应用，每个所述主应用包括若干个子应用；

在开发阶段，每个所述子应用由多webpack进程并发构建，每个所述子应用采用不同的端口启动，所述主应用直接加载编译后的代码。

进一步地，每个所述主应用中的若干个所述子应用共用一个DOM节点。

进一步地，在主路由中根据预设规则加载所述子应用，将路由事件透传给所述子应用，让所述子应用选择需要加载的子页面。

进一步地，所述子应用对外暴露生命周期函数，供所述主应用调用。

进一步地，所述生命周期函数包括：bootstrap函数，用于构建子应用的容器；mount函数，用于渲染子应用；unmount函数，用于清理子应用。

进一步地，通过read-on-write方式代理所述主应用的window对象并传递给所述子应用。

进一步地，在哈希化时，为每个所述子应用添加特殊前缀。

进一步地，在所述主应用中引入公共库，并在所述子应用的webpack配置中迁出所述公共库的代码。

进一步地，所述子应用之间通过消息总线进行通信。

进一步地，所述主应用包含一级导航及公共模块，所述子应用包含二级导航及自身独有的业务逻辑。

本申请提供的方案中，所述微前端系统包括若干个主应用，每个所述主应用包括若干个子应用。与现有技术相比，本申请在开发阶段，每个所述子应用由多webpack进程并发构建，每个所述子应用采用不同的端口启动，所述主应用直接加载编译后的代码，从而极大地提高所述微前端系统的开发构建速度。进一步地，所述微前端系统的子应用对外暴露生命周期函数，供对应的主应用调用，从而方便主应用加卸载子应用，提高系统效率。进一步地，本申请通过read-on-write方式代理所述主应用的window对象并传递给所述子应用，在哈希化时为每个所述子应用添加特殊前缀，从而有效地避免内存冲突问题。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其他特征、目的和优点将会变得更明显：