CN114579904A - 一种基于angular路由分发式微前端的页面缓存实现方法 - Google Patents

Abstract

本发明公开一种基于angular路由分发式微前端的页面缓存实现方法，涉及前端架构技术领域，基于以angular作为开发框架的遗留系统，将多个子应用整合为单页面的父应用，通过npm包的方式父应用获取子应用的组件和对应路由配置，通过父应用复用子应用的组件和对应路由配置，利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况进行页面缓存。

Description

一种基于angular路由分发式微前端的页面缓存实现方法

技术领域

本发明公开一种方法，涉及前端架构技术领域，具体地说是一种基于angular路由分发式微前端的页面缓存实现方法。

背景技术

随着前端技术的发展和公司的业务拓展，使用陈旧技术栈编写的应用逐渐不能满足业务需求，这些应用被称为遗留系统。而这些应用又需要结合到新的应用之中去使用。于是微前端应运而生，微前端可以兼容不同类型的前端框架，可满足既不重写原有系统，又开发新的业务的需求。其中被广泛使用的微前端是路由分发式微前端。

路由分发式微前端，通过路由将不同的业务分发到不同的、独立前端应用上。但是这种方式看上去更像是多个前端应用的简单聚合，只是将这些前端应用拼凑到一起，使它们看起来像是一个完整的整体。然而它们并不是统一的整体，因为每次用户从一个应用到另一应用的时候，往往页面需要刷新，资源需要重载，无法实现页面缓存。

发明内容

本发明针对现有技术的问题，提供一种基于angular路由分发式微前端的页面缓存实现方法，保留以angular作为开发框架的遗留系统的已有业务逻辑，在只改动架构的工作量下，完成页面缓存这一基本需求，实现切换前端应用时无整页刷新，提升系统流畅度，与此同时提高用户使用体验。

本发明提出的具体方案是：

本发明提供一种基于angular路由分发式微前端的页面缓存实现方法，基于以angular作为开发框架的遗留系统，将多个子应用整合为单页面的父应用，通过npm包的方式父应用获取子应用的组件和对应路由配置，

通过父应用复用子应用的组件和对应路由配置，利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况进行页面缓存。

进一步，所述的一种基于angular路由分发式微前端的页面缓存实现方法中所述通过npm包的方式父应用获取子应用的组件和对应路由配置，包括：

修改子应用为可发布npm包的应用构造，选取子应用需要暴露给父应用的组件和路由配置，根据应用名命名npm包，发布npm包。

进一步，所述的一种基于angular路由分发式微前端的页面缓存实现方法中所述修改子应用为可发布npm包的应用构造，包括：

分别创建index.ts文件和package.json文件，所述index.ts文件存放需要暴露给父应用的组件的配置，所述package.json文件存放npm包的配置。

进一步，所述的一种基于angular路由分发式微前端的页面缓存实现方法中所述通过父应用复用子应用的组件和对应路由配置，包括：

通过父应用下载子应用的npm包，引入和注册子应用的组件，通过父应用的外层路由模块汇合拼接所有子应用的路由。

进一步，所述的一种基于angular路由分发式微前端的页面缓存实现方法中所述利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况进行页面缓存，包括：

通过父应用创建routeReuseStategy.ts文件，引入RouteReuseStrategy类，通过RouteReuseStrategy类中方法判断路由对应组件是否需要缓存，若需要缓存则通过在子应用中对每个页面的路由配置添加属性，完成页面缓存。

本发明还提供一种基于angular路由分发式微前端的页面缓存实现系统，基于以angular作为开发框架的遗留系统，包括整合模块、复用模块及缓存模块，

整合模块将多个子应用整合为单页面的父应用，通过npm包的方式父应用获取子应用的组件和对应路由配置，

复用模块通过父应用复用子应用的组件和对应路由配置，利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况，缓存模块进行页面缓存。

进一步，所述的一种基于angular路由分发式微前端的页面缓存实现系统中所述整合模块通过npm包的方式父应用获取子应用的组件和对应路由配置，包括：

修改子应用为可发布npm包的应用构造，选取子应用需要暴露给父应用的组件和路由配置，根据应用名命名npm包，发布npm包。

进一步，所述的一种基于angular路由分发式微前端的页面缓存实现系统中所述整合模块修改子应用为可发布npm包的应用构造，包括：

分别创建index.ts文件和package.json文件，所述index.ts文件存放需要暴露给父应用的组件的配置，所述package.json文件存放npm包的配置。

进一步，所述的一种基于angular路由分发式微前端的页面缓存实现系统中所述复用模块通过父应用复用子应用的组件和对应路由配置，包括：

通过父应用下载子应用的npm包，引入和注册子应用的组件，通过父应用的外层路由模块汇合拼接所有子应用的路由。

进一步，所述的一种基于angular路由分发式微前端的页面缓存实现系统中所述复用模块利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况，包括：

通过父应用创建routeReuseStategy.ts文件，引入RouteReuseStrategy类，通过RouteReuseStrategy类中方法判断路由对应组件是否需要缓存，若需要缓存则通过在子应用中对每个页面的路由配置添加属性，以便完成页面缓存。

本发明的有益之处是：

本发明提供一种基于angular路由分发式微前端的页面缓存实现方法，保留以angular作为开发框架的遗留系统的已有业务逻辑代码，在只改动架构的工作量下，完成页面缓存这一基本需求，实现切换前端应用时无整页刷新，提升系统流畅度，与此同时提高用户使用体验。

并且经过改造后的架构，没有破坏路由分发式微前端的可用性，每个子项目都是可以独立运行和部署的，与此同时，对于有页面缓存的需求，将多个应用整合为一个单页面应用，满足了微前端的三个要素，即：独立运行、独立开发、独立部署。可以配合上前端框架的组件Lazyload功能，在需要的时候，才加载对应的业务组件或应用，它实现了一种微前端应用。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是路由分发式微前端访问多个应用的流程示意图。

图2是本发明方法父应用获取到子应用组件和对应的路由配置流程示意图。

图3是路由缓存策略流程示意图。

具体实施方式

下面结合附图和具体实施例对本发明作进一步说明，以使本领域的技术人员可以更好地理解本发明并能予以实施，但所举实施例不作为对本发明的限定。

本发明提供一种基于angular路由分发式微前端的页面缓存实现方法，基于以angular作为开发框架的遗留系统，将多个子应用整合为单页面的父应用，通过npm包的方式父应用获取子应用的组件和对应路由配置，

通过父应用复用子应用的组件和对应路由配置，利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况进行页面缓存。

本发明方法是基于原系统angular框架的前提下采取路由分发式微前端架构进行使用，本发明方法是基于原系统采用进行使用，本发明方法提供了父应用聚合、调度子应用的过程说明，利用angular中的RoutereuseStrategy来实现父项目内的页面缓存，经改造后，项目保留了原有的路由分发微前端架构方式。

本发明方法只关注组件或模块抽离与再聚合到angular中，组件的大多数调度功能交给框架内部的懒加载来实现。

本发明方法对路由缓存策略的配置方法和各个页面的路由配置做配套改造，可以满足大多数缓存需求。

改造后的项目仍可采取原本的路由分发式微前端架构，只是在部署的时候多了一种选择，如果对页面缓存无需求，可直接采用路由分发；否则，就可以单独部署父应用项目。

具体应用中，在本发明方法的一些实施例中，进行原系统angular框架改造前，可知通常遗留系统包括基本框架、鉴权模块和各个业务子系统。系统基本框架和鉴权模块被封装且发布在仓库中，每一个子系统由于整体UI的一致，路由分发的特性导致每个应用都在各自运作，只是在运行时，每一个子应用都复用了一遍系统基本框架和鉴权模块，但多个子应用并非整体的一个应用。

本发明方法中将多个子应用整合为单页面的父应用，其中父应用除了包含每个子应用需要使用的公共方法，还在页面合适的地方引入或创建DOM，用户操作时，可以加载对应的子应用或触发子应用的启动，并能够卸载应用，有可供子应用使用的页面缓存策略。

通过npm包的方式父应用获取子应用的组件和对应路由配置，将子应用内部的组件和对应的路由配置暴露给父应用，包括：

先修改子应用为可发布npm包的应用构造，其中可在目录——/src/app/routes下分别创建文件，包括index.ts文件、package.json文件和.npmrc文件，

所述index.ts文件存放需要暴露给父应用的组件的配置，也是打包npm的入口文件，文件中列出需要导出的所有业务代码组件，

所述package.json文件存放npm包的配置，可配置打包npm包的脚本、打包入口文件、版本号、发布仓库地址等，

如果使用私有仓库，需添加.npmrc文件并配置权限认证信息。

再选取子应用需要暴露给父应用的组件和路由配置，其中导出外层路由模块中的路由配置，以@angular/cli@7.2.0下的应用为例，配置文件所在路径为/src/app/routes/routes-routing.module.ts中的routes.children，routes.children是一个数组，数组里的每一项都是一个路由，对应着一个组件。每个子项目的路由配置中使用loadChildren属性，说明这个组件使用懒加载功能，这样就不会因加载过多组件而造成卡顿。

最后根据应用名在package.json中命名npm包，发布npm包，将一个项目内的子包放在一个文件夹下，否则在更新包时会造成一些混乱。

通过父应用复用子应用的组件和对应路由配置，其中首先下载对应npm包到父应用依赖中，先引用到父应用的NgModule中进行引入和注册组件，再引入到父应用的外层路由模块，将所有子应用的路由在父应用的外层路由模块中进行汇合拼接，将框架模块，比如导航栏和侧边栏作为一级路由，将子应用中获取的一级路由获取并注入到父应用的路由模块中的children内部，作为子路由使用。能够通过运行父级应用的方式运行所有的子应用，整个父级应用现在已经成为SPA应用。

利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况进行页面缓存，其中RouteReuseStrategy类的方法如下：

shouldDetach()，用于确定是否应分离此路由及其子树，以便以后复用，

store()用于存储分离的路由，

shouldAttach()用于确定是否应重新连接此路由及其子树，

retrieve()用于检索以前存储的路由，

shouldReuseRoute()用于确定是否应复用路由，参考图3，

在父应用中创建routeReuseStategy.ts文件，将RouteReuseStrategy引入进来，由于shouldDetach方法在离开所有路由时都会拦截程序并运行判断，shouldDetach中判断该路由对应组件是否需要缓存，若需要缓存，通过在子应用中对每个页面的路由配置添加属性，来完成页面缓存的需求定值。比如添加reuse属性，需要缓存则设置为true，否则设置为false，在父应用中，通过routeConfig即可访问到路由配置中的reuse属性，从而可以进行是否缓存的判断。

在父应用中可以使用delete操作符删除已缓存的页面。例如，已实现可缓存的tab页，可以在tab页点击关闭时删除缓存页面，这样下次从菜单打开时，页面就会重新加载，更加符合用户使用习惯。

改造后的架构使得路由转换是由angular应用分发的所有的页面缓存都是在父应用项目内部存储和加载，项目也拥有了更清晰的结构、更轻量的跳转。

本发明还提供一种基于angular路由分发式微前端的页面缓存实现系统，基于以angular作为开发框架的遗留系统，包括整合模块、复用模块及缓存模块，

整合模块将多个子应用整合为单页面的父应用，通过npm包的方式父应用获取子应用的组件和对应路由配置，

复用模块通过父应用复用子应用的组件和对应路由配置，利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况，缓存模块进行页面缓存。

上述系统内的各模块之间的信息交互、执行过程等内容，由于与本发明方法实施例基于同一构思，具体内容可参见本发明方法实施例中的叙述，此处不再赘述。

同样地，本发明系统保留以angular作为开发框架的遗留系统的已有业务逻辑代码，在只改动架构的工作量下，完成页面缓存这一基本需求，实现切换前端应用时无整页刷新，提升系统流畅度，与此同时提高用户使用体验。

并且经过改造后的架构，没有破坏路由分发式微前端的可用性，每个子项目都是可以独立运行和部署的，与此同时，对于有页面缓存的需求，将多个应用整合为一个单页面应用，满足了微前端的三个要素，即：独立运行、独立开发、独立部署。可以配合上前端框架的组件Lazyload功能，在需要的时候，才加载对应的业务组件或应用，它实现了一种微前端应用。

需要说明的是，上述各流程和各系统结构中不是所有的步骤和模块都是必须的，可以根据实际的需要忽略某些步骤或模块。各步骤的执行顺序不是固定的，可以根据需要进行调整。上述各实施例中描述的系统结构可以是物理结构，也可以是逻辑结构，即，有些模块可能由同一物理实体实现，或者，有些模块可能分由多个物理实体实现，或者，可以由多个独立设备中的某些部件共同实现。

以上所述实施例仅是为充分说明本发明而所举的较佳的实施例，本发明的保护范围不限于此。本技术领域的技术人员在本发明基础上所作的等同替代或变换，均在本发明的保护范围之内。本发明的保护范围以权利要求书为准。

Claims (10)

1.一种基于angular路由分发式微前端的页面缓存实现方法，其特征是基于以angular作为开发框架的遗留系统，将多个子应用整合为单页面的父应用，通过npm包的方式父应用获取子应用的组件和对应路由配置，

通过父应用复用子应用的组件和对应路由配置，利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况进行页面缓存。

2.根据权利要求1所述的一种基于angular路由分发式微前端的页面缓存实现方法，其特征是所述通过npm包的方式父应用获取子应用的组件和对应路由配置，包括：

修改子应用为可发布npm包的应用构造，选取子应用需要暴露给父应用的组件和路由配置，根据应用名命名npm包，发布npm包。

3.根据权利要求2所述的一种基于angular路由分发式微前端的页面缓存实现方法，其特征是所述修改子应用为可发布npm包的应用构造，包括：

分别创建index.ts文件和package.json文件，所述index.ts文件存放需要暴露给父应用的组件的配置，所述package.json文件存放npm包的配置。

4.根据权利要求1所述的一种基于angular路由分发式微前端的页面缓存实现方法，其特征是所述通过父应用复用子应用的组件和对应路由配置，包括：

通过父应用下载子应用的npm包，引入和注册子应用的组件，通过父应用的外层路由模块汇合拼接所有子应用的路由。

5.根据权利要求1所述的一种基于angular路由分发式微前端的页面缓存实现方法，其特征是所述利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况进行页面缓存，包括：

通过父应用创建routeReuseStategy.ts文件，引入RouteReuseStrategy类，通过RouteReuseStrategy类中方法判断路由对应组件是否需要缓存，若需要缓存则通过在子应用中对每个页面的路由配置添加属性，完成页面缓存。

6.一种基于angular路由分发式微前端的页面缓存实现系统，其特征是基于以angular作为开发框架的遗留系统，包括整合模块、复用模块及缓存模块，

整合模块将多个子应用整合为单页面的父应用，通过npm包的方式父应用获取子应用的组件和对应路由配置，

复用模块通过父应用复用子应用的组件和对应路由配置，利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况，缓存模块进行页面缓存。

7.根据权利要求6所述的一种基于angular路由分发式微前端的页面缓存实现方法，其特征是所述整合模块通过npm包的方式父应用获取子应用的组件和对应路由配置，包括：

修改子应用为可发布npm包的应用构造，选取子应用需要暴露给父应用的组件和路由配置，根据应用名命名npm包，发布npm包。

8.根据权利要求7所述的一种基于angular路由分发式微前端的页面缓存实现方法，其特征是所述整合模块修改子应用为可发布npm包的应用构造，包括：

分别创建index.ts文件和package.json文件，所述index.ts文件存放需要暴露给父应用的组件的配置，所述package.json文件存放npm包的配置。

9.根据权利要求6所述的一种基于angular路由分发式微前端的页面缓存实现方法，其特征是所述复用模块通过父应用复用子应用的组件和对应路由配置，包括：

通过父应用下载子应用的npm包，引入和注册子应用的组件，通过父应用的外层路由模块汇合拼接所有子应用的路由。

10.根据权利要求6所述的一种基于angular路由分发式微前端的页面缓存实现方法，其特征是所述复用模块利用angular的RouteReuseStrategy类根据路由配置判断对应的组件缓存情况，包括：

通过父应用创建routeReuseStategy.ts文件，引入RouteReuseStrategy类，通过RouteReuseStrategy类中方法判断路由对应组件是否需要缓存，若需要缓存则通过在子应用中对每个页面的路由配置添加属性，以便完成页面缓存。

Images