一、微前端框架概述
微前端框架是一种技术解决方案，旨在将大型前端应用拆分为多个小型、独立、可维护的微前端应用，每个微前端应用可以独立开发、测试、部署和运行，同时保持整体的协同工作和用户体验。这种架构类似于微服务架构，但专注于前端领域
二、常见的微前端框架
- qiankun（乾坤）：由蚂蚁金服开发维护，基于Single-SPA，提供了技术栈无关、接入简单的特性。它支持Vue、React等多种前端框架，并且具有较低的改造成本和友好的开发体验。
- single-spa：是一个轻量级的JavaScript前端路由框架，专注于单页面应用（SPA）的路由管理。虽然它本身不是一个完整的微前端框架，但它是许多微前端实现的基础。
- iframe：虽然iframe本身不是一个微前端框架，但它经常被用作微前端的一种简单实现方式
- 无界：无界微前端框架是一款基于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架构 | 较低，但需注意兼容性和性能问题 |
微前端框架为前端应用的开发带来了诸多优势，如技术栈无关性、独立开发和部署、增量升级等。然而，它也存在一定的缺点，如接入难度高、资源共享能力差等。因此，在选择是否使用微前端框架时，需要根据项目的具体需求和团队的技术能力进行综合考虑。同时，在实际应用中，还需要注意微前端框架的选型、架构设计、代码管理等方面的问题，以确保项目的顺利进行和系统的稳定运行。