技术专栏 | 全篇干货！不朽情缘科技企业级微前端利用实际

数字时期，随着技术的不休刷新，前后端分离架构的研发模式已成为主流。但发作式增长的业务量让前端职能需要不休增多，幼而美的利用不复存在。当一个通常利用演造成一个巨石利用( Frontend Monolith )后，逻辑复杂和痴肥的问题起头露出，随之而来的是多人难以合作、职能耦合性高、页面加载快率变慢等一系列难题亟待解决。

当后端「微服务」宽泛遍实时，「微」的概想也影响到了前端，「微前端」应运而生。

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理想利用于浏览器端，即将 Web 利用由单一的单体利用转变为多个幼型前端利用聚合为一的利用，各个前端利用能够独立运杏注独立开发、独立部署。

通过跟微服务进行对比，我们能够更清澈地理解微前端的概想：

相迸宗传统的前端工程，微前端架构具备以下几大优势：

大幅提升研发效力：将大工程进行拆分，显著提高打包构建快率，代码简洁、解耦、更易守护；

定造化编排产品：将微利用进行个性化编排组合，急剧进行产品创新；

定向增量升级：各微前端单独部署，可定向增量升级某一微利用，而不影响其他微利用，大大节俭了部署成本和降低升级风险。

基于丰硕的技术实际经验，不朽情缘科技Web前端团队在微前端领域的深刻索求已有所建树。本文将沉点分享在微服务框架的布景下，不朽情缘科技自主研发和设计的微前端解决规划。

微前端技术选型之路

微前端架构的实现方式有多种技术路线，蕴含路由分发式、利用微服务化、微利用、微件化、前端容器化、利用组件化等，需凭据具体场景选用相宜的方式。在某些场景下，可能没有相宜的规划，也可能同时使用多种规划。

因而在做技术选型前，首先必要对公司的产品近况进行整体梳理，了局如下：

现有前端框架：公司主流使用vue,但是一些老旧系统仍使用react、jquery等；

前端工程拆分粒度：大部门产品还是传统的大工程状态；有部门产品已进行了�？榛⒆榧鸱�，将一个大工程拆分成了多个幼工程，各工程通过颁布npm插件的大局，最终被一个主工程装置聚合。

通过对公司现有产品的分析，最终我们最终确认了技术选型的要求：

可能做到跨技术栈，不局限于一种前端框架；

可能将npm插件刷新成以微利用的大局进行聚合。

此表，凭据不朽情缘产品个性，微前端框架还需满足以下几点需要：

● 微利用独立开发

● 微利用独立部署

● 跨技术栈，不局限于一种前端框架

● 可能将npm插件刷新成以微利用的大局进行聚合

● 可将微利用进行编排组合，输出分歧的产品

● 加载器底座使用vue

结合公司的框架能力需要，我们最终选定三种微前端技术路线结合的方式：

利用微服务化：针对于无法拆分的系统和非vue系统，采取微服务化接入，进行技术验证后选择了阿里qiankun框架；

微利用化：针对vue技术栈已做�？榛鸱值南低彻こ�，采取微利用化接入，使用了webpack5提供的�？榱�；

前端容器化: 针对一些老旧的非spa单页面的系统，采取iframe接入。

微前端解决规划设计思路

早年文所述的微前端概想可知，中心加载器是微前端的主题地点，而加载器需具备三个根基能力：

路由分发；

加载微利用的静态资源；

可在加载器上肆意上架下架微利用。

基于上述认知，我们对微前端解决规划的各个�？樽隽巳缦律杓疲�

标识微利用

若何保障加载器能正确的鉴别到对应的微利用呢？

我们决定为每一个微利用定造一个唯一id象征，即编码appCode。

中心化路由

微服务的主题是注册中心，微前端是否也必要一个注册中心呢？若是必要，那么微前端的注册中心又是什么呢？

通常情况下，前端页面的渲染是靠路由来节造的，那我们是否能够利用前端的路由体下反设计一套微前端的注册中心呢？

基于这个思路，我们初步设计了一套加载器的工作流程：

1) 加载器底座拉取微利用配相信息

2) 将配置中的微利用注册到注册中心

3) 浏览器url调换驱动loader加载器加载对应微利用的资源

4) 加载微利用

微利用配置

凭据上述加载器的工作流程图，我们整顿出微利用的配置文件结构以及字段：

注册中心

凭据上文提到的注册中心即是路由的思路，构建出如下路由结构（以vue-router为例）：

以微利用唯一编码做为路由的name[path]。

这里必要把稳的是，思考到微利用的动态加载，加载器加载的微利用个数不做限度，如一次性将所有的微利用路由全数加载，势必会造成路由数据过于重大，因而初始化时只注册中心路由，微利用对应的页面路由，则在第一次进入当前微利用的时辰创建。此步骤放在loader加载器中实现。

Loader加载器

加载器通过监听路由切换，自动获取路由对应的微利用的静态资源，继而进行页面渲染。

加载器重要工作流程如下：

凭据此流程能够编写出加载器的流程代码(以vue为例)：

2023011364440

微利用设计

微利用的设计分为微服务化接入（qiankun）和微利用化接入。

1、微服务化-qiankun

首先在利用入口增长qiankun的性命周期

2023011361822

为了让微利用能被加载器顺利加载，其构建后的文件结构以及构建蹊径需做适配。

为了分辨要求资源的归属，在每个静态资源前都加上了appCode(微利用编码)，例如/app1/index.index,/app1/lib.js ,/app1/lib.css。因而在构建时辰publicPath需设置成”./”相对蹊径。

构建后的文件夹一级目录下需蕴含微利用的配置文件和入口文件。

以下为qiankun利用打包后的文件结构：

2023011315165

config.json：微利用配置文件

Index.html：微利用入口文件

2、微利用化-�？榱�

�？榱匾抢脀enpack5提供的ModuleFederationPlugin将组件�？榛涑�。

2023011326224

通过�？榱汲鲎榧�，最平天生的文件结构如下：

2023011354541

config.json：微利用配置文件

remoteEntry.js：微利用入口文件

不朽情缘科技微前端框架产品

综上所述规划设计整体思路，经过产品化打磨后，不朽情缘科技Web前端团队基于公司现有前端低代码平台，自主研发和设计的微前端框架产品正式落地。

基础类库：为解决形状和编码规范统一等问题，必要一系列的基础类库，如基础组件库，形状库等；

微前端底座：提供基础的admin能力，通过门户布局组件提供扩大批改能力，底座主题蕴含注册中心，资源加载器；

微利用开发脚手架：提供尺度工程结构的开发脚手架，开发者可专一于业务开发，不需沉复调试编译构建等复杂的接入规范；

低代码平台输出尺度微利用：通过低代码平台的可视化配置，急剧输出尺度的微利用，无缝接入微前端底座。

微前端部署场景示例

微前端的部署有两种大局，一种是将所有微利用的资源与底座加载器归并成一个文件夹，进行归并部署，只提供一个Web服务；另一种则是将底座和微利用分隔部署，每个微利用都提供单独的Web服务。

归并部署

2023011338202

独立部署

2023011352948

问题与反思

在微前端框架的执行过程中，遇到的重要问题有如下几点：

页面形状混乱：由于微利用具备独立开发的个性，分歧团队开发的微利用聚合到一路时，无法预防出现页面混乱、不统一等问题；

团队协同性差：陪伴着团队自治水平的提升，合作难题等问题随之产生；

用户流量职守：独立构建意味着公共资源的冗余，继而增长用户的流量职守；

问题排查难题：当微利用与加载器底座的对接出现问题时，除框架构建者表，开发人员往往很难定位问题地点。

当前，由于技术发展的镣铐，有些问题的确难以短期内有效解决，但这也正是我们软件开发者们必要不休为之致力和索求的方向地点。将来，微前端不愿定是将来发展趋向的收束点，但是它在将来肯定会阐扬沉要作用。

一得之见 | 企业架构下的共享能力中心建设

金融科技

2023.01.13

技术实际| 基于Flink技术组件，助力实时数仓建设

不朽情缘动态

2022.10.28

有关新闻

数据资产价值实现（四）| 企业数据集成驱动价值最大化

热点聚焦

2025.06.24

数据资产价值实现（三）| 优化数据治理生态

金融科技

2025.03.20

数据资产价值实现（二）｜把数据当作资产治理

金融科技

2024.12.23

让中国金融科技拥有世界影响力

不朽情缘科技更懂若何为您的数字化转型赋能

关于不朽情缘

公司介绍大事记董事长在线新闻动态联系不朽情缘

行业规划

银行证券基金消费金融

财政公司金控平台集团资金

产品服务

主题产品互联网金融产品大数据产品治理产品一站式服务

更多新闻

参与不朽情缘社会责任公司布告投资者服务

地址: 深圳市南山区沙河西路深圳湾科技生态园一区2栋A座5层

电话: 0755-8616 8118

传真: 0755-8616 8166

登记号：粤ICP备11064357号粤公网安备 44030502003903号

司法申明隐衷政策网站地图