微前端资源共享方法及系统与流程

allin2025-05-26  51


本发明涉及互联网应用领域,具体涉及微前端资源共享方法及系统。


背景技术:

1、随着互联网应用的发展,前端开发变得越来越复杂,传统的单体前端架构的应用存在开发效率低、可扩展性差和维护困难等问题。微前端作为一种新的前端架构应用模式,能够将前端应用拆分为多个独立的微应用,每个微应用可独立开发、部署和维护,从而提高开发效率和系统灵活性。

2、当主应用、微应用和微组件使用统一技术架构时,资源复用和共享是一个重要的问题,当不同的微应用使用的技术都是相同时,就迫切需要共享一些公共对象、ui组件库、公共组件等等。

3、同时,现有的前端开发及资源共享技术中,还存在以下缺陷:

4、1.传统前端开发通常是基于单体应用架构,当应用规模逐渐扩大时,单体应用可能变得难以维护和扩展。单体应用的架构可能会导致代码耦合度高,难以进行模块化开发和独立部署。

5、2.在传统前端开发中,通常由一个团队共同维护和开发整个前端应用,这可能导致开发速度缓慢和决策过程繁琐。团队成员之间的依赖性高,可能会影响灵活性和效率。

6、3.传统前端开发中,整个应用作为一个整体进行开发和部署,这可能会导致交付新功能和更新的速度较慢。由于整个应用需要进行全量打包和部署,上线周期可能较长。

7、随着前端应用的功能日益复杂和庞大,最终变成一个巨石应用,传统的前端开发模式开始面临着巨大的挑战。在这种背景下,微前端作为一种新兴的前端架构技术开始逐渐受到更多的开发者关注。微前端是一种将前端应用拆分成多个小型的、独立的前端应用的架构,我们称之为微应用,每个微应用拥有独立的功能、代码库和开发团队,可以独立开发、测试和部署,与主应用共同构成一个完整和复杂的前端应用。

8、使用微前端架构构建一个全新大型前端应用,需要多个团队之间协作,团队采用不同技术栈可能会增加维护成本、沟通难度、资源分配不均衡、知识共享困难以及整合和测试复杂度等方面的挑战,而在微前端架构下采用统一技术栈,为了提供系统运行效率将面临着资源共享的问题。具体如下:

9、各团队开发的应用界面元素的外观和行为无法保持一致,导致开发效率低下和用户体验不佳;

10、各团队之间的代码无法得到重复利用,加大开发和维护成本,无法保证代码的一致性;

11、主应用、微应用和微组件之间的存在很多重复对象无法共享使用,降低了程序运行效率;

12、当一个公共对象进行了修改,将会导致所有依赖此对象的微应用都要升级,加大了运维难度。

13、公布号为cn116915700a的现有发明专利申请文献《一种前端微服务聚合技术解决方法》,该现有方法包括:采用基于qiankun的基座方式,通过主应用分发路由,匹配定位不同子应用的技术方案,实现整套微服务整体架构;包括:路由注册配置中心,角色权限认证配置,主子应用菜单配置注册中心,主子应用通信方案,通用公共方法共享方案,公共业务组件。独立开发、独立部署,增量升级,独立运行,便于开发调试的微前端聚合解决方案,该发明使用cdn资源完全抽离,挂在到全局对象上,复用相同依赖,仅仅只能做到公共依赖资源文件的复用,主应用和各个子应用还需要cdn方式在代码中引入,每次cdn引入浏览器引擎都需要重复解析和执行资源文件,无法做到公共对象的完整复用。

14、公布号为cn116186450a的现有发明专利申请文献《一种微前端应用系统、应用渲染方法、设备及存储介》,该现有系统包括:基本应用模块,还包括:共享远程模块;所述基本应用模块,构建有一个或多个微前端应用;所述共享远程模块,作为共享资源池,构建有微前端应用所依赖的公共资源,并提供有远程容器入口,以供基本应用模块中微前端应用访问;所述微前端应用在构建时配置有所依赖公共资源的资源声明信息,在所述微前端应用进行加载操作时,基于所述资源声明信息通过所述远程容器入口,获得所需的公共资源。该系统通过将远程共享模块作为共享资源池,使得主应用与各个子应用可异步加载公共资源,使得构建应用时仅构建应用自身,该发明同样也是仅仅做到了公共资源的共享复用,主应用和子应用运行时还需要单独加载公共资源,没有做到对象共享方式,同时因为公共模块采用远程方式共享,这就增加远程模块的部署和运维。

15、公布号为cn116301729a的现有发明专利申请文献《一种可快速扩展的微前端实现方法及可快速扩展的微前端框架》,该现有方法包括:基于vue建立微前端框架,包括主应用app和子应用subapp,所述主应用app内封装公共依赖、公共配置、公共插件、公共服务、公共数据、公共鉴权和校验、公共资源、公共组件以及公共路由,主应用通过中心化路由加载执行子应用;所述子应用subapp内安装个性化组件,子应用剔除所有公共代码,作为纯业务代码的容器被主应用在运行时加载执行;通过主应用,根据权限系统动态加载子应用。该发明所有公共依赖资源均封装在主应用app内,耦合度较高,当某一个公共插件或者依赖因业务需求需要修改时,必须让主应用app更新修改好的插件和依赖并重新打包部署,主应用app是整个框架的基座或地基,经常变更升级势必会影响整个系统的稳定性。

16、现有公开文献《基于微前端架构的产业链数据可视化系统的设计与实现》,在该文献中,主应用充当调度者的角色,由它来决定在不同的条件下激活不同的微应用。微应用。微应用主要负责实现系统的功能需求,它们可以由不同开发者独立开发、独立部署,互相之间不存在耦合关系。使用统一语言和可视化的方式来实现建模,统一语言的目标是为了形成标准,而可视化的目的是为了增加可读性、减少理解成本,丰富且直观的描述模型结构。为了实现形成标准的目标,需要定义基本的元素和规则,为了实现增强可读性的目标,采用图形方式来解决,这也对定义元素和规则提出了相应的要求。制定基本的元素和规则不仅需要字面层次的定义,还需要为每一种元素以及每-种规则都制定独有的图形表达方式。

17、综上,现有技术存在单体应用架构难以进行模块化开发和独立部署、前端开发灵活性和效率低、上线周期可能较长,现有的采用微前端架构的技术维护成本高、沟通难度大、资源分配不均衡、知识共享困难以及整合和测试复杂度高的技术问题。


技术实现思路

1、本发明所要解决的技术问题在于:如何解决单体应用架构难以进行模块化开发和独立部署、前端开发灵活性和效率低、上线周期可能较长,现有的采用微前端架构的技术维护成本高、沟通难度大、资源分配不均衡、知识共享困难以及整合和测试复杂度高的技术问题。

2、本发明做到了真正意义上的对象共享方式,只需主应用一次解析和执行资源文件,将得到的对象共享给各个子应用,子应用无需再次解析和执行资源文件。

3、本发明做到了对象共享的,共享对象通过主应用直接引用或者使用微组件单独打包方式提供对象共享给各个子应用,主应用和微组件采用本地自定义打包加载方式,无需远程部署,同时也降低了运维复杂度。

4、本发明引入了微组件概念,将一些公共插件或依赖代码封装微组件,做到只修改业务需求对应的公共微组件并升级,将升级影响系统的范围缩小到这个微组件内,降低与主应用的耦合度,提供系统开发和运维的效率。

5、本发明是采用以下技术方案解决上述技术问题的:微前端资源共享方法包括:

6、s1、构建ui组件库,ui组件库包括:用户界面元素、交互模式设计规范信息,对用户界面元素的外观、行为,进行一致化处理,根据用户界面元素、交互模式设计规范信息,进行界面构建操作;

7、s2、基于共享资源以及ui组件库,设计可复用模块、微应用以及微组件,利用可复用模块,通过预置模块化方式,对微应用、微组件进行管理操作、微组织操作,供前端应用进行模块组件按需引用操作;

8、s3、利用微应用、微组件共享使用主应用的公共共享对象,利用公共共享对象,在主应用、微应用以及微组件之间进行消息传递操作;

9、s4、获取公共共享对象、微组件的实时调整状态信息,以进行代码更新操作、微组件更新操作。

10、在本发明中,开发人员可以直接使用这些组件来构建界面,而无需重复设计和编写ui元素。通过使用统一ui组件库,可以有效地提高产品的一致性、开发效率和用户体验,并且有助于降低维护成本和错误率。

11、在更具体的技术方案中,s2包括:

12、s21、针对可复用模块,创建项目开发操作、维护操作;

13、s22、使用git代码仓库进行协作管理,以处理得到并输出适用模块化规范信息;

14、s23、将适用模块化规范信息,发布至npm包管理仓库,主应用、微应用、微组件,供安装使用。

15、本发明将共享的资源设计成可复用的模块、微应用和微组件,通过模块化的方式进行管理和微组织。这样不同的前端应用可以按需引用这些模块和组件,避免重复开发和维护相似的功能。

16、在更具体的技术方案中,s22中,适用模块化规范信息包括:amd规范数据、umd规范数据、commonjs规范数据以及esm规范数据。

17、在更具体的技术方案中,s23中,对可复用模块中,可复用的微应用、微组件,使用git代码仓库进行协作管理,打包为自定义mapkg包文件;根据自定义mapkg包文件,获取并提供统一入库文件index.js,定义统一入口规范信息。

18、在更具体的技术方案中,s23中,利用微组件抛出安装、卸载方法,利用主应用全局统一调用安装方法、卸载方法,以对微组件进行安装、卸载操作;利用微应用抛出挂载mount方法、卸载unmount方法,利用主应用统一调用挂载mount方法、卸载unmount方法,以利用不少于2个微应用,组合成为前端应用。

19、在更具体的技术方案中,s3中,在消息传递操作中,利用事件总线降低微应用之间的耦合度。

20、具体地,本发明中的微应用和微组件均采用模块化开发,降低了各功能模块代码的耦合度;前述微应用和微组件均以独立项目存在,代码独立git仓库管理,降低了不同开发之间的代码冲突耦合度。

21、同时,本发明的微应用和微组件之间均通过共享vue对象进行依赖,微应用和微组件间不直接依赖,通过共享vue对象解决了降低微应用和微组件间的依赖耦合度。

22、传统项目只能全量更新,根据客户需求按需更新微应用和微组件,传统开发方式所有功能在一个项目中难以实现,而本发明采用微前端和微组件,降低了开发和运维成本,快速响应客户需求,提高了用户的满意度。

23、在更具体的技术方案中,s3包括:

24、s31、在主应用启动时,对微组件进行异步按需加载操作,打开并加载微应用;

25、s32、利用主应用,将公共共享对象挂载至预置window对象;

26、s33、使用预置proxy对象,为预置window对象创建代理对象proxywindow,以作为全局对象,加载微组件的执行上下文环境;

27、s34、执行微组件的安装方法、微应用的挂载mount方法;

28、s35、微应用、微组件通过代理对象proxywindow访问公共共享对象中的共享数据。

29、本发明中主应用的公共对象可以被微应用和微组件共享使用,通过共享对象可以避免重复创建相同的对象实例,节省内存空间,提高代码的复用性和开发效率,可以通过公共对象实现主应用、微应用和微组件之间通信和消息传递,如事件总线降低微应用之间的耦合度,提升应用程序的一致性、性能和可维护性。

30、在更具体的技术方案中,s4中,在主应用的公共共享对象进行相关修改时,利用微应用、微组件访问主应用的公共共享对象,利用主应用进行最新代码发布更新操作。

31、在更具体的技术方案中,s4中,在微组件修改代码时,则更新微组件。

32、本发明中的主应用共享对象和微组件发生变化,其相关微应用和微组件不需要做任何改动和更新,仅需要升级主应用和微组件。

33、在更具体的技术方案中,微前端资源共享系统包括:

34、ui构建模块,用以构建ui组件库,ui组件库包括:用户界面元素、交互模式设计规范信息,对用户界面元素的外观、行为,进行一致化处理,根据用户界面元素、交互模式设计规范信息,进行界面构建操作;

35、可复用应用组件设计模块,用以基于共享资源以及ui组件库,设计可复用模块、微应用以及微组件,利用可复用模块,通过预置模块化方式,对微应用、微组件进行管理操作、微组织操作,供前端应用进行模块组件按需引用操作,可复用应用组件设计模块与ui构建模块连接;

36、共享对象通信模块,用以利用微应用、微组件共享使用主应用的公共共享对象,利用公共共享对象,在主应用、微应用以及微组件之间进行消息传递操作,共享对象通信模块与可复用应用组件设计模块连接;

37、代码组件更新模块,用以获取公共共享对象、微组件的实时调整状态信息,以进行代码更新操作、微组件更新操作,代码组件更新模块与共享对象通信模块连接。

38、与前述背景技术相比:

39、本技术采用直接将对象挂载到全局window对象上,没有使用cdn资源完全抽离和共享对象和中使用umd引入公共;

40、本技术使用自定义打包方式分发微应用和微组件内容,其它申请一般都是采用主应用和微应用单独部署到不同服务器;

41、本技术不同于其他微前端方案一般采用首次注册所有微应用和微组件,采用按需动态加载微应用和微组件;

42、本技术的微组件概念不同于其他微前端共享组件方案,其它微前端一般采用将公共组件内容打包到主应用进行共享,我们采用的是独立开发和打包,主应用动态加载方式,将共享组件解耦出主应用;

43、本技术基于chromium浏览器引擎开发自定义浏览器客户端,微应用和微组件无需独立部署,采用先将微应用和微组件下载到本地约定目录下,自定义协议本地加载方式

44、主应用和微应用采用共享eventbus对象进行通信。

45、本发明相比现有技术具有以下优点:

46、在本发明中,开发人员可以直接使用这些组件来构建界面,而无需重复设计和编写ui元素。通过使用统一ui组件库,可以有效地提高产品的一致性、开发效率和用户体验,并且有助于降低维护成本和错误率。

47、本发明将共享的资源设计成可复用的模块、微应用和微组件,通过模块化的方式进行管理和微组织。这样不同的前端应用可以按需引用这些模块和组件,避免重复开发和维护相似的功能。

48、本发明中主应用的公共对象可以被微应用和微组件共享使用,通过共享对象可以避免重复创建相同的对象实例,节省内存空间,提高代码的复用性和开发效率,可以通过公共对象实现主应用、微应用和微组件之间通信和消息传递,如事件总线降低微应用之间的耦合度,提升应用程序的一致性、性能和可维护性。

49、本发明中的主应用共享对象和微组件发生变化,其相关微应用和微组件不需要做任何改动和更新,仅需要升级主应用和微组件。

50、本发明解决了现有技术中存在的单体应用架构难以进行模块化开发和独立部署、前端开发灵活性和效率低、上线周期可能较长,现有的采用微前端架构的技术维护成本高、沟通难度大、资源分配不均衡、知识共享困难以及整合和测试复杂度高的技术问题。


技术特征:

1.微前端资源共享方法,其特征在于,所述方法包括:

2.根据权利要求1所述的微前端资源共享方法,其特征在于,所述s2包括:

3.根据权利要求2所述的微前端资源共享方法,其特征在于,所述s22中,所述适用模块化规范信息包括:amd规范数据、umd规范数据、commonjs规范数据以及esm规范数据。

4.根据权利要求2所述的微前端资源共享方法,其特征在于,所述s23中,对所述可复用模块中,可复用的所述微应用、所述微组件,使用git代码仓库进行协作管理,打包为自定义mapkg包文件;根据所述自定义mapkg包文件,获取并提供统一入库文件index.js,定义统一入口规范信息。

5.根据权利要求2所述的微前端资源共享方法,其特征在于,所述s23中,利用所述微组件抛出安装、卸载方法,利用所述主应用全局统一调用所述安装方法、卸载方法,以对所述微组件进行安装、卸载操作;利用微应用抛出挂载mount方法、卸载unmount方法,利用所述主应用统一调用挂载mount方法、卸载unmount方法,以利用不少于2个所述微应用,组合成为所述前端应用。

6.根据权利要求1所述的微前端资源共享方法,其特征在于,所述s3中,在所述消息传递操作中,利用事件总线降低所述微应用之间的耦合度。

7.根据权利要求1所述的微前端资源共享方法,其特征在于,所述s3包括:

8.根据权利要求1所述的微前端资源共享方法,其特征在于,所述s4中,在所述主应用的所述公共共享对象进行相关修改时,利用所述微应用、所述微组件访问所述主应用的所述公共共享对象,利用所述主应用进行最新代码发布更新操作。

9.根据权利要求1所述的微前端资源共享方法,其特征在于,所述s4中,在所述微组件修改代码时,则更新所述微组件。

10.微前端资源共享系统,其特征在于,所述系统包括:


技术总结
本发明提供微前端资源共享方法及系统,方法包括:构建UI组件库;将共享的资源设计成可复用的模块、微应用和微组件,通过模块化的方式进行管理和微组织;主应用的公共对象被微应用和微组件共享使用,通过共享对象可以避免重复创建相同的对象实例,通过公共对象实现主应用、微应用和微组件之间通信和消息传递;应用的公共共享对象如果进行了相关修改,则,主应用更新最新代码发布,固定相关微应用和微组件。本发明解决了单体应用架构难以进行模块化开发和独立部署、前端开发灵活性和效率低、上线周期可能较长,现有的采用微前端架构的技术维护成本高、沟通难度大、资源分配不均衡、知识共享困难以及整合和测试复杂度高的技术问题。

技术研发人员:张富强,吴亚运,文贝
受保护的技术使用者:安徽亚创电子科技有限责任公司
技术研发日:
技术公布日:2024/10/31
转载请注明原文地址: https://www.8miu.com/read-21481.html

最新回复(0)