[发明专利]基于umi的微前端框架的动态分包和合包方法

说明书

本发明公开了基于umi的微前端框架的动态分包和合包方法，该方法包括以下步骤：配置统一脚手架并通过简单命令搭建子模块项目及页面；通过脚手架生成的子模块中自带插件处理脚手架搬迁过来的代码；配置主模块中自带插件；配置脚手架底座，并将子模块的版本信息从配置项目拉取到本地，同时根据子模块的版本信息动态拉取git远程仓库对应的版本到本地编译；运行态中，主模块在打开菜单时候去动态加载资源，若为分包模式，则远程加载路由url对应子模块的静态资源，解析静态资源携带的增量国际化、路由及models数据并注入到主模块中。有益效果：解决了现有技术中的加载慢和冗余问题。

技术领域

本发明涉及微前端领域，具体来说，涉及基于umi的微前端框架的动态分包和合包方法。

背景技术

近年来前端技术迅猛发展，涌现出React、Vue(均为JavaScript框架)等优秀的前端框架。但是随着功能的迭代，路由越来越多，前端包体积越来越大，前端工程编译越来越慢。随着团队规模的增大，原来几个人在git(主流的一种代码托管技术)提交即可，变成几十个人在git仓库提交，代码规范和代码依赖、代码冲突在所难免，代码越来越臃肿，管理成本也越来越大。

所以基于此，在通常情况下，一般是会是在git上面创建一个新仓库，一个新仓库对应一个子模块项目，各自小组团队分别对应不同的子模块项目。一旦子模块多起来之后，就会遇到一些更复杂的情况。比如部署问题，子模块git分开之后，两个模块的页面有互相关联，那么一般情况下是用iframe(嵌入式框架)集成。iframe集成其他模块的页面，不但客户体验不佳，而且页面加载效率极慢。因为现在都是单页面应用居多，即使是做了远程加载，但是子模块的打包时候的依赖跟其他模块重复，打包出来之后体积过大，导致加载很慢。例如A模块依赖Jquery(100kb)，B模块也同样依赖Jquery(100kb)，造成了极大的冗余和依赖浪费，其中Jquery是一个简洁而快速的JavaScript库。

针对相关技术中的问题，目前尚未提出有效的解决方案。

发明内容

针对相关技术中的问题，本发明提出基于umi的微前端框架的动态分包和合包方法，以克服现有相关技术所存在的上述技术问题。

为此，本发明采用的具体技术方案如下：

基于umi的微前端框架的动态分包和合包方法，该方法包括以下步骤：

S1、配置统一脚手架，并通过简单命令搭建子模块项目及页面；

S2、通过脚手架生成的子模块中自带插件对脚手架搬迁过来的代码进行处理，并动态生成submodule.js；

S3、配置主模块中自带插件；

S4、配置脚手架底座，并将子模块的版本信息从配置项目拉取到本地，同时根据子模块的版本信息动态拉取git远程仓库对应的版本到本地编译；

S5、运行态中，主模块在打开菜单时候去动态加载资源，若为分包模式，则远程加载路由url对应子模块的静态资源，且动态加载后，解析静态资源携带的增量国际化、路由及models数据并注入到主模块中。

进一步的，所述统一脚手架包括：快速生成项目、快速生成模块及快速生成页面。

进一步的，所述S2中通过脚手架生成的子模块中自带插件对脚手架搬迁过来的代码进行处理，并动态生成submodule.js还包括以下步骤：

S21、通过umi-plugin-bdpcloud插件处理脚手架搬迁过来的代码，且代码搬迁过程为利用nodejs的fsExtra的同步搬迁文件和文件夹功能；

S22、若变量@/与当前项目自己的冲突，则替换全局变量为合包的方式；

S23、若目录降低了一级，则进行国际化文件的补充；