市场上常用的微前端框架对比

• 微前端框架

‍• 市场上常用的微前端框架

• iframe
• single-spa
• qiankun
• micro-app
• wujie

‍

微前端框架

微前端的概念是由ThoughtWorks在2016年提出的，它借鉴了微服务的架构理念。

核心在于将一个庞大的前端应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署。

再将这些小型应用融合为一个完整的应用，或者将原本运行已久、没有关联的几个应用融合为一个应用。

微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

主要解决了两个问题：

• 随着项目迭代应用越来越庞大，难以维护。
• 跨团队或跨部门协作开发项目导致效率低下的问题。

微前端的优点：

• 接入项目与使用技术栈无关
• 各个项目相互独立，独立开发，独立后端
• 增量式升级（可以一点点增加新的系统进入）
• 独立运行

市场上常用的微前端框架

iframe

iframe优点：

• iframe 自带的样式、环境隔离机制使得它具备天然的沙盒机制（相互隔离）。
• 嵌入子应用比较简单，学习较为简单。

iframe缺点：

• iframe功能之间的跳转是无效的，刷新页面无法保存状态。
• URL的记录完全无效，刷新会返回首页。
• 主应用劫持快捷键操作，事件冒泡不穿透到主文档树上。
• 模态弹窗的背景是无法覆盖到整个应用。
• iframe应用加载失败，内容发生错误主应用无法感知，通信麻烦。

iframe也可以实现微前端，但是需要解决其自身的诸多弊端。无界微前端就是基于iframe实现的。

single-spa

官网：single-spa [https://single-spa.js.org/]

必须要在入口函数中暴露三个钩子函数（bootstrap-启动,mount-挂载,unmount-销毁）给主程序用

缺点：

• 子应用会出现样式冲突，样式污染。
• js也会存在同样的污染问题
• 主应用必须得手动加载子应用打包好的lib库文件

qiankun

阿里开发 基于singe-spa封装 umi插件,提供了umi应用一键切换为微前端

官方文档：快速上手 – qiankun [https://qiankun.umijs.org/zh]

特点：

• 通过html<qiankun>方式接入较为简单快捷
• 样式隔离（类似与：scoped）
• 沙箱运行
• 资源预先加载（主应用执行start /挂载以后立刻去预加载其他应用的静态资源）
• 应用之间可以完成通信
• 技术开发3年对于其他技新技术来说较为稳定

micro-app

京东开发 micro-app 并没有沿袭 single-spa 的思路，而是借鉴了 WebComponent 的思想

将前端封装为一个webcomponent组件 使用shadowDom隔离

官方文档：MicroApp [https://cangdu.org/micro-app/]

优点：

• 不需要更改子应用项目逻辑方法也不需要修改webpack 使用简单
• 对比qiankun 子项目的入侵性更小

缺点： 技术较新可能不稳定

wujie

腾讯开发基于 Web Components + iframe 的微前端架

官方文档：bus | 无界 [https://wujie-micro.github.io/doc/]

优点：

• 预加载
• 开箱立即使用开发成本较低
• 应用保活（类似于：keep-alive）
• js，css沙箱

缺点： 技术较为新可能不稳定

来一张图

参考文档：

• https://blog.csdn.net/weixin_44383533/article/details/130891844

原文始发于微信公众号（前端爱好者）：市场上常用的微前端框架对比

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267105.html