一种基于遗传算法的优化前端分包打包方法与流程

1.本发明涉及生产制造执行技术领域，具体涉及一种基于遗传算法的优化前端分包打包方法。


背景技术：

2.微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。随着技术的成熟和业务场景的复杂化，微前端的应用越来越广，阿里提供了qiankun的解决方案，京东也提供了micro-app的微前端方案。
3.目前微前端打包，主要流程还是各个微前端工程分别的打包，对于大于某个阈值的包进行拆分、其分包过程中，也只考虑到了当前工程包的重复利用，哪怕在人工干预优化下，个别比较大的包可能被手动处理以达到多个包之间的共享，但是依然无法改变各个工程各自为战的的局面，特别在针对于各个子工程还存在不同的业务逻辑下，加载顺序不同的情况，对其进行整体优化变得很难，其缺少一个通用且能量化的方法。


技术实现要素：

4.本发明的目的在于提供一种基于遗传算法的优化前端分包打包方法，以期解决背景技术中存在的问题。
5.为了实现上述目的，本发明采用以下技术方案：
6.一种基于遗传算法的优化前端分包打包方法，包括以下步骤：
7.对目标微前端工程进行改造，并抽取相关的数据；
8.通过基因算法优化目标参数；
9.输出优化后的参数，并且输出优化过程的量化报告。
10.在一些实施例中，所述对目标微前端工程进行改造，并抽取相关的数据；包括：
11.读取所述目标微前端工程的子工程的package.json文件，获得各个工程依赖的第三方包的信息；
12.改造目标微前端工程的子工程的命令，使得能通过命令行或其他方式输入webpack打包相关的参数，并且能自动部署到测试服务器上；
13.定义目标微前端工程的业务加载场景，定义常见的几个常见业务场景，并通过测试软件模拟用户行为，规定各个场景的权重。
14.在一些实施例中，所述通过基因算法优化目标参数；包括：
15.步骤21：把目标微前端工程的各子工程的参数作为算法的基因组成，并随机初始化初始值；
16.步骤22：把算法当前的基因，即各子工程参数传入到子工程改造后的打包命令中；
17.步骤23：各子工程打包，自动化部署到测试服务器上；
18.步骤24：在测试客户机上，根据业务场景，访问或操作相关的业务页面，记录加载速度参数；并根据权重计算最终得分；
19.步骤25：把得分作为基因算法的适应度传递回算法；
20.步骤26：基因算法根据所述的适应度进行一次迭代，进化出新的基因；
21.步骤27：重复步骤22-步骤26，直到获得一个满意的结果，或者在规定的迭代周期内没有明显的进步。
22.本技术所提供的一种基于遗传算法的优化前端分包打包方法具有的有益效果包括但不限于：
23.能显著的提供微前端服务框架下的页面加载速度，明显降低包大小。
24.在一个由三个子工程组成的微前端页面的的例子中，主工程是react+antd的为架构的包，两个子工程分别是react+antd和vue+element的包，在未进行本技术优化的情况下，三个包的大小是2.2m(压缩后，包数量10个，优化后大小是1.4m，最终发布包减少40％+，共计分包数量6个，刚好能极大的利用目标chrome浏览器的并发上限，加载速度在相同网络情况下提升近50％。
附图说明
25.图1是发明实施例的核心算法流程图。
具体实施方式
26.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。
27.相反，本技术涵盖任何由权利要求定义的在本技术的精髓和范围上做的替代、修改、等效方法以及方案。进一步，为了使公众对本技术有更好的了解，在下文对本技术的细节描述中，详尽描述了一些特定的细节部分。对本领域技术人员来说没有这些细节部分的描述也可以完全理解本技术。
28.以下将结合图1对本技术实施例所涉及的一种基于遗传算法的优化前端分包打包方法进行详细说明。值得注意的是，以下实施例仅仅用于解释本技术，并不构成对本技术的限定。
29.如图1所示，一种基于遗传算法的优化前端分包打包方法，为了方便说明，我们先对要优化的前端工程进行假设，该工程是由微前端架构驱动的，包含一个主工程a和两个子工程b和c，a、b、c三个工程均为webpack打包的，均基于react和antd。
30.包括如下步骤：
31.s1、改造工程a、b、c，使得a、b、c工程能通过命令行输入打包参数并打包，部署；
32.上述步骤s1具体包括如下步骤
33.s101、通过代码读取每个工程的package.json文件，并且约定所有的运行时要使用的包放在dependencies目录下面，获得所有可供优化的参数项。
34.s102、改造a、b、c三个工程的命令行，让其能根据命令行输入的参数打包分包，并最终自动化部署到目标测试服务器上。优化的，为了加快算法迭代速度，可以支持并发的打包多组参数，并发的部署到目标服务器上的多个端口上。发布完成后，能通知s2所述的算法主程序。
35.s103、定义需要用来验证速度的业务场景，记录工程发布的页面不同的路由的加载速度，优化的，对于存在懒加载的页面，应该用类似于selenium的软件来模拟用户行为，并记录懒加载的组件的加载速度，并回传给s2所述的算法主程序。
36.s2、运行基于遗传算法的程序，迭代寻找最佳方式。
37.上述步骤s2具体包括如下步骤：
38.s201、根据上述s101工程里面提取的参数项，随机生成多组参数值组作为遗传算法的初始值，每组参数值作为遗传算法的种群的一个个体，例如可以使用s101所述的工程里面提取的参数项作为数组的索引，数组的值作为最后打包生成的所在包的索引；特殊的，部分包索引表示打包到各个子工程的公用包里面；
39.s202、依次把s101生成的种群基因按照规则转换成各个子工程的打包命令的参数；
40.s203、把s202所述的生成的参数传入到各个子工程里面，运行打包命令，自动化部署到测试服务器上；
41.s204、在s103所述的业务场景下，测试s203所述的测试服务器上的页面的加载速度，记录值，并根据s103所述的业务场景的业务场景权重，来计算出一个值作为算法的每个个体的适应度，并记录本轮种群中适应度最高的个体的适应度；
42.s205、根据s204所述的适应度，对现有的基因算法的种群进行一次迭代，按基因算法，淘汰掉适应度低的个体，选出优秀个体进行繁殖、突变和基因交换，计算出新的一代种群；
43.s206、重复上面s201到s205的步骤，直到找到一个满意的适应度的个体，如果对适应度最佳个体无量化的预期，可以根据最近10轮，种群中出现的最佳适应度无明显提升，作为结束条件。
44.s3、把s2步骤中获取的最佳个体的基因作为本次优化的最终结果，转换成各个子工程的参数，优化的，可以输出优化过程中的适应度变化作为最佳值的参考，供开发人员查阅。
45.基于上面步骤，得到的各个子工程的打包参数，能有效的兼顾浏览器并发性能，合理的安排各个包的大小，合理的合并公用包，并且在规定的多个规定的业务场景下，都取得比较好的加载体验。还不需要开发人员手动不停的调试，不管是从开发成本还是最终的加载速度，都取得非常好的效果。
46.以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。