【技术实现步骤摘要】
本申请涉及网页程序开发领域，特别涉及一种微前端应用页面的生成方法、系统、装置及介质。
技术介绍
1、微前端是2016年thoughtworks technology radar提出的概念：类似于服务端微服务的架构理念，一个庞大的前端应用(巨石应用)可以拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个在用户看来仍是单一完整的应用。独立部署、完全自治、松耦合是其核心特性。
2、目前业界比较流行的生成微前端应用页面的方式存在以下缺点：
3、1、基于iframe实现的方案：存在路由丢失，通信复杂，加载白屏等问题。
4、2、基于web components的实现方案：缺点是浏览器兼容性略差；
5、3、基于javascript模块加载器的实现方案：缺点是对现有应用的改造量较大，基座组件和子组件之间共同依赖无法复用，造成代码冗余。
技术实现思路
1、为了解决至少一个上述相关技术中存在的技术问题，本申请实施例提出了一种微前端应用页面的生成方法、系统、装置及介质，旨在解决子应用和基座应用打包冗余的问题，充分利用浏览器和内容分发网络的缓存机制，避免不同子应用重复加载基座应用的问题。
2、一方面，本申请实施例提出了一种微前端应用页面的生成方法，所述方法包括以下步骤：
3、获取基座应用打包文件；
4、将所述基座应用打包文件上传至内容分发网络；
5、获取子应用项
6、将所述基座应用打包文件对应的基座应用插件引入至所述子应用项目文件，通过微前端第一插件对所述子应用项目文件进行打包，抽离所述基座应用打包文件中包含的基座应用依赖，获得包含基座应用依赖映射表的子应用打包文件；所述基座应用依赖映射表为记录引用所述基座应用插件和所述基座应用依赖的相关依赖地址的映射表；
7、通过微前端第二插件从所述内容分发网络中获取所述基座应用打包文件，动态引用所述子应用打包文件中包含的所述基座应用依赖映射表加载所述基座应用打包文件，以及引用所述子应用打包文件，生成微前端应用页面。
8、在一些实施例中，在执行所述获取基座应用打包文件这一步骤之前，所述方法还包括以下步骤：
9、通过vue cli构建基座应用项目，获得基座应用项目文件；
10、通过微前端第三插件对所述基座应用项目文件进行打包，获得所述基座应用打包文件；
11、将所述基座应用打包文件发布至npm源仓库，获得对应于所述基座应用打包文件的基座应用插件。
12、在一些实施例中，所述方法还包括：
13、响应于所述基座应用项目的项目更新操作，更新所述基座应用项目文件，获得更新后的基座应用项目文件。
14、在一些实施例中，所述基座应用打包文件包括基座静态资源文件，所述将所述基座应用打包文件上传至内容分发网络这一步骤，具体包括：
15、选定基座应用升级模式，根据所述基座应用升级模式，将所述基座应用项目文件对应的所述基座应用打包文件中包含的所述基座静态资源文件上传至所述内容分发网络。
16、在一些实施例中，所述将所述基座应用打包文件对应的基座应用插件引入至所述子应用项目文件，通过微前端第一插件对所述子应用项目文件进行打包，抽离所述基座应用打包文件中包含的基座应用依赖，获得包含基座应用依赖映射表的子应用打包文件这一步骤，具体包括：
17、通过所述微前端第一插件对已引入所述基座应用插件的所述子应用项目文件进行打包，跳过所述基座应用打包文件包含的基座应用配置文件中已引入的所述基座应用依赖，生成所述子应用打包文件。
18、在一些实施例中，所述通过微前端第二插件从所述内容分发网络中获取所述基座应用打包文件，动态引用所述子应用打包文件中包含的所述基座应用依赖映射表加载所述基座应用打包文件，以及引用所述子应用打包文件，生成微前端应用页面这一步骤，具体包括：
19、通过所述微前端第二插件从所述内容分发网络中获取所述基座静态资源文件，利用javascript方法在所述微前端应用模板中动态引用所述基座静态资源文件，引用所述子应用打包文件中包含的所述基座应用依赖映射表加载所述基座静态资源文件，在所述微前端应用模板中生成微前端基座应用；
20、通过所述微前端第二插件，利用所述javascript方法在所述微前端应用模板中引用所述子应用打包文件并加载，在已生成所述微前端基座应用的所述微前端应用模板中生成微前端子应用，获得所述微前端应用页面。
21、在一些实施例中，所述基座应用升级模式为基座固化升级模式或基座无感升级模式，在执行所述通过微前端第二插件从所述内容分发网络中获取所述基座应用打包文件，动态引用所述子应用打包文件中包含的所述基座应用依赖映射表加载所述基座应用打包文件，以及引用所述子应用打包文件，生成微前端应用页面这一步骤时，所述方法还包括步骤：
22、当所述基座应用升级模式为所述基座固化升级模式时，响应于基座应用打包文件版本号选择操作，确定基座应用版本号，通过所述微前端第二插件从所述内容分发网络中获取对应于所述基座应用版本号的所述基座应用打包文件；
23、当所述基座应用升级模式为所述基座无感升级模式时，检测所述基座应用项目是否更新，通过所述微前端第二插件从所述内容分发网络中自动获取基座应用打包更新文件；所述基座应用打包更新文件为所述更新后的基座应用项目对应的所述基座应用打包文件。
24、另一方面，本申请实施例提出了一种微前端应用页面的生成系统，所述系统包括：
25、第一模块，用于获取基座应用打包文件；
26、第二模块，用于将所述基座应用打包文件上传至内容分发网络；
27、第三模块，用于获取子应用项目文件；
28、第四模块，用于将所述基座应用打包文件对应的基座应用插件引入至所述子应用项目文件，通过微前端第一插件对所述子应用项目文件进行打包，抽离所述基座应用打包文件中包含的基座应用依赖，获得包含基座应用依赖映射表的子应用打包文件；所述基座应用依赖映射表为记录引用所述基座应用插件和所述基座应用依赖的相关依赖地址的映射表；
29、第五模块，用于通过微前端第二插件从所述内容分发网络中获取所述基座应用打包文件，动态引用所述子应用打包文件中包含的所述基座应用依赖映射表加载所述基座应用打包文件，以及引用所述子应用打包文件，生成微前端应用页面。
30、另一方面，本申请实施例提出了一种微前端应用页面的生成装置，所述装置包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现前面所述的微前端应用页面的生成方法。
31、还有一方面，本申请实施例提出了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现前面所述的微前端应用页面的生成方法本文档来自技高网...
【技术保护点】
1.一种微前端应用页面的生成方法，其特征在于，所述方法包括以下步骤：
2.根据权利要求1所述的微前端应用页面的生成方法，其特征在于，在执行所述获取基座应用打包文件这一步骤之前，所述方法还包括以下步骤：
3.根据权利要求2所述的微前端应用页面的生成方法，其特征在于，所述方法还包括：
4.根据权利要求3所述的微前端应用页面的生成方法，其特征在于，所述基座应用打包文件包括基座静态资源文件，所述将所述基座应用打包文件上传至内容分发网络这一步骤，
5.根据权利要求1所述的微前端应用页面的生成方法，其特征在于，所述将所述基座应用打包文件对应的基座应用插件引入至所述子应用项目文件，通过微前端第一插件对所述子应用项目文件进行打包，抽离所述基座应用打包文件中包含的基座应用依赖，获得包含基座应用依赖映射表的子应用打包文件这一步骤，具体包括：
6.根据权利要求4所述的微前端应用页面的生成方法，其特征在于，所述通过微前端第二插件从所述内容分发网络中获取所述基座应用打包文件，动态引用所述子应用打包文件中包含的所述基座应用依赖映射表加载所述基座应用
7.根据权利要求4所述的微前端应用页面的生成方法，其特征在于，所述基座应用升级模式为基座固化升级模式或基座无感升级模式，在执行所述通过微前端第二插件从所述内容分发网络中获取所述基座应用打包文件，动态引用所述子应用打包文件中包含的所述基座应用依赖映射表加载所述基座应用打包文件，以及引用所述子应用打包文件，生成微前端应用页面这一步骤时，所述方法还包括步骤：
8.一种微前端应用页面的生成系统，其特征在于，所述系统包括：
9.一种微前端应用页面的生成装置，其特征在于，所述装置包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述的微前端应用页面的生成方法。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7任一项所述的微前端应用页面的生成方法。
...【技术特征摘要】
1.一种微前端应用页面的生成方法，其特征在于，所述方法包括以下步骤：
2.根据权利要求1所述的微前端应用页面的生成方法，其特征在于，在执行所述获取基座应用打包文件这一步骤之前，所述方法还包括以下步骤：
3.根据权利要求2所述的微前端应用页面的生成方法，其特征在于，所述方法还包括：
4.根据权利要求3所述的微前端应用页面的生成方法，其特征在于，所述基座应用打包文件包括基座静态资源文件，所述将所述基座应用打包文件上传至内容分发网络这一步骤，
5.根据权利要求1所述的微前端应用页面的生成方法，其特征在于，所述将所述基座应用打包文件对应的基座应用插件引入至所述子应用项目文件，通过微前端第一插件对所述子应用项目文件进行打包，抽离所述基座应用打包文件中包含的基座应用依赖，获得包含基座应用依赖映射表的子应用打包文件这一步骤，具体包括：
6.根据权利要求4所述的微前端应用页面的生成方法，其特征在于，所述通过微前端第二插件从所述内容分发网络中获取所述基座应用打包文件，动态引用所述子应用打包文件...
【专利技术属性】
技术研发人员：林阳，
申请(专利权)人：天翼物联科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。