CN116301829A - 通过按需加载资源来控制渲染时机的微前端架构开发方法 - Google Patents

通过按需加载资源来控制渲染时机的微前端架构开发方法 Download PDF

Info

Publication number
CN116301829A
CN116301829A CN202310208948.5A CN202310208948A CN116301829A CN 116301829 A CN116301829 A CN 116301829A CN 202310208948 A CN202310208948 A CN 202310208948A CN 116301829 A CN116301829 A CN 116301829A
Authority
CN
China
Prior art keywords
application
sub
micro
loading
resources
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310208948.5A
Other languages
English (en)
Inventor
钟慎恩
王立国
于敬
纪达麒
陈运文
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Datagrand Information Technology Shanghai Co ltd
Original Assignee
Datagrand Information Technology Shanghai Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Datagrand Information Technology Shanghai Co ltd filed Critical Datagrand Information Technology Shanghai Co ltd
Priority to CN202310208948.5A priority Critical patent/CN116301829A/zh
Publication of CN116301829A publication Critical patent/CN116301829A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/36—Software reuse
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G06F8/43—Checking; Contextual analysis
    • G06F8/433—Dependency analysis; Data or control flow analysis
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
    • G06F9/4488—Object-oriented
    • G06F9/449—Object-oriented method invocation or resolution
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种通过按需加载资源来控制渲染时机的微前端架构开发方法，首先，主应用注册子应用控制服务，通过配置子应用资源的加载地址获取到子应用资源的加载控制权；其次，子应用导出其生命周期钩子，以供主应用在适当时机调用来控制对子应用中微组件的渲染。本发明实现了一个全新的微前端开发架构，在技术栈确定的情况下，子应用仅需要加载一个。后续的微组件渲染全部通过子应用控制器服务进行控制，类似于受控组件的操作方式，在使用的时候仅需要通过子应用控制服务调用子应用导出的mount方法，传入相应的数据通知子应用渲染微组件。

Description

通过按需加载资源来控制渲染时机的微前端架构开发方法
技术领域
本发明属于计算机软件领域，具体涉及通过按需加载资源来控制渲染时机的微前端架构开发方法。
背景技术
随着当今现代化浪潮的冲击，新的技术和用户需求出现了日新月异的变化。企业开发的系统越来越庞大，逐渐成为一个巨石应用，维护起来变得异常繁琐。如何维护好已有系统，和更加高效的开发新的系统，是所有企业都面临的艰难挑战。而微前端的架构模式可以有效的解决这一系列问题。微前端的架构优势：1.无关技术栈；2.动态组合，装配；3.分而治之的思想。
如图1所示，传统的微前端架构实现方式有很多问题，如果需要加载多个微前端应用，那么多个微前端应用之间的路由控制和依赖复用(主应用与子应用共同依赖的库或资源的复用)实现起来就会是一件很繁琐的事情。并且JavaScript引擎对绑定到Window全局的变量是无法执行垃圾回收的。多个微前端应用间切换时很容易造成内存泄漏风险等一系列问题。
主应用和子应用之间有时会存在相同资源或者库的依赖，传统实现方式中分别打包进各自的构建目录中。这种方式会导致构建后的代码存在重复依赖项。
发明内容
本发明的目的在于克服上述现有技术中存在的不足，主应用通过使用子应用控制器服务来控制接入子应用下的所有微组件的渲染时机，以实现子应用下资源的按需加载。
为实现上述发明目的，本发明提供一种通过按需加载资源来控制渲染时机的微前端架构开发方法，首先，主应用注册子应用控制服务，通过配置子应用资源的加载地址获取到子应用资源的加载控制权；其次，子应用导出其生命周期钩子，以供主应用在适当时机调用来控制对子应用中微组件的渲染。
进一步地，将重复的依赖提取到主应用中，通过子应用控制服务将共用的依赖注入到子应用中。
进一步地，所述主应用通过调用子应用来动态加载各个微组件。
进一步地，所述生命周期钩子包括bootstrap、mount和unmount。
进一步地，开发子应用时适于选择任意技术栈，至少包括Vue、React和Angular。
进一步地，子应用接入主应用使用约定协议的方式，将约定的子应用生命周期暴露给主应用。
进一步地，所述子应用生命周期包括bootstrap引导应用阶段、mount挂载应用阶段和unmount卸载应用阶段。
进一步地，通过使用构建工具将子应用打包成符合umd规范的js包文件，以供主应用加载。
进一步地，主应用在自身加载完成后注册子应用控制服务，通过http请求的方式获取子应用的加载资源；然后调用子应用导出的bootstrap钩子完成子应用的引导，以获取完整的子应用控制权限。
进一步地，通过调用子应用mount钩子传入不同的配置参数，以对子应用下微组件的渲染进行控制。
与现有技术相比，本发明的有益效果为：
1、主应用通过使用子应用控制器服务来控制接入子应用下的所有微组件的渲染时机，这样可以实现子应用下资源的按需加载。
2、将重复的依赖提取到主应用中，通过子应用控制服务将共用的依赖注入到子应用中，实现了依赖复用。
3、实现了一个全新的微前端开发架构，在技术栈确定的情况下，子应用仅需要加载一个。后续的微组件渲染全部通过子应用控制器服务进行控制，类似于受控组件的操作方式，在使用的时候仅需要通过子应用控制服务调用子应用导出的mount方法，传入相应的数据通知子应用渲染微组件。使用者无需关心底层实现，只需要调用子应用控制服务就能实现微前端的开发模式，降低了开发时的心智负担。
附图说明
图1为现有技术中前端、微前端的架构图；
图2为本发明一个实施例的微前端架构图；
图3为本发明一个实施例中微前端的子应用生命周期流程图。
具体实施方式
下面结合附图和具体实施例，对本发明的技术方案做进一步说明。
如图2和图3所示，本发明通过按需加载资源来控制渲染时机的微前端架构开发方法的一个实施例，首先，主应用注册子应用控制服务，通过配置子应用资源的加载地址获取到子应用资源的加载控制权；其次，子应用导出其生命周期钩子，以供主应用在适当时机调用来控制对子应用中微组件的渲染。
在一个实施例中，将重复的依赖提取到主应用中，通过子应用控制服务将共用的依赖注入到子应用中。
在一个实施例中，所述主应用通过调用子应用来动态加载各个微组件。
在一个实施例中，所述生命周期钩子包括bootstrap、mount和unmount。
在一个实施例中，开发子应用时适于选择任意技术栈，至少包括Vue、React和Angular。
在一个实施例中，子应用接入主应用使用约定协议的方式，将约定的子应用生命周期暴露给主应用。
在一个实施例中，所述子应用生命周期包括bootstrap引导应用阶段、mount挂载应用阶段和unmount卸载应用阶段。
在一个实施例中，通过使用构建工具将子应用打包成符合umd规范的js包文件，以供主应用加载。
在一个实施例中，主应用在自身加载完成后注册子应用控制服务，通过http请求的方式获取子应用的加载资源；然后调用子应用导出的bootstrap钩子完成子应用的引导，以获取完整的子应用控制权限。
在一个实施例中，通过调用子应用mount钩子传入不同的配置参数，以对子应用下微组件的渲染进行控制。
首先，主应用作为主要的控制单元，在注册子应用控制服务的时候，需要配置子应用的资源加载地址。在主应用加载完成后，会根据配置的加载地址加载这些子应用资源，并挂载到DOM节点上面，这时候在页面上并不会发生任何变化。需要渲染某个微组件的时候，通过子应用控制器调用子应用的mount方法，传入不同的参数控制不同的微组件渲染和销毁。子应用的微组件的渲染控制逻辑都通过传入的参数控制，主应用其余地方使用子应用的微组件只需要操控子应用控制器。方便易用。
主应用实现对子应用控制后，后续就是要进行代码结构的改造。微前端架构中的主应用和子应用采用monorepo单体代码库的管理方式。目录结构如下所示：
packages
main
micro-1
micro-2
micro-3
在packages目录下有一个main目录作为主应用代码(目录名称可以任意修改，功能保持一致即可)，其余目录作为子应用代码。每个子应用代码都会导出bootstrap，mount，unmount这三个生命周期方法，用来控制当前应用下的微组件的渲染和销毁。并且所有微组件资源的加载都是在主应用主动使用的时候再进行资源的加载，避免了初始化时不必要的网络开销。子应用开发完整后可以使用构建工具把代码构建成符合浏览器规范的umd格式的javascript包。
完成了上述步骤之后，微前端应用改造就完成了，接下来要处理部署方面的问题。部署方式采用GitlabCI构建镜像的方式，通过在每个仓库下添加gitlab-ci.yml文件，添加自动构建镜像和自动发布的脚本。保证代码在提交到仓库的时候总会自动触发构建流程的pipeline。镜像构建完成之后，会触发发布流程，进行镜像的一个发布。到此就完成了一整个流程。
最后应当说明的是，以上实施例仅用以说明本发明的技术方案而非对其限制，尽管参照上述实施例对本发明进行了详细的说明，所属领域的普通技术人员应当理解：依然可以对本发明的具体实施方式进行修改或者等同替换，而未脱离本发明精神和范围的任何修改或者等同替换，其均应涵盖在本发明的权利要求保护范围之内。

Claims (10)

1.通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，首先，主应用注册子应用控制服务，通过配置子应用资源的加载地址获取到子应用资源的加载控制权；其次，子应用导出其生命周期钩子，以供主应用在适当时机调用来控制对子应用中微组件的渲染。
2.根据权利要求1所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，将重复的依赖提取到主应用中，通过子应用控制服务将共用的依赖注入到子应用中。
3.根据权利要求1所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，所述主应用通过调用子应用来动态加载各个微组件。
4.根据权利要求1所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，所述生命周期钩子包括bootstrap、mount和unmount。
5.根据权利要求1所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，开发子应用时适于选择任意技术栈，至少包括Vue、React和Angular。
6.根据权利要求1所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，子应用接入主应用使用约定协议的方式，将约定的子应用生命周期暴露给主应用。
7.根据权利要求6所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，所述子应用生命周期包括bootstrap引导应用阶段、mount挂载应用阶段和unmount卸载应用阶段。
8.根据权利要求1所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，通过使用构建工具将子应用打包成符合umd规范的js包文件，以供主应用加载。
9.根据权利要求3所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，主应用在自身加载完成后注册子应用控制服务，通过http请求的方式获取子应用的加载资源；然后调用子应用导出的bootstrap钩子完成子应用的引导，以获取完整的子应用控制权限。
10.根据权利要求9所述的通过按需加载资源来控制渲染时机的微前端架构开发方法，其特征在于，通过调用子应用mount钩子传入不同的配置参数，以对子应用下微组件的渲染进行控制。
CN202310208948.5A 2023-03-07 2023-03-07 通过按需加载资源来控制渲染时机的微前端架构开发方法 Pending CN116301829A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310208948.5A CN116301829A (zh) 2023-03-07 2023-03-07 通过按需加载资源来控制渲染时机的微前端架构开发方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310208948.5A CN116301829A (zh) 2023-03-07 2023-03-07 通过按需加载资源来控制渲染时机的微前端架构开发方法

Publications (1)

Publication Number Publication Date
CN116301829A true CN116301829A (zh) 2023-06-23

Family

ID=86782856

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310208948.5A Pending CN116301829A (zh) 2023-03-07 2023-03-07 通过按需加载资源来控制渲染时机的微前端架构开发方法

Country Status (1)

Country Link
CN (1) CN116301829A (zh)

Similar Documents

Publication Publication Date Title
US11836516B2 (en) Reducing execution times in an on-demand network code execution system using saved machine states
US10949237B2 (en) Operating system customization in an on-demand network code execution system
CN101421711B (zh) 用于资源受限设备的虚拟执行系统
US20170085419A1 (en) System and method for deploying an application
WO2022016848A1 (zh) 一种根据服务角色的进行应用部署的方法及装置
CN108121594B (zh) 一种进程管理方法及装置
US10019598B2 (en) Dynamic service discovery
CN110874236A (zh) 一种跨平台应用装置、终端及存储介质
CN109522055B (zh) 基于分布式服务调用的连接预热方法及系统
CN114586011A (zh) 将所有者指定的数据处理流水线插入到对象存储服务的输入/输出路径
CN108804100B (zh) 创建界面元素的方法、装置、存储介质及移动终端
CN111294377B (zh) 一种依赖关系的网络请求发送方法、终端装置及存储介质
CN112988378A (zh) 业务处理方法及装置
CN110045998A (zh) 加载动态库的方法及装置
CN111245814B (zh) 一种数据审计方法、装置、电子设备及存储介质
KR20190044098A (ko) 컨테이너를 액세스하는데 사용하기 위한 방법 및 디바이스
CN108712298B (zh) 网络设备升级方法、装置、网络设备及存储介质
CN116301829A (zh) 通过按需加载资源来控制渲染时机的微前端架构开发方法
CN114115920A (zh) 操作系统部署方法、系统、设备及计算机可读存储介质
CN108804236A (zh) 一种aidl文件的共享方法及系统
CN113918290A (zh) 一种api调用方法以及装置
WO2010117692A2 (en) In-process intermediary to create virtual processes
JP2014229114A (ja) ＯＳＧｉサービス登録装置、登録方法および登録プログラム
CN114077456B (zh) 一种组件处理方法、装置、电子设备及存储介质
CN117270819B (zh) 支持单体架构兼容微服务架构的服务设计方法及系统、介质、设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination