概述
怎么说呢，对于大型复杂应用，单体前端应用的局限性是比较明显的，构建时间漫长、团队协作困难、技术栈升级风险高等问题，微前端架构通过将大型前端应用拆分为多个独立的小型应用，实现了技术栈无关、独立开发、独立部署等优势，为前端开发带来了全新的可能性，微前端解决方案逐渐丰富，如下主要从对比开源主流的几个微前端技术解决方案。
一、技术方案对比
| 框架 | qiankun | Single-SPA | 无界（wujie） | Micro-App（京东） | EMP |
|------------|--------------------------|----------------|-----------------------------|---------------------------------------------------|----------------------|-----|
| 核心原理 | 基于 Single-SPA 封装 | 路由级基座框架 | WebComponent + iframe 增强 | WebComponent | Module Federation 增强 |
| 沙箱隔离 | JS/CSS 沙箱 | 无 | 基于 iframe 的天然隔离 | JS 代理沙箱 + CSS 隔离 | 无 |
| 通信机制 | props + globalState | 自定义 | props + window 通信 | 数据通信 + 事件总线 | Webpack 共享依赖 |
| Vite支持 | 需插件（vite-plugin-qiankun） | 需手动配置 | 原生支持子应用， 主应用vite + vue3还不支持 | 1.0版本支持(当前版本1.0-rc)且vite做为子应用，目前只能使用firame沙箱（with | iframe） | 需改造 |
| 预加载 | 手动配置 | 无 | 自动预加载 | 自动预加载 | 动态加载 |
| 子应用类型 | 任意前端框架 | 任意前端框架 | 任意前端框架 | 任意前端框架 | 需 Webpack 工程化 |
| 调试体验 | 需代理配置 | 独立调试 | 独立调试 + 嵌套调试 | 独立调试 | 依赖主应用 |
| 维护团队 | 阿里 | 社区驱动 | 腾讯 | 京东 | 个人维护 |
| TS支持 | 完善 | 需自行适配 | 完善 | 完善 | 部分支持 |
| SSR支持 | 不支持 | 支持 | 不支持 | 不支持 | 不支持 |
二、建议矩阵
| 评估维度 | qiankun | 无界 | Micro-App | Single-SPA |
|---|---|---|---|---|
| 上手难度 | 中等 | 简单 | 简单 | 困难 |
| 隔离安全性 | 高 | 极高 | 高 | 低 |
| 通信便捷性 | 中等 | 高 | 高 | 需自行实现 |
| Vite兼容性 | 需插件 | 原生支持 | 原生支持 | 需适配 |
| 旧系统兼容 | 优秀 | 优秀 | 优秀 | 中等 |
| 技术可控性 | 高 | 高 | 中 | 极高 |
| 生产环境案例 | 阿里系 | 腾讯文档 | 京东零售 | 多家企业 |
三、项目维护情况
以下数据均统计自master 主分支
| 框架 | qiankun | wujie | miro-app |
|---|---|---|---|
| 近3月commit次数 | 0 | 19 | 20 |
| 近6月commit次数 | 0 | 19(+2，于6月) | 36 |
四、特别建议
无界方案 在以下场景表现突出：
- 需要嵌入第三方不可控页面（如外部 SaaS 系统）
- 要求子应用保活（切换不重载）
- 需要主子应用保持路由同步
京东micro-app
- 需要嵌入第三方不可控页面（如外部 SaaS 系统） 无论是否为第三方页面，只要是子页面就要求：第三方页面支持跨域
- 要求子应用保活（切换不重载）mirco-app 提供的keep-alive是针对应用级别，而子应用自己的保活使用vue自己的keep-alive
- 提供浏览器插件 【插件地址】
五、实际项目使用qiankun经验
公司项目使用qiankun构建微应用已经运行好几年了，大体上其实没什么大问题，只有下面的几个缺点
- 不维护了
- 不支持缓存（微应用环境）
- 对vite构建的项目支持不友好（需要自行通过社区插件处理）