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

一、微前端框架概述

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

二、常见的微前端框架

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

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

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

三、各微前端框架对比

特性qiankun无界single-spaiframe技术栈支持技术栈无关，支持React、Vue、Angular等基于WebComponent，支持多种技术栈技术栈无关，支持多种前端框架技术栈无关，但集成需考虑兼容性接入方式简单，通过JS API接入较为简单，通过WebComponent封装复杂，需配置single-spa生命周期简单，通过HTML标签嵌入沙箱隔离提供JS沙箱和样式隔离使用WebComponent天然隔离需开发者自行实现沙箱隔离iframe天然隔离路由管理支持路由状态保持，可配置路由映射支持虚拟路由，保持路由状态作为顶层路由，需自行管理子应用路由路由由iframe内应用自行管理应用通信提供父子应用及子子应用间通信机制提供组件式API，支持通信需开发者自行实现通信机制可通过postMessage或URL参数等方式通信资源预加载支持静态资源预加载支持静态资源预加载支持延迟加载应用不支持预加载，按需加载性能影响较低，通过沙箱和懒加载优化较低，但WebComponent可能有性能开销较低，但依赖应用的优化较高，iframe加载和渲染开销较大开发体验较好，提供了丰富的API和文档较好，组件式API更直观一般，需自行处理很多细节较好，易于集成现有应用生产可用性经过验证，适用于生产环境适用于生产环境，但社区支持可能较少适用于生产环境，需开发者自行完善适用于生产环境，但需谨慎处理安全性和性能问题适配成本较高，需适配路由、生命周期等适中，主要适配WebComponent较高，需深入理解single-spa架构较低，但需注意兼容性和性能问题
微前端框架为前端应用的开发带来了诸多优势，如技术栈无关性、独立开发和部署、增量升级等。然而，它也存在一定的缺点，如接入难度高、资源共享能力差等。因此，在选择是否使用微前端框架时，需要根据项目的具体需求和团队的技术能力进行综合考虑。同时，在实际应用中，还需要注意微前端框架的选型、架构设计、代码管理等方面的问题，以确保项目的顺利进行和系统的稳定运行。