(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210208462.7 (22)申请日 2022.03.04 (71)申请人 中国—东盟信息 港股份有限公司 地址 530000 广西壮 族自治区南宁市平乐 大道18号 (72)发明人 黄继昌　阚浩　 (74)专利代理 机构 广州海心联合专利代理事务 所(普通合伙) 44295 专利代理师 张栩颜　莫秀波 (51)Int.Cl. G06F 9/445(2018.01) G06F 9/455(2006.01) (54)发明名称 一种前端应用容器化的远程模块加载 方法 (57)摘要 本发明公开了一种前端应用容器化的远程 模块加载方法， 涉及web前端 开发技术领域， 解决 应用加载和集成各远程模块的时候就会存在资 源和状态冲突与不一致的技术问题， 方法包括构 建应用容器、 Remote组件； 将各远程模块集成到 使用http或https发布的js库； 通过script标签 下载各远程模块； 构建远程模块配置对象、 容器 化高阶组件、 容器上下文组件， 容器化高阶组件 用于从远程模块配置对象中获取个性化配置信 息及公共约定配置信息， 并进行约定的初始化操 作； 容器上下文组件用于接收并保存 所述远程模 块配置对象， 并将所述远程模块配置对象的配置 信息传递到Remote组件中使用； 根据容器化高阶 组件、 容器上下文组件按照统一的加载方式加载 所述各远程模块。 权利要求书1页 说明书3页 附图1页 CN 114625436 A 2022.06.14 CN 114625436 A 1.一种前端应用容器化的远程模块加载 方法， 其特 征在于， 包括： 构建应用容器， 所述应用容器用于统一存储及管理应用的运行环境中的资源和状态信 息； 构建使用React定义的Remote组件， 并将所述Remote组件集成进各远程模块中； 将各远程模块集成到使用http或https发布的js库； 通过script标签下载各远程模块， 并执行该js库； 构建远程模块配置对象， 所述远程模块配置对象用于定义各远程模块自身的个性化配 置信息及公共约定配置信息； 构建容器化高阶组件， 所述容器化高阶组件用于从所述远程模块配置对象中获取个性 化配置信息及公共约定配置信息， 并对公共约定的配置信息使用所述应用容器的函数进 行 约定的初始化操作； 构建容器上下文组件， 所述容器上下文组件用于接收并保存所述远程模块配置对象， 并将所述远程模块配置对象的配置信息传递到Remote组件中使用； 根据所述容器化高阶组件、 容器上下文组件按照统一的加载方式加载所述各远程模 块， 并容器化得到RemoteCo ntainerizedCompo nent组件。 2.根据权利要求1所述的一种前端应用容器化的远程模块加载方法， 其特征在于， 所述 公共约定配置信息包含基于i18next库的国 际化资源配置、 基于react ‑router库的路由配 置、 基于redux库的状态配置、 基于svg的ico n图标资源配置 。 3.根据权利要求2所述的一种前端应用容器化的远程模块加载方法， 其特征在于， 所述 加载方式包括： 从所述容器化高阶组件的属性中读取props的主应用容器的i18next对象和store对 象； 将所述远程模块配置对象中各远程模块的国际化资源， 使用各远程模块的名称及版本 号作为命名空间key， 注 册进i18next中； 将所述远程模块配置对象中各远程模块的reduxreducer， 使用各远程模块的名称及版 本号作为命名空间key， 注册进reduxstore中， 并调用各远程模块定义的initAction函数进 行初始化； 在所述RemoteContainerizedComp onent组件的render函数 中， 使用所述容器上下文组 件向子节点传递RemoteConfig配置 ， 以 及使 用所述容器上下文组件包裹 RemoteCo ntainerizedCompo nent组件返回,供Ap pContainer渲染。 4.根据权利要求3所述的一种前端应用容器化的远程模块加载方法， 其特征在于， 读取 所述远程模块配置对 象中各远程模块的路由信息， 根据优先级对各路由信息进行排序， 并 组合成新的路由对象。 5.根据权利要求1所述的一种前端应用容器化的远程模块加载方法， 其特征在于， 将所 述Remote组件集成进所述应用容器中展示。权　利　要　求　书 1/1 页 2 CN 114625436 A 2一种前端应用容器化的远 程模块加载 方法 技术领域 [0001]本发明涉及web前端开发技术领域， 更具体地说， 它涉及一种前端应用容器化的远 程模块加载 方法。 背景技术 [0002]在使用Webpack的Module  Federation技术实现的远程的模块中， 并没有规范及标 准化一些资源及状态的加载方式， 如国际化资源加载、 应用图标加载、 模块状态加载、 路由 资源加载的逻辑， 当应用加载和集成各远程模块的时候就会存在资源和状态冲突与不一致 的问题。 发明内容 [0003]本发明要解决的技术问题是针对现有技术的上述不足， 本发明的目的是提供一种 前端应用容器化的远程模块加载 方法， 可以避免出现资源和状态冲突与不 一致。 [0004]本发明的技 术方案是： 一种前端应用容器化的远程模块加载 方法， 包括： [0005]构建应用容器， 所述应用容器用于统一存储及管理应用的运行环境中的资源和状 态信息； [0006]构建使用React定义的Remote组件， 并将所述Remote组件集成进各远程模块中； [0007]将各远程模块集成到使用http或https发布的js库； 通过script标签下载各远程 模块， 并执 行该js库； [0008]构建远程模块配置对象， 所述远程模块配置对象用于定义各远程模块自身的个性 化配置信息及公共约定配置信息； [0009]构建容器化高阶组件， 所述容器化高阶组件用于从所述远程模块配置对象中获取 个性化配置信息及公共约定配置信息， 并对公共约定的配置信息使用所述应用容器的函数 进行约定的初始化操作； [0010]构建容器上下文组件， 所述容器上下文组件用于接收并保存所述远程模块配置对 象， 并将所述远程模块配置对象的配置信息传递到Remote组件中使用； [0011]根据所述容器化高阶组件、 容器上下文组件按照统一的加载方式加载所述各远程 模块， 并容器化得到RemoteCo ntainerizedCompo nent组件。 [0012]作为进一步地改进， 所述公共约定配置信息包含基于i18next库的国际化资源配 置、 基于react ‑router库的路由配置、 基于redux库的状态配置、 基于svg的icon图标资源配 置。 [0013]进一步地， 所述加载 方式包括： [0014]从所述容器化高阶组件的属性中读取props的主应用容器的i18next对象和stor e 对象； [0015]将所述远程模块配置对象中各远程模块的国际化资源， 使用各远程模块的名称及 版本号作为命名空间key， 注 册进i18next中；说　明　书 1/3 页 3 CN 114625436 A 3