微前端(插件机制) [ 开发笔记 ]

1. 微前端是什么

微前端是一种架构风格，将独立交付的前端应用程序组合成一个更大的整体。保证产品体验的同时提升开发体验。
优势

不限技术栈：主框架不限制接入应用的技术栈，子应用可自主选择技术栈。
可独立开发部署：各个团队之间仓库独立，单独部署，互不依赖。
独立运行时：每个子应用之间状态隔离，运行时状态不共享。
增量升级：当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性。

2. 为什么要用微前端

支持微前端子应用独立开发、独立测试、独立部署

打包速度：工程越来越大，打包越来越慢
多人多地协作：多人在同一个工程里开发，遭遇代码冲突的概率会很频繁，而且冲突的影响面比较大。
测试难度：由于代码都在一个仓库里，每次发布修改都会催生大面积的测试工作

3.实现微前端

3.1 nginx路由分发

nginx反向代理，简单快速/完全隔离，但是应用之间切换会有白屏，状态共享困难

3.2 iframe

iframe 使从独立的子页面构建页面变得很容易。它们还在样式和全局变量不相互干扰方面提供了良好的隔离程度。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。

缺点：

URL 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
UI 不同步，DOM 结构不共享。如无法显示整页弹窗。
全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
加载慢，每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

3.3 Module Federation 模块联邦

Webpack5 Module Federation（模块联邦），按需加载模块，支持动态更新

3.4 前端框架

3.4.1 Qiankun

实现原理通过 fetch 获取指定 URL 的 HTML 内容，然后解析并处理这个 HTML 模板。
导入 html 片段，Web Components开发重要组成部分之一。

<link rel="import" href="include.html" is="ui-import">

<!-- include.html -->
<div>include</div>

定义ui-import

class HtmlImport extends HTMLLinkElement {
  constructor () {
    super();
  }
  static get observedAttributes () {
    return ['href'];
  }
  load () {
    fetch(this.href).then(res => res.text()).then(html => {
      this.style.display = 'block';
      this.innerHTML = html;    
    });
  }
  attributeChangedCallback () {
    this.load();
  }
}
if (!customElements.get('ui-import')) {
  customElements.define('ui-import', HtmlImport, {
    extends: 'link'
  });
}

3.4.2 Garfish

字节开源的微前端框架
🤔 设计理念

工程基座：加载子应用列表、注册子应用、管理子应用公共依赖
应用管理：异步加载子应用、编译导出内容、路由劫持、跳转子应用、子应用通信、数据共享
沙盒隔离：子应用之间减少相互副作用、样式影响、事件影响、全局变量影响

🌈 丰富高效的产品特征

强大的预加载能力，自动记录用户应用加载习惯增加加载权重，应用切换时间极大缩短
支持依赖共享，极大程度的降低整体的包体积，减少依赖的重复加载
内置数据收集，有效的感知到应用在运行期间的状态
支持多实例能力，可在页面中同时运行多个子应用提升了业务的拆分力度

📦 高扩展性的核心模块

通过 Loader 核心模块支持 HTML entry、JS entry 的支持，接入微前端应用简单易用
Router 模块提供了路由驱动、主子路由隔离，用户仅需要配置路由表应用即可完成自主的渲染和销毁，无需关心内部逻辑
Sandbox 模块为应用的 Runtime 提供运行时隔离能力，能有效隔离 JS、Style 对应用的副作用影响
Store 提供了一套简单的通信数据交换机制