微前端架构

从技术实践上，微前端架构可以采用以下几种方式进行：

（1）路由分发式。通过HTTP服务器的反向代理功能，将请求路由到对应的应用上。

（2）前端微服务化。在不同的框架之上设计通信和加载机制，以在一个页面内加载对应的应用。

（3）微应用。通过软件工程的方式，在部署构建环境中，把多个独立的应用组合成一个单体应用。

（4）微件化。开发一个新的构建系统，将部分业务功能构建成一个独立的chunk代码，使用时只需要远程加载即可。

（5）前端容器化。将iframe作为容器来容纳其他前端应用。

（6）应用组件化。借助于Web Components技术，来构建跨框架的前端应用。

---

具体详细解释如下：

（1）路由分发式

路由分发式微前端，即通过路由将不同的业务分发到不同的独立前端应用上。其通常可以通过HTTP服务器的反向代理来实现，或者通过应用框架自带的路由来解决，如下图所示：

1.png

就当前而言，路由分发式的架构应该是采用得最多、最容易的“微前端”方案。但是这种方式看上去更像是多个前端应用的聚合，即我们只是将这些不同的前端应用拼凑到一起，使他们看起来像一个完整的整体。但它们并非是一个整体，每当用户从A应用转换到B应用的时候，往往需要刷新一下页面、重新加载资源文件。

在这个架构中，我们只需要关注应用间的数据传递方式。

缺点：在采用这种应用时，缺少了对应用状态的处理，需要用户重新登录，这种体验对用户来说相当不友好

（2）前端微服务化

前端微服务化，是微服务架构在前端的实施，每个前端应用都是完全独立（技术栈、开发、部署、构建独立）、自主运行的，最后通过模块化的方式组合出完整的前端应用。如下如所示：

2.png

---

采用这种方式意味着，一个页面上同时存在两个及以上的前端应用在运行。而路由分发式方案则是，一个页面只有唯一一个应用。

当我们单击指向某个应用的路由时，会加载、运行对应的应用。而原有的一个或多个应用，仍然可以在页面上保持运行的状态。同时，这些应用可以使用不同的技术栈来开发，如页面上可以同时运行React、Angular和Vue框架开发的应用。
我们这样实施的原因是，不论基于Web Components的Angular，还是VirtualDOM的React，都是因为现有的前端框架离不开基本的HTML元素DOM。

因此，我们只需要做到如下两点：

• 第一点，在页面合适的地方引入或者创建DOM。
• 第二点，用户操作时，加载对应的应用（触发应用的启动），并能卸载应用。

对于第一点，创建DOM是容易解决的。而第二点，则一点儿也不容易，特别是移除DOM和相应应用的监听。当我们拥有一个不同的技术栈时，我们需要有针对性地设计出一套这样的逻辑。

（3）组合式集成：微应用。

微应用化是指，在开发时应用都是以单一、微小应用的形式存在的，而在运行时，则通过构建系统合并这些应用，并组合成一个新的应用，其架构如下图所示。

3.png

微应用化大都是以软件工程的方式来完成前端应用的开发的，因此又可以称之为组合式集成。
微应用化与前端微服务化类似，在开发时都是独立应用的，在构建时又可以按照需求单独加载。如果以微前端的单独开发、单独部署、运行时聚合的基本思想来看，微应用化就是微前端的一种实践，只是使用微应用化意味着我们只能使用唯一的一种前端框架。大团队通常是不会同时支持多个前端框架的。

（4）微件化

微件（Widget），是一段可以直接嵌入应用上运行的代码，它由开发人员预先编译好，在加载时不需要再做任何修改或编译。而微前端下的微件化则指的是，每个业务团队编写自己的业务代码，并将编译好的代码部署（上传或者放置）到指定的服务器上。在运行时，我们只需要加载相应的业务模块即可。在更新代码的时候，我们只需要更新相应的模块即可。

4.png

（5）前端容器：iframe

iframe作为一个非常“古老”的、人人都觉得普通的技术，却一直很管用。它能有效地将另一个网页/单页面应用嵌入当前页面中，两个页面间的CSS和JavaScript是相互隔离的——除去iframe父子通信部分的代码，它们之间的代码完全不会相互干扰。iframe便相当于创建了一个全新的独立的宿主环境，类似于沙箱隔离，它意味着前端应用之间可以相互独立运行。

当然采用iframe有几个重要的前提：

• 网站不需要SEO支持。

• 设计相应的应用管理机制。

• 缺点
  事件的通信机制？
  dom加载？
  不同的文档流，事件冒泡不穿透，登录态不共享

（6）结合Web Components构建

Web Components是一套不同的技术，允许开发者创建可重用的定制元素（它们的功能封装在代码之外），并且在Web应用中使用它们。
真正在项目上使用Web Components技术，离现在的我们还有些距离，可是结合Web Components来构建前端应用，是一种面向未来演进的架构。

5.png

目前困扰Web Components技术推广的主要因素在于浏览器的支持程度。在Chrome和Opera浏览器上，对Web Components支持良好，而对Safari、IE、Firefox浏览器的支持程度，并不是很理想。有些不兼容的技术，可以引入polyfill来解决，有些则需要浏览器支持。

实施的方式虽然多，但都是依据场景而采用的。在有些场景下，可能没有合适的方式；在有些场景下，则可以同时使用多种方案。

---

来自书籍<<前端架构：从入门到微前端>>