按需加载公共组件或库的方法及电子设备、存储介质技术

本发明专利技术涉及web技术领域，特别涉及一种在前端微服务中按需加载公共组件或库的方法。该方法包括：将所述前端微服务中的主应用和子应用所用到的每一个共享组件分别构建为一个单独的组件库；加载所述主应用时，加载变量a，所述变量a用于保存所述公共库和所述组件库的存储地址；将所述变量a和公共方法b挂载在window对象上，所述公共方法b根据相应子应用所用到的组件库或公共库的指定库名加载相应组件库或公共库；所述子应用通过引用所述指定库名来使用相应的公共组件或库。本发明专利技术通过将公共库的地址提前缓存、挂载在window对象下，可以供所有子应用在需要使用的时候，为微服务写入script标签中，然后实现公共库的按需加载。然后实现公共库的按需加载。然后实现公共库的按需加载。

【技术实现步骤摘要】
按需加载公共组件或库的方法及电子设备、存储介质


[0001]本专利技术涉及web
，尤其涉及一种在前端微服务中按需加载公共组件或库的方法及电子设备、存储介质和程序产品。

技术介绍

[0002]在基于微服务架构而构建的浏览器应用程序(也称为单页应用程序)中，一个主应用下可以包括很多个子应用，因此现在的浏览器应用程序的功能可以非常强大。但是，在浏览器应用程序的开发过程中，众多的子应用可能使用到相同的公共组件或库。当子应用需要使用这些公共组件或库的时候，现有技术中，有以下两种常见方式来实现子应用对公共组件或库的引用：
[0003]1.将上述的公共组件或库打包封装，部署到NPM(Node Package Manager，node包管理工具)仓库中，并在子应用中安装和使用。显然，这个一方法将导致子应用的体积增加，不同子应用可能反复加载相同的组件或库。
[0004]2.通过代码编译工具webpack从所有应用(包括主应用和子应用)中将使用到的公共组件或库提取出来，然后将这些公共组件或库在子应用的入口处通过script标签的方式插入到页面中，也就是说，将这些公共组件或库挂载在window对象上。但是，对于单个子应用来说，由于script标签指向的是公共组件或库，其中包括了本子应用不需要的组件或者库，但是在加载的时候也要一起加载，大大浪费了时间。
[0005]总的来说，现有技术中每个子应用都各自独立地引用组件或库，造成了反复引用相同内容的现状。并且，单个子应用也不能按照自己的需求加载指定的若干组件或库，拖累了微前端的服务性能。

技术实现思路

[0006]为解决上述问题，本专利技术的提出了一种在前端微服务中按需加载公共组件或库的方法。该方法包括：
[0007]将所述前端微服务中的主应用和子应用所用到的每一个共享组件分别构建为一个单独的组件库；
[0008]加载所述主应用时，加载变量a，所述变量a用于保存所述公共库和所述组件库的存储地址；
[0009]将所述变量a和公共方法b挂载在window对象上，所述公共方法b根据相应子应用所用到的组件库或公共库的指定库名加载相应组件库或公共库；
[0010]所述子应用通过引用所述指定库名来使用相应的公共组件或库。
[0011]上述的方法中，所述将所述变量a和公共方法b挂载在window对象上，包括通过单例模式挂载所述变量a和所述公共方法b。
[0012]上述的方法中，所述公共方法b根据相应子应用所用到的组件库或公共库的指定库名加载相应组件库或公共库，包括所述公共方法b在页面的head标签下以script标签的
形式指示与所述指定库名相对应的组件库或公共库的所述存储地址。
[0013]上述的方法中，所述script标签设置为异步加载。
[0014]上述的方法中，所述公共方法b从所述变量a中获取与所述指定库名相对应的存储地址。
[0015]上述的方法中，所述公共库和所述组件库的指定库名与所述存储地址的对应关系保存在配置文件中，加载所述主应用时，将所述对应关系加载到所述变量a中。
[0016]本专利技术还公开了一种电子设备，包括：
[0017]至少一个存储器，用于存储计算机指令；
[0018]至少一个处理器，当所述至少一个处理器执行所述计算机指令时，实现上述的方法。
[0019]本专利技术还公开了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条计算机指令，所述至少一条指令由处理器加载并执行，以实现上述的方法。
[0020]本专利技术还公开了一种计算机程序产品，所述计算机程序产品包括计算机程序/指令，所述计算机程序/指令由处理器执行时，实现上述的方法。
[0021]本专利技术与现有技术相比，主要区别及其效果在于：将一个公共组件单独构建为公共库，从而可以单独加载一个组件，而现有技术中的公共库总是包括很多功能单元，当加载库时，需要将所有功能单元都加载上，浪费了加载的时间。为了实现各子应用按需加载自己所需要的公共组件，本专利技术在主应用中缓存所有组件库的存储地址，当子应用引用其中一个或多个组件时，才通过缓存的组件库的存储地址来加载相应组件，无需在启动子应用时盲目地提前加载所有公共库。同时，按需加载还可以有效减小子应用的构件大小，提升加载性能。该加载方式，可完全适用于主流的前端微服务架构，解决了微服务中公共组件不能共享和按需加载的问题。
附图说明
[0022]图1是web微前端中公共组件加载和使用的示意图；
[0023]图2是根据本专利技术一些实施例所提出的共享组件或者公共库加载和使用的示意图；
[0024]图3是根据本专利技术一些实施例所提出的流程图；
[0025]图4是根据本专利技术一些实施例所提出的库的加载关系示意图；
[0026]图5是根据本专利技术一些实施例所提出的电子设备的基本硬件结构示意图。
具体实施方式
[0027]为使本专利技术实施例的目的和技术方案更加清楚，下面将结合本专利技术实施例的附图，对本专利技术实施例的技术方案进行清楚、完整地描述。显然，以下所描述的实施例是本专利技术的一部分实施例，而不是全部的实施例。基于所描述的本专利技术的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0028]此外，为了避免混乱或模糊本专利技术的重点，有些具体细节将在描述中被省略。并且，在不冲突的情况下，本专利技术中的实施例及实施例中的特征可以相互组合。
[0029]浏览器应用程序是上网浏览最常使用的工具。一个浏览器页面中，有时只包括各
种信息，有时则会包括通往其他网页的链接。在微服务架构下，一个浏览器页面中还有一些则可能包括一些功能模块(或者说其他应用)，这些功能模块也是通过鼠标的点击而启动的。从用户的直观感受来看，点击这些功能模块导致的效果是打开了一个新的页面。从应用程序的层次架构来看，浏览器页面是一个主应用，功能模块则是在主应用下的子应用。
[0030]图1所示是web微前端中公共组件加载和使用的示意图。在主应用10下，可以包括用于实现不同功能的多个子应用，例如图中所示的第一子应用12和第二子应用13。可以理解，多个子应用中通常会包括部分功能相同的代码段，即不同的子应用可以共享一些组件或库。这些共享组件或者公共库11a可以预先编写/编译好，保存在存储器(通常是网络存储器)中，以供浏览器应用程序来加载和使用，而无需在每个主应用或子应用中重复编写代码。保存在某处存储器中的共享组件或者公共库11a可以具有一个明确的url地址，每个浏览器应用程序加载共享组件或者公共库11a时，通常可以通过script标签或者link标签的方式来引入该url地址，从而将共享组件或者公共库11a挂载到浏览器页面中，或者说挂载到window对象下。也就是说，在图1所示的示意图中，一方面共享组件或者公共库11a被完整地加载到浏览器应用程序中，另一方面，对于每一个单独的应用(主应用和子应用)来说，其实并不需要加本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种在前端微服务中按需加载公共组件或库的方法，其特征在于，包括：将所述前端微服务中的主应用和子应用所用到的每一个共享组件分别构建为一个单独的组件库；加载所述主应用时，加载变量a，所述变量a用于保存所述公共库和所述组件库的存储地址；将所述变量a和公共方法b挂载在window对象上，所述公共方法b根据相应子应用所用到的组件库或公共库的指定库名加载相应组件库或公共库；所述子应用通过引用所述指定库名来使用相应的公共组件或库。2.如权利要求1所述的方法，其特征在于，所述将所述变量a和公共方法b挂载在window对象上，包括通过单例模式挂载所述变量a和所述公共方法b。3.如权利要求1所述的方法，其特征在于，所述公共方法b根据相应子应用所用到的组件库或公共库的指定库名加载相应组件库或公共库，包括所述公共方法b在页面的head标签下以script标签的形式指示与所述指定库名相对应的组件库或公共库的所述存储地址。4.如权利要求3所述的方法，其特征在于，所述script标签设...

【专利技术属性】
技术研发人员：吕鹏飞，杜衡，傅玉屏，
申请(专利权)人：优刻得科技股份有限公司，
类型：发明
国别省市：