主流微前端框架与方案总览

微前端（Micro Frontends） 是一种将大型前端应用拆分成多个独立、可独立开发与部署的小型前端应用的架构模式。每个子应用可以使用自己的技术栈、独立发布、独立运行，最后通过"基座（主应用）"进行整合。

下面是当前主流、生产级可用的 微前端框架/方案总结 ------ 可以帮你快速选型。

✅ 一、主流微前端框架与方案总览

微前端框架	特点	推荐场景
Qiankun（乾坤）	基于 single-spa 封装，国内最广泛使用；支持 Vue/React/Angular	后台管理系统、B 端中后台大型项目
single-spa	微前端鼻祖，机制最基础	自定义能力强，对架构能力要求高
Module Federation（Webpack 5）	官方能力，真正的"运行时共享模块"	跨团队共享组件/业务模块
Web Components + 自研基座	零依赖、跨技术栈完全独立	长期架构、对性能极高要求
Wujie（无界）	淘系方案，沙箱隔离强、性能好	多团队协作、大型多系统融合
ICE MicroApp（阿里飞冰）	阿里开源，API 简单、文档清晰	需要快速集成的企业级系统
EMP（微模块化）	Module Federation 的工程化套件	多仓库模块联邦共享

✅ 二、各方案详细说明

1. Qiankun（乾坤）------国内使用最多的微前端框架

🔧 特点：

基于 single-spa，使用更简单
JS 沙箱 / CSS 隔离完善
支持 Vue、React、Angular 等多个技术栈
社区成熟，文档齐全

👍 优势：

上手难度低
适合中后台系统接入
独立部署子应用

👎 缺点：

运行时加载方式，首屏性能比不上联邦模块

2. Module Federation（Webpack 5）------模块级微前端

🔧 特点：

Webpack 官方提供的模块共享机制
支持"运行时共享模块"
允许 A 应用动态加载 B 应用的模块/组件

👍 优势：

性能最好（不需要 iframe/沙箱）
实现真正的"跨应用共享组件库"

👎 缺点：

仅适合 Webpack 工程体系
架构复杂度较高

3. single-spa ------ 微前端原教旨主义

🔧 特点：

最原始的微前端方案
所有机制都要你自己实现（路由、加载、基座等）

👍 优势：

自由度最高

👎 缺点：

除非需要 DIY，否则不推荐直接使用

4. Wujie（无界）------淘宝大型微前端解决方案

🔧 特点：

更强的沙箱隔离能力（快 10 倍）
支持 keep-alive、保活子应用
支持 iframe + webcomponent 混合模式

👍 优势：

大规模 B 端场景表现超好
切子应用不刷新状态
功能比 qiankun 更强

👎 缺点：

社区相比乾坤小一点

5. ICE MicroApp（飞冰微前端）

🔧 特点：

API 更简单
基于 webcomponent 沙箱隔离
阿里体系很多项目在用

👍 优势：

易用性最高之一
尤其适合 React/Vue 企业级后台

6. Web Components 自研微前端

👍 优势：

完全跨技术栈
不依赖任何框架
最轻量、最标准化

👎 缺点：

要自己搭沙箱、通信机制
工作量大

适合超大型平台（如京东后台体系）。

✅ 三、真实项目选型建议（结合你的情况）

如果使用 Vue 3+ 中后台管理系统 + 多团队协作 + 需要独立部署

==> 推荐优先选下面两个：

推荐 1：Qiankun（乾坤）

✔ 文档最全、接入最简单

✔ Vue 集成度最好

✔ 支持你的 B 端业务场景

✔ Vue2 / Vue3 都兼容

推荐 2：Wujie（无界）

✔ 性能更好

✔ 沙箱更强

✔ 子应用支持保活

如果你未来项目规模会变大，建议优先考虑 Wujie。

微前端框架是否使用 iframe

微前端框架	是否使用 iframe	说明
Qiankun（乾坤）	❌ 不使用	默认基于 import-html-entry + 沙箱，不用 iframe
single-spa	❌ 不使用	原生方案，不包含 iframe
Wujie（无界）	✔ 可选：默认不用，但内部可混合 iframe 技术	支持"iframe 隔离模式"，提升隔离度
Module Federation（Webpack 5）	❌ 不使用	直接模块级共享，不需要 iframe
ICE MicroApp（阿里飞冰）	❌ 不使用	基于 Web Components，不用 iframe
EMP（模块联邦工程化）	❌ 不使用	本质是 Module Federation，不用 iframe
Web Components 自研方案	❌ 不使用	靠浏览器原生能力隔离，不需要 iframe

📝 详细解释

1. Qiankun --- 不使用 iframe

通过动态加载 HTML/JS/CSS + 沙箱（Proxy）
完全不用 iframe

👉 属于"纯运行时微前端"方案

2. single-spa --- 不使用 iframe

single-spa 是机制框架，不提供 iframe
所有隔离要靠子应用自己实现

3. Wujie（无界）--- ✔ 可选使用 iframe

Wujie 是唯一支持 iframe + 非 iframe 混合模式 的微前端框架。

默认是"JS 沙箱 + DOM 快照"
可以配置成 iframe 模式以获得 100% 隔离

▶ 示例

new WujieApp({ url: "https://subapp.example.com", iframe: true })

👉 最灵活的微前端框架，如果你需要强隔离、避免主子应用污染，可以用 Wujie 的 iframe 模式。

4. Module Federation --- 不使用 iframe

基于 Webpack 5 官方能力：模块运行时共享
不使用 iframe
性能最好、隔离最弱

5. ICE MicroApp（阿里飞冰）--- 不使用 iframe

基于 Web Components + 沙箱
不依赖 iframe

6. EMP（模块联邦工程化）--- 不使用 iframe

本质就是 Module Federation 的工程封装

7. Web Components 微前端（自研）--- 不使用 iframe

完全使用浏览器 Shadow DOM、CustomElement 实现隔离
不使用 iframe

🎯 总结一句话

只有 Wujie（无界）支持"可选 iframe 模式"。
其他所有微前端框架默认都不使用 iframe。

|----------------------------|-----------------|
| |
| 沙箱隔离 | ❌ 不通过 iframe 实现 |
| 特殊模式（如 manual sandbox） | ❌ 仍然不用 |
| 你自己手动配置 iframe | ✔ 可以用，但不是官方默认 |

❗为什么不用 iframe？

因为 iframe 有严重问题：

无法共享路由（路由切换需要跨 iframe 通信）
样式无法共享
全局上下文隔离太彻底，通信复杂
每次进入子应用都刷新，体验差