微前端：乾坤 、无界、single-spa、iframe对比

一、微前端框架概述

微前端框架是一种技术解决方案，旨在将大型前端应用拆分为多个小型、独立、可维护的微前端应用，每个微前端应用可以独立开发、测试、部署和运行，同时保持整体的协同工作和用户体验。这种架构类似于微服务架构，但专注于前端领域

二、常见的微前端框架

1. qiankun（乾坤）：由蚂蚁金服开发维护，基于Single-SPA，提供了技术栈无关、接入简单的特性。它支持Vue、React等多种前端框架，并且具有较低的改造成本和友好的开发体验。
2. single-spa：是一个轻量级的JavaScript前端路由框架，专注于单页面应用（SPA）的路由管理。虽然它本身不是一个完整的微前端框架，但它是许多微前端实现的基础。
3. iframe：虽然iframe本身不是一个微前端框架，但它经常被用作微前端的一种简单实现方式
4. 无界：无界微前端框架是一款基于Web Components + iframe的微前端解决方案，它具备成本低、速度快、原生隔离、功能强等一系列优点。以下是对无界微前端框架的详细介绍

     共同点： 当路由切换的时候，可以去加载对应应用的代码，让其跑在容器里。

• 具备加载和卸载子应用的能力，页面从一个子应用切换到另一个子应用时，能正常进行加载和渲染；
• 具有路由状态保持能力，激活子应用后，浏览器刷新、前进、后退子应用的路由都可以正常工作；
• 主应用和子应用、子应用和子应用之间可以相互进行通信；
• 每个微应用都可独立仓库管理，独立技术栈开发、独立部署、独立运行；

三、各微前端框架对比

特性	qiankun	无界	single-spa	iframe
技术栈支持	技术栈无关，支持React、Vue、Angular等	基于WebComponent，支持多种技术栈	技术栈无关，支持多种前端框架	技术栈无关，但集成需考虑兼容性
接入方式	简单，通过JS API接入	较为简单，通过WebComponent封装	复杂，需配置single-spa生命周期	简单，通过HTML标签嵌入
沙箱隔离	提供JS沙箱和样式隔离	使用WebComponent天然隔离	需开发者自行实现沙箱隔离	iframe天然隔离
路由管理	支持路由状态保持，可配置路由映射	支持虚拟路由，保持路由状态	作为顶层路由，需自行管理子应用路由	路由由iframe内应用自行管理
应用通信	提供父子应用及子子应用间通信机制	提供组件式API，支持通信	需开发者自行实现通信机制	可通过postMessage或URL参数等方式通信
资源预加载	支持静态资源预加载	支持静态资源预加载	支持延迟加载应用	不支持预加载，按需加载
性能影响	较低，通过沙箱和懒加载优化	较低，但WebComponent可能有性能开销	较低，但依赖应用的优化	较高，iframe加载和渲染开销较大
开发体验	较好，提供了丰富的API和文档	较好，组件式API更直观	一般，需自行处理很多细节	较好，易于集成现有应用
生产可用性	经过验证，适用于生产环境	适用于生产环境，但社区支持可能较少	适用于生产环境，需开发者自行完善	适用于生产环境，但需谨慎处理安全性和性能问题
适配成本	较高，需适配路由、生命周期等	适中，主要适配WebComponent	较高，需深入理解single-spa架构	较低，但需注意兼容性和性能问题

微前端框架为前端应用的开发带来了诸多优势，如技术栈无关性、独立开发和部署、增量升级等。然而，它也存在一定的缺点，如接入难度高、资源共享能力差等。因此，在选择是否使用微前端框架时，需要根据项目的具体需求和团队的技术能力进行综合考虑。同时，在实际应用中，还需要注意微前端框架的选型、架构设计、代码管理等方面的问题，以确保项目的顺利进行和系统的稳定运行。