基于微前端的开发页面生成方法及其相关装置制造方法及图纸

本申请涉及一种基于微前端的基于微前端的开发页面生成方法及其相关装置。所述方法包括：检测系统连接状态，当检测到用户连接时，运行预设部署脚本，确定子模块组；调用node筛选线程组运行所述子模块组；获取与所述预设部署脚本对应的公共模块组，调用webpack对所述公共模块组和所述子模块组进行打包，得到环境部署包；根据所述环境部署包执行页面渲染，生成开发页面。实施本申请实施例具有提高前端开发环境部署效率的优点。环境部署效率的优点。环境部署效率的优点。

Development page generation method and related devices based on micro front end

【技术实现步骤摘要】
基于微前端的开发页面生成方法及其相关装置


[0001]本申请涉及前端
，特别是涉及一种基于微前端的开发页面生成方法及其相关装置。

技术介绍

[0002]随着互联网技术的发展，互联网产品层出不穷，前端作为互联网产品中重要的组成部分，随着产品、业务项目的增多，前端在维护旧项目的同时还要发展新项目。
[0003]在传统的前端技术中，当前端技术人员在进行前端开发时，通常是将项目本地构建打包，然后推送到服务器上，但是往往需要开发的仅仅是项目中一个模块，传统方案中项目本地构建打包只可以做全量包的构建，当项目过大时，全量包的体积也过大，构建的时间过长，并且构建了许多不相关的业务，从而造成开发资源浪费，开发效率不高。

技术实现思路

[0004]本申请实施例提供一种基于微前端的开发页面生成方法及其相关装置，用于提高前端开发资源利用率。
[0005]第一方面，本申请实施例提供一种基于微前端的开发页面生成方法，所述系统包括：检测系统连接状态，当检测到用户连接时，运行预设部署脚本，确定子模块组；调用node筛选线程组运行所述子模块组；获取与所述预设部署脚本对应的公共模块组，调用webpack对所述公共模块组和所述子模块组进行打包，得到环境部署包；根据所述环境部署包执行页面渲染，生成开发页面。
[0006]在其中一个实施例中，所述在调用node筛选线程组运行所述子模块组，包括：调用node启动线程池，从所述线程池中获取处于空闲状态的空闲线程组，获取所述空闲线程组的空闲线程数；判断所述空闲线程数是否大于所述cpu核心数；若大于，从所述空闲线程组中筛选所述线程组，所述线程组中包含的线程数等于所述cpu核心数；若不大于，确定所述空闲线程组为所述线程组；基于所述线程组运行所述子模块组。
[0007]在其中一个实施例中，所述基于所述线程组运行所述子模块组，包括：获取所述子模块组的子模块数和所述线程组的线程数；判断所述子模块数是否大于所述线程数；若所述子模块数大于所述线程数，将所述子模块组划分成第一子模块组和第二子模块组，其中，所述第一子模块组中包含的第一子模块数与所述线程数一致；通过所述线程组运行所述第一子模块组；当检测到所述第一子模块组中任一第一子模块运行结束时，通过所述第一子模块对应的线程运行所述第二子模块组的第二子模块在其中一个实施例中，所述调用node筛选线程组运行所述子模块组之后，还包括：通过所述线程组调用所述子模块组，当检测到调用完成时，释放所述线程组。
[0008]在其中一个实施例中，所述调用webpack对所述公共模块组和所述子模块组进行
打包之后，还包括：通过nginx和IP环回地址获取所述子模块组中每一子模块对应的端口号，基于所述端口号生成所述子模块的反向代理端口。
[0009]第二方面，本申请实施例提供一种基于微前端的开发页面生成装置，所述装置包括：检测单元，用于检测系统连接状态，当检测到用户连接时，运行预设部署脚本，确定子模块组；线程单元，用于调用node筛选线程组运行所述子模块组；打包单元，用于获取与所述预设部署脚本对应的公共模块组，调用webpack对所述公共模块组和所述子模块组进行打包，得到环境部署包；渲染单元，用于根据所述环境部署包执行页面渲染，生成开发页面。
[0010]第三方面，本申请实施例提供一种服务器，该电子设备包括处理器、存储器、通信接口，以及一个或多个程序，所述一个或多个程序被存储在所述存储器中，并且被配置由所述处理器执行，所述程序包括用于执行如本申请实施例第一方面所述的方法中所描述的部分或全部步骤的指令。
[0011]第四方面，本申请实施例提供了一种计算机可读存储介质，其中，上述计算机可读存储介质用于存储计算机程序，其中，上述计算机程序被处理器执行，以实现如本申请实施例第一方面所述的方法中所描述的部分或全部步骤。
[0012]可以看出，在本申请实施例中，电子设备检测系统连接状态，当检测到用户连接时，运行预设部署脚本，确定子模块组；调用node筛选线程组运行所述子模块组；获取与所述预设部署脚本对应的公共模块组，调用webpack对所述公共模块组和所述子模块组进行打包，得到环境部署包；根据所述环境部署包执行页面渲染，生成开发页面。通过前端模块化，可以将前端的各个应用相互隔离，从而能在用户连接时根据脚本确定需要开发的子模块组，通过线程组运行子模块组，从而各子模块组的启动异步进行，从而提高了开发模块的启动效率；通过webpack对公共模块组和子模块组进行打包生成环境部署包，避免了开发过程中全量包的构建，减小包的体积，缩短构建时间，从而有利于提高开发效率，提高开发资源的利用率。
附图说明
[0013]为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0014]图1是本申请实施例提供的一种微前端架构的架构示意图；图2是本申请实施例提供的一种基于微前端的开发页面生成方法的流程示意图；图3是本申请实施例提供的另一种基于微前端开发页面生成方法的流程示意图；图4是本申请实施例提供的一种服务器400的结构示意图；图5为本申请实施例提供的一种基于微前端的开发页面生成装置的结构示意图。
具体实施方式
[0015]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0016]本专利技术的说明书和权利要求书及所述附图中的术语“第一”、“第二”、“第三”和“第四”等是用于区别不同对象，而不是用于描述特定顺序。此外，术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。
[0017]在本文中提及“实施例”意味着，结合实施例描述的特定特征、结果或特性可以包含在本专利技术的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
[0018]以下，对本申请中的部分用语进行解释说明，以便于本领域技术人员理解。
[0019]电子设备可以包括各种具有无线通信功能的手持设备、车载设备、可穿戴设备（例如智能手表、智能手环、计步器等）、计算设备或通信连接到无线调制解调器的其他处理设备，以及各种形式的用户设备（User Equipment，UE），移动台（Mobile Sta本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于微前端的开发页面生成方法，其特征在于，所述系统包括：检测系统连接状态，当检测到用户连接时，运行预设部署脚本，确定子模块组；调用node筛选线程组运行所述子模块组；获取与所述预设部署脚本对应的公共模块组，调用webpack对所述公共模块组和所述子模块组进行打包，得到环境部署包；根据所述环境部署包执行页面渲染，生成开发页面。2.根据权利要求1所述的方法，其特征在于，所述在调用node筛选线程组运行所述子模块组，包括：调用node启动线程池，从所述线程池中获取处于空闲状态的空闲线程组，获取所述空闲线程组的空闲线程数；判断所述空闲线程数是否大于所述cpu核心数；若大于，从所述空闲线程组中筛选所述线程组，所述线程组中包含的线程数等于所述cpu核心数；若不大于，确定所述空闲线程组为所述线程组；基于所述线程组运行所述子模块组。3.根据权利要求2所述的方法，其特征在于，所述基于所述线程组运行所述子模块组，包括：获取所述子模块组的子模块数和所述线程组的线程数；判断所述子模块数是否大于所述线程数；若所述子模块数大于所述线程数，将所述子模块组划分成第一子模块组和第二子模块组，其中，所述第一子模块组中包含的第一子模块数与所述线程数一致通过所述线程组运行所述第一子模块组；当检测到所述第一子模块组中任一第一子模块运行结束时，通过所述第一子模块对应的线程运行所述第二子模块组的第二子模块。4.根据权利要求1所述的方法，其特征在于，所述调用node筛选线程组运行所述子模块组之后，还包括：当检测到所述子模块组调用完成时，释放所述线程组。5.根据权利要...

【专利技术属性】
技术研发人员：潘兵权，谢华强，
申请(专利权)人：深圳市珍爱捷云信息技术有限公司，
类型：发明
国别省市：