微前端之micro-app

1 微前端的技术基础

微前端并不是一项新的技术，而是一种架构理念，微前端 这个名词，第一次被提出还是在2016年底，那是在 ThoughtWorks Technology Radar。这个概念将微服务这个被广泛应用于服务端的技术范式扩展到前端领域。它将单一的web应用拆解成多个可以独立开发、独立运行、独立部署的小型应用，并将它们整合为一个应用。

1.1 WebComponent

Web组件（Web Components）是一组用于构建可重用和独立的UI组件的Web平台技术。它由三个主要的技术组成：自定义元素（Custom Elements）、影子DOM（Shadow DOM）和HTML模板（HTML Templates）。

自定义元素（Custom Elements）：自定义元素允许开发者创建自己的HTML标签，并为其添加自定义的行为和样式。通过使用自定义元素，可以扩展现有的HTML元素，或者创建全新的元素。自定义元素需要使用CustomElementRegistry.register()方法进行注册，并在类中继承自HTMLElement以定义其行为和属性。

影子DOM（Shadow DOM）：影子DOM是一种用于封装元素的局部DOM树的技术。它允许将组件的样式和行为封装在一个独立的作用域内，与外部的全局样式和JavaScript不冲突。通过使用影子DOM，组件的样式和结构可以被限制在组件内部，确保组件的私有性和隔离性。

HTML模板（HTML Templates）：HTML模板允许开发者定义可复用的HTML结构，可以通过JavaScript进行克隆和实例化。HTML模板可以在文档中定义，并使用标签包裹，模板中的内容不会在解析时显示，只有在需要时才会被实例化。

Web组件的主要优势在于提供了一种组件化的开发方式，使得开发者可以构建独立的、可复用的UI组件，与其他代码隔离并具有良好的封装性。使用Web组件可以改善代码的可维护性、重用性和可读性，同时提高开发效率。

1.2 自定义元素（Custom Elements）

前端的自定义元素（Custom Elements）是指在HTML文档中自定义定义的元素，通过自定义元素，开发者可以创建自己的HTML标签，并为其添加自定义的行为和样式。

自定义元素是Web组件的一部分，Web组件是一种用于构建可重用和独立的UI组件的技术。通过自定义元素，可以扩展现有的HTML元素，或者创建全新的元素。

自定义元素的定义需要使用Web组件的API，主要包括两个部分：

CustomElementRegistry.register()：这个方法用于注册自定义元素。通过调用CustomElementRegistry对象的register()方法，可以将一个自定义元素与一个特定的类（构造函数）关联起来。例如，可以将自定义元素关联到一个类MyElement。

Copy code
class MyElement extends HTMLElement {
  // ...
}
customElements.define('my-element', MyElement);

HTMLElement：自定义元素的类需要继承自HTMLElement，以获得基本的元素行为和特性。通过在自定义元素类中定义不同的方法和属性，可以实现所需的功能和样式。

Copy code
class MyElement extends HTMLElement {
  constructor() {
    super();
    // ...
  }

  connectedCallback() {
    // 元素插入文档时调用的方法
  }

  attributeChangedCallback(name, oldValue, newValue) {
    // 元素属性变化时调用的方法
  }

  // ...
}

一旦自定义元素注册完成，并在HTML文档中使用相应的标签，浏览器就会创建该元素的实例，并自动调用相关的方法，以便在适当的时机执行自定义的行为。可以在自定义元素的方法中访问和操作元素的DOM结构、属性和事件。

自定义元素的优势在于可以创建具有特定功能的可重用组件，使得开发者可以更好地组织和维护自己的代码，提高开发效率和代码可读性。同时，自定义元素也能够提供更好的封装性，避免与其他代码产生冲突。

2 三种微前端方案

微前端分为主应用和子应用，主应用也称为基座应用，是其它应用的容器载体，子应用则是被嵌入方。以下是三种方案：

• iframe：在所有微前端方案中，iframe是最稳定的、上手难度最低的，但它有一些无法解决的问题，例如性能低、通信复杂、双滚动条、弹窗无法全局覆盖，它的成长性不高，只适合简单的页面渲染。

• npm包：将子应用封装成npm包，通过组件的方式引入，在性能和兼容性上是最优的方案，但却有一个致命的问题就是版本更新，每次版本发布需要通知接入方同步更新，管理非常困难。

• 微前端框架：流行的微前端框架有single-spa和qiankun，它们将维护成本和功能上达到一种平衡，是目前实现微前端备受推崇的方案。

在single-spa和qiankun中都是通过监听url change事件，在路由变化时匹配到渲染的子应用并进行渲染。这种基于路由监听渲染是single-spa最早实现的，作为出现最早、最有影响力的微前端框架，single-spa被很多框架和公司借鉴，也导致目前实现的微前端的方式大多是基于路由监听。

同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。这个特点也被qiankun继承下来，并且需要对webpack配置进行一些修改。

微前端的核心在于资源加载与渲染，其实只要能够实现一种元素隔离的功能并且路由符合要求，子应用理论上不需要修改代码就可以嵌入另外一个页面渲染。这就就是Micro App的故事开始。

3 Micro App

Micro App借鉴了WebComponent的思想，以此为基础推出另一种更加组件化的实现方式：类WebComponent + HTML Entry。

HTML Entry：是指设置html作为资源入口，通过加载远程html，解析其DOM结构从而获取js、css等静态资源来实现微前端的渲染，这也是qiankun目前采用的渲染方案。

WebComponent：web原生组件，它有两个核心组成部分：CustomElement和ShadowDom。CustomElement用于创建自定义标签，ShadowDom用于创建阴影DOM，阴影DOM具有天然的样式隔离和元素隔离属性。由于WebComponent是原生组件，它可以在任何框架中使用，理论上是实现微前端最优的方案。但WebComponent有一个无法解决的问题 - ShadowDom的兼容性非常不好，一些前端框架在ShadowDom环境下无法正常运行，尤其是react框架。

类WebComponent：就是使用CustomElement结合自定义的ShadowDom实现WebComponent基本一致的功能。

由于ShadowDom存在的问题，我们采用自定义的样式隔离和元素隔离实现ShadowDom类似的功能，然后将微前端应用封装在一个CustomElement中，从而模拟实现了一个类WebComponent组件，它的使用方式和兼容性与WebComponent一致，同时也避开了ShadowDom的问题。并且由于自定义ShadowDom的隔离特性，Micro App不需要像single-spa和qiankun一样要求子应用修改渲染逻辑并暴露出方法，也不需要修改webpack配置。

Micro App 的核心功能是在CustomElement基础上进行构建，customElement用于创建自定义标签，并提供了元素的渲染、卸载、属性修改等钩子函数，我们通过钩子函数获知微应用的渲染时机，并将自定义标签作为容器，微应用的所有元素和样式作用域都无法逃离容器边界，从而形成一个封闭的环境。

框架对比

为了更直观的感受Micro App和其它框架的区别，我们使用一张图进行对比。
从对比图可以看出，目前开源的微前端框架中有的功能 MicroApp都有，并提供了一些它们不具备的功能，比如静态资源地址补全，元素隔离，插件系统等。

所以，微前端框架，现在的你，如果还在纠结公司做微前端要选择哪个框架，选Micro App就是了。

附：micro-app github地址