微前端

什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端可以将多个小型应用整合成一个完整的应用。每个小型应用都是独立开发、独立运行、独立部署的，这就意味着可以多团队并行开发 且有无冲突、无阻塞等特点。

微前端架构具备以下几个核心价值：

1. 技术栈无关
   主框架不限制接入应用的技术栈，微应用具备完全自主权
2. 独立开发、独立部署
   微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
3. 增量升级
   在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
4. 独立运行时
   每个微应用之间状态隔离，运行时状态不共享

常见的微前端实现方式

路由分发

简单来说，其实就是通过网关/代理对路由进行监听，对不同的路由路径导向不同的前端资源入口。
例如：
使用 Nginx 代理了 localhost:80；
然后访问路径为 /app1 的时候，返回html/app1/index.html的文件；
访问路径为 /app2 的时候，返回 html/app2/index.html 的文件。
这种方式由于是多页面应用，所以用户体验不好，而且比较依赖于后端，应用之间存在着耦合问题。

优点

开发成本低
配置简单

缺点

多应用之间切换时，每个应用都会重新加载，影响体验（可以思考 传统页面 和 SPA 区别）
多应用间不能共享数据
多应用间通信困难
多应用公共依赖重复加载

iframe

它的作用就是在网页中嵌套另一个网页，那么通过这种特性就可以实现微前端了。
但实际上个大微前端框架，就没有一个是用 iframe 去做的，因为 iframe 有着很多的问题，其中一些甚至是无法解决的。

优点

完美支持 js 隔离，样式隔离

缺点

url 不同步， 浏览器刷新时，iframe 中的 url 状态会丢失
iframe 局部弹框
内外通信效率低下，变量不能共享
每次进入，资源都会被重新加载，速度较慢

Web Components

Web Components 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。
(1)Custom elements（自定义元素） 一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。
(2)Shadow DOM（影子 DOM） ：一组 JavaScript API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。
(3)HTML templates（HTML 模板）： <template>  和  <slot>  元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

优点

每个服务拥有独立的脚本和样式

缺点

改造成本大
各个浏览器兼容不友好
多应用公共依赖重复加载

single-SPA

single-spa 提供了一种基于路由的基座化的微前端方案，它将应用分为两类：基座应用和子应用。其中，子应用对应前面我们讲到的需要聚合的应用，基座应用是另外一个单独的应用，用于聚合子应用。在基座应用中，我们会维护一个路由注册表 - 每个路由对应一个子应用。基座应用启动以后，当我们切换路由时，如果是一个新的子应用，会动态获取子应用的 js 脚本，然后执行脚本并渲染出相应的页面；如果是一个已经访问过的子应用，那么就会从基座应用的缓存中获取已经缓存的子应用，激活子应用并渲染出对应的页面。

优点

良好的体验，多服务切换如同单体 SPA
具备服务的生命周期
共享数据
兼容不同技术栈运行

缺点

多应用间，无多应用沙箱机制
多应用间，样式命名不慎会导致冲突
js entry 导致子服务和基座强耦合

qiankun

乾坤是 @kuitos 大佬开发的，阿里出品。目前来说，是最完美的微前端解决方案，也是 start 最多的。
其代码写的很漂亮，建议大家去阅读，学习。

优点

基于 single-SPA 封装，开箱即用
技术无关，多技术栈可以共存
html entry 接入，解耦基座和子服务
样式隔离
js 沙箱机制
资源预加载
提供全局错误机制
提供跨服务通信机制
提供服务的生命周期
脱离基座，单个服务降级运行策略处理

缺点

共享运行时缓存支持
不兼容 ie 系列

现有市面框架

1. single-spa 将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架
2. qiankun 蚂蚁金服，在 single-spa 的基础上封装
3. MicroApp 京东，一款基于 WebComponent 的思想，轻量、高效、功能强大的微前端框架 4.无界 腾讯无界微前端方案基于 WebComponent 容器 + iframe 沙箱
4. EMP YY 语音，基于 Webpack5 Module Federation 除了具备微前端的能力外，还实现了跨应用状态共享、跨框架组件调用的能力
5. icestark 阿里出品，是一个面向大型系统的微前端解决方案
6. garfish 字节跳动
7. magic-microservices 一款基于 Web Components 的轻量级的微前端工厂函数

相关

微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与的人员、团队的增多、变迁，从一个普通应用演变成一个巨石应用(Frontend Monolith)后，随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
更多关于微前端的相关介绍，推荐大家可以去看这几篇文章：
Micro Frontends(https://micro-frontends.org/)
Micro Frontends from martinfowler.com(https://martinfowler.com/articles/micro-frontends.html)