微前端方案怎么选？qiankun vs Module Federation vs single-spa 各自适用场景？

Question

仓乃文 · Accepted Answer

三种主流微前端方案的本质区别在于隔离粒度和加载时机。选错方案会导致后期维护成本翻倍，特别是样式污染和通信复杂度这两个坑，每种方案的处理方式完全不同。

方案对比：
```
| 维度           | qiankun          | Module Federation | single-spa       |
|---------------|------------------|-------------------|------------------|
| 隔离性         | 强（JS沙箱+样式隔离）| 弱（共享运行时）    | 中（需自行配置）   |
| 加载时机       | 运行时            | 构建时+运行时       | 运行时            |
| 技术栈要求     | 无限制            | 需 Webpack 5      | 无限制            |
| 通信方式       | props/initGlobalState | 模块直接导入      | Custom Events     |
| 样式隔离       | Shadow DOM/scope  | 无内置隔离         | 无内置隔离         |
| 接入成本       | 低（开箱即用）     | 中（需改构建配置）  | 高（需自行封装）   |
| 适用场景       | 异构系统整合       | 同技术栈组件共享    | 需要高度自定义      |
```

选型决策树：
```
你的需求是什么？
├── 整合多个不同技术栈的老系统 → qiankun
│   └── 优势：JS 沙箱隔离，样式不互相污染
│   └── 劣势：加载性能略差，通信有学习成本
│
├── 多个 React/Vue 应用共享组件 → Module Federation
│   └── 优势：模块级共享，无重复打包，性能最优
│   └── 劣势：无隔离，版本冲突风险高
│
└── 需要完全自定义生命周期 → single-spa
    └── 优势：灵活，可搭配任何方案
    └── 劣势：封装成本高，不推荐直接用
```

补充说明：
- 实际项目中可以混合使用：老系统用 qiankun 接入，新模块用 Module Federation 共享
- qiankun 的 JS 沙箱在 Proxy 不支持的环境下会降级为快照模式，性能较差
- Module Federation 的 shared 配置务必加 singleton: true，否则 React 会报多实例错误
- 2025 年 Vite 生态的 vite-plugin-federation 也已成熟，非 Webpack 项目可以考虑