手艺专栏 | 全篇干货！betway西汉姆官网科技企业级微前端应用实践

数字时代，，，，，随着手艺的一直厘革，，，，，前后端疏散架构的研发模式已成为主流。。。。。但爆发式增添的营业量让前端功效需求一直增多，，，，，小而美的应用不复保存。。。。。当一个通俗应用演酿成一个巨石应用( Frontend Monolith )后，，，，，逻辑重大和臃肿的问题最先袒露，，，，，随之而来的是多人难以协作、功效耦合性高、页面加载速率变慢等一系列难题亟待解决。。。。。

当后端「微服务」普遍普实时，，，，，「微」的看法也影响到了前端，，，，，「微前端」应运而生。。。。。

微前端（Micro-Frontends）是一种类似于微服务的架构，，，，，它将微服务的理念应用于浏览器端，，，，，即将 Web 应用由简单的单体应用转变为多个小型前端应用聚合为一的应用，，，，，各个前端应用可以自力运行、自力开发、自力安排。。。。。

通过跟微服务举行比照，，，，，我们可以更清晰地明确微前端的看法：

相比于古板的前端工程，，，，，微前端架构具备以下几大优势：

大幅提升研发效能：将大工程举行拆分，，，，，显著提高打包构建速率，，，，，代码精练、解耦、更易维护；；；；；；

定制化编排产品：将微应用举行个性化编排组合，，，，，快速举行产品立异；；；；；；

定向增量升级：各微前端单独安排，，，，，可定向增量升级某一微应用，，，，，而不影响其他微应用，，，，，大大节约了安排本钱和降低升级危害。。。。。

基于富厚的手艺实践履历，，，，，betway西汉姆官网科技Web前端团队在微前端领域的深入探索已有所建树。。。。。本文将重点分享在微服务框架的配景下，，，，，betway西汉姆官网科技自主研发和设计的微前端解决计划。。。。。

微前端手艺选型之路

微前端架构的实现方法有多种手艺蹊径，，，，，包括路由分发式、应用微服务化、微应用、微件化、前端容器化、应用组件化等，，，，，需凭证详细场景选用合适的方法。。。。。在某些场景下，，，，，可能没有合适的计划，，，，，也可能同时使用多种计划。。。。。

因此在做手艺选型前，，，，，首先需要对公司的产品现状举行整体梳理，，，，，效果如下：

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

前端工程拆分粒度：大部分产品照旧古板的大工程形态；；；；；；有部分产品已举行了�？？？？？？榛⒆榧鸱郑�，，，，将一个大工程拆分成了多个小工程，，，，，各工程通过宣布npm插件的形式，，，，，最终被一个主工程装置聚合。。。。。

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

能够做到跨手艺栈，，，，，不局限于一种前端框架；；；；；；

能够将npm插件刷新成以微应用的形式举行聚合。。。。。

别的，，，，，凭证betway西汉姆官网产品特征，，，，，微前端框架还需知足以下几点需求：

● 微应用自力开发

● 微应用自力安排

● 跨手艺栈，，，，，不局限于一种前端框架

● 能够将npm插件刷新成以微应用的形式举行聚合

● 可将微应用举行编排组合，，，，，输出差别的产品

● 加载器底座使用vue

团结公司的框架能力需求，，，，，我们最终选定三种微前端手艺蹊径团结的方法：

应用微服务化：针关于无法拆分的系统和非vue系统，，，，，接纳微服务化接入，，，，，举行手艺验证后选择了阿里qiankun框架；；；；；；

微应用化：针对vue手艺栈已做�？？？？？？榛鸱值南低彻こ蹋�，，，，接纳微应用化接入，，，，，使用了webpack5提供的�？？？？？？榱�；；；；；；

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

微前端解决计划设计思绪

以前文所述的微前端看法可知，，，，，中心加载器是微前端的焦点所在，，，，，而加载器需具备三个基本能力：

路由分发；；；；；；

加载微应用的静态资源；；；；；；

可在加载器上恣意上架下架微应用。。。。。

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

标识微应用

怎样包管加载器能准确的识别到对应的微应用呢？？？？？？

我们决议为每一个微应用定制一个唯一id标记，，，，，即编码appCode。。。。。

中心化路由

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

通常情形下，，，，，前端页面的渲染是靠路由来控制的，，，，，那我们是否可以使用前端的路由系统来设计一套微前端的注册中心呢？？？？？？

基于这个思绪，，，，，我们起源设计了一套加载器的事情流程：

1) 加载器底座拉取微应用设置信息

2) 将设置中的微应用注册到注册中心

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

4) 加载微应用

微应用设置

依据上述加载器的事情流程图，，，，，我们整理出微应用的设置文件结构以及字段：

注册中心

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

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

这里需要注重的是，，，，，思量到微应用的动态加载，，，，，加载器加载的微应用个数不做限制，，，，，如一次性将所有的微应用路由所有加载，，，，，势必会造成路由数据过于重大，，，，，因此初始化时只注册中心路由，，，，，微应用对应的页面路由，，，，，则在第一次进入目今微应用的时间建设。。。。。此办法放在loader加载器中实现。。。。。

Loader加载器

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

加载器主要事情流程如下：