一种微前端架构的实现系统及其部署方法技术方案

本发明专利技术公开一种微前端架构的实现系统，涉及前端开发技术领域，包括主框架、一级微前端和二级微前端；主框架具有主框架路由，可以实现微前端注册和微前端主动加载，以将一个浏览器的链接定向地与一级微前端产生关联，并从微前端库中将指定的一级微前端动态地加载到页面中来；一级微前端通过定义自己的微前端路由，具备实现一个多页面小型项目的能力，从而使得相同业务的代码规整在同一个一级微前端内；一级微前端通过生命周期钩子加载主框架；二级微前端作为一个公用模块库，供一级微前端基于自身需求进行动态加载。本发明专利技术还公开基于微前端架构的部署方法，其共同用于解决大型前端项目在开发时管理不便、部署时又过于复杂的问题。问题。问题。

【技术实现步骤摘要】
一种微前端架构的实现系统及其部署方法


[0001]本专利技术涉及前端开发
，具体的说是一种微前端架构的实现系统及其部署方法。

技术介绍

[0002]single
‑
spa是早期的微前端技术实现方案，它允许在同一个页面中使用多种技术框架(React,Vue,AngularJS,Angular,Ember等任意技术框架)，并且不需要刷新页面；使用新的技术框架编写代码，现有项目中的代码无需重构；每个独立模块的代码可做到按需加载,不浪费额外资源；每个独立模块可独立运行。
[0003]但由于它是早期的一种实现方案，在面对应用逐渐庞大，或者是从设计层面就很复杂的前端项目，它逐渐地开始显现出它的一些弊端，比如：在面对大型项目时第一次访问时加载缓慢；技术封装比较简单，规范层面上要求比较低，不利于形成整体的代码风格；在部署的层面当项目复杂到一定程度时，由于模块过多，也会加重维护人员的工作。
[0004]总而言之，single
‑
spa是一套适合于小型前端项目的良好解决方案，但其本身并不适合大型企业级前端项本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种微前端架构的实现系统，其特征在于，所述包括主框架、实现了多路由的一级微前端和支持动态加载的二级微前端；所述主框架作为组织者、调用者，是一个独立的前端项目，具有主框架路由，用于实现菜单管理、日志管理、微前端管理的功能，所述微前端管理功能又包括微前端注册子功能和微前端主动加载子功能，通过微前端注册子功能，可以将一个浏览器的链接定向地与一级微前端产生关联，通过微前端主动加载子功能，可以从微前端库中将指定的一级微前端动态地加载到页面中来；所述一级微前端作为执行者、实现者，是一个独立的前端项目；所述一级微前端通过定义自己的微前端路由，具备实现一个多页面小型项目的能力，从而使得相同业务的代码可以有效地规整在同一个一级微前端内；所述一级微前端通过在整个项目的入口文件中暴露一个特定名字的生命周期钩子，使主框架加载到一级微前端项目，实现主框架对一级微前端项目的融合；所述二级微前端作为一个公用模块库，供一级微前端基于自身需求进行动态加载。2.根据权利要求1所述的一种微前端架构的实现系统，其特征在于，所述二级微前端通过在整个项目的入口文件中暴露一个特定名字的生命周期钩子，以便于一级微前端可以正确地加载到，从而可以将二级微前端页面的内容动态地嵌入到一级微前端的一个页面中。3.根据权利要求2所述的一种微前端架构的实现系统，其特征在于，所述二级微前端在被调用时自由度比较高，所以同一个页面可以加载多个二级微前端，甚至同一个二级...

【专利技术属性】
技术研发人员：温伟，王旭阳，
申请(专利权)人：浪潮通信信息系统有限公司，
类型：发明
国别省市：