什么是微前端?
微前端借鉴了微服务的架构理念,将一个庞大的前端应用拆分为多个独立灵活的小型应用,每个应用都可以独立开发、独立运行、独立部署,再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一,又可以减少项目之间的耦合,提升项目扩展性,相比一整块的前端仓库,微前端架构下的前端仓库倾向于更小更灵活。
微前端特性
- 技术栈无关 主框架不限制接入应用的技术栈,子应用可自主选择技术栈
- 独立开发/部署 各个团队之间仓库独立,单独部署,互不依赖
- 增量升级 当一个应用庞大之后,技术升级或重构相当麻烦,而微应用具备渐进式升级的特性
- 独立运行时 微应用之间运行时互不依赖,有独立的状态管理
- 提升效率 应用越庞大,越难以维护,协作效率越低下。微应用可以很好拆分,提升效率
目前可用的微前端方案
微前端的方案目前有以下几种类型:
基于iframe
完全隔离的方案
作为前端开发,我们对 iframe
已经非常熟悉了,在一个应用中可以独立运行另一个应用。它具有显著的优点:
- 非常简单,无需任何改造
- 完美隔离,JS、CSS 都是独立的运行环境
- 不限制使用,页面上可以放多个
iframe
来组合业务
当然,缺点也非常突出:
- 无法保持路由状态,刷新后路由状态就丢失
- 完全的隔离导致与子应用的交互变得极其困难
iframe
中的弹窗无法突破其本身- 整个应用全量资源加载,加载太慢
这些显著的缺点也催生了其他方案的产生。
基于single-spa
路由劫持方案
single-spa
通过劫持路由的方式来做子应用之间的切换,但接入方式需要融合自身的路由,有一定的局限性。
qiankun
孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台。它对 single-spa
做了一层封装。主要解决了 single-spa
的一些痛点和不足。通过 import-html-entry
包解析 HTML
获取资源路径,然后对资源进行解析、加载。
通过对执行环境的修改,它实现了 JS 沙箱
、样式隔离
等特性。
京东micro-app
方案
京东 micro-app
并没有沿袭 single-spa
的思路,而是借鉴了 WebComponent
的思想,通过 CustomElement
结合自定义的 ShadowDom
,将微前端封装成一个类 webComponents
组件,从而实现微前端的组件化渲染。
Mooa
Mooa
Mooa
是为 Angular 定制的微前端框架,也是基于 single-spa
思想,针对 IE 10 及 IFRAME 优化的微前端解决方案。
Mooa
采用的是主-从式架构,分为主工程和子工程,主工程负责加载子工程,以及一些核心的管理功能。
QianKun
真正意义上的单页微前端框架,基于single-spa封装,增加了 umi 特色,增加沙箱机制。