微前端框架技术选型

前言

此前项目曾落地 qiankun 微前端方案，因主 / 子应用强侵入改造、样式隔离失效、白屏兼容异常等问题，产生较高的研发与适配成本，落地体验不佳。
本次核心为 jQuery/JSP 存量老旧系统 改造，诉求采用低侵入、渐进式微前端方案，支持子应用独立改造、分批灰度上线，最大化降低迁移成本与业务风险。

DEMO

无界
https://wujie-micro.github.io/demo-main-vue/home
micro-app
https://zeroing.jd.com/micro-app/demo/multiple#/
qiankun
https://github.com/umijs/qiankun

目录

1. 选型概述

1.1 选型目标

从主流微前端框架中选出最适合团队技术栈和业务场景的解决方案。

1.2 选型池

框架 出品方 定位
qiankun 蚂蚁金服 企业级微前端框架
micro-app 京东 基于WebComponent的微前端框架
wujie 腾讯 基于iframe的下一代微前端框架
Garfish 字节跳动 高性能微前端运行时框架
Module Federation Webpack 5 模块联邦，原生微前端方案
EMP 腾讯电竞 基于MF的微前端解决方案

1.3 评估维度

  • 技术架构：底层原理、隔离机制
  • 接入成本：改造难度、学习曲线
  • 生态成熟度：社区活跃度、文档完善度
  • 生产验证：大厂落地案例
  • 性能表现：加载速度、内存占用
  • 兼容性：框架支持、构建工具支持

2. 框架概览

2.1 qiankun

1
2
3
4
5
6
出品方: 蚂蚁金服
GitHub: https://github.com/umijs/qiankun
底层技术: single-spa + HTML Entry + JS沙箱
Star数: ~15.8k
首次发布: 2019年
定位: 企业级微前端框架

核心特性：

  • HTML Entry：子应用只需提供一个 HTML 入口
  • JS 沙箱：快照沙箱 / Proxy 沙箱两种模式
  • 样式隔离：shadowDOM / scopedCSS
  • 资源预加载：支持预加载子应用资源
  • 应用间通信：基于 props 和全局状态

技术架构：

1
2
3
4
5
6
7
8
9
10
11
12
13
┌─────────────────────────────────────┐
│           主应用 (Main App)          │
│  ┌─────────────────────────────┐   │
│  │      qiankun Core           │   │
│  │  ┌─────────┐ ┌───────────┐  │   │
│  │  │JS沙箱   │ │样式隔离   │  │   │
│  │  └─────────┘ └───────────┘  │   │
│  └─────────────────────────────┘   │
│         ↓        ↓        ↓        │
│  ┌────────┐ ┌────────┐ ┌────────┐ │
│  │子应用A │ │子应用B │ │子应用C │ │
│  └────────┘ └────────┘ └────────┘ │
└─────────────────────────────────────┘

2.2 micro-app

1
2
3
4
5
6
出品方: 京东
GitHub: https://github.com/micro-zoe/micro-app
底层技术: WebComponent + CustomElement
Star数: ~5.5k
首次发布: 2021年
定位: 简约、无侵入的微前端框架

核心特性：

  • 基于 WebComponent：天然样式隔离
  • 零依赖：不依赖任何框架
  • 接入简单：一行代码接入子应用
  • 体积小：~10kb gzipped
  • 支持 Vite：兼容现代构建工具

技术架构：

1
2
3
4
5
6
7
8
9
10
11
12
┌─────────────────────────────────────┐
│           主应用 (Main App)          │
│  ┌─────────────────────────────┐   │
│  │    <micro-app> 标签         │   │
│  │  ┌─────────────────────┐    │   │
│  │  │  ShadowDOM 沙箱     │    │   │
│  │  │  ┌───────────────┐  │    │   │
│  │  │  │  子应用内容   │  │    │   │
│  │  │  └───────────────┘  │    │   │
│  │  └─────────────────────┘    │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

2.3 wujie

1
2
3
4
5
6
出品方: 腾讯
GitHub: https://github.com/Tencent/wujie
底层技术: iframe + WebComponent
Star数: ~4.2k
首次发布: 2022年
定位: 下一代微前端框架

核心特性：

  • iframe 沙箱：最彻底的 JS/CSS 隔离
  • 子应用保活：支持 keep-alive
  • 预加载/预执行：提升子应用加载速度
  • 无需改造：子应用无需任何修改
  • 完美支持 Vite：解决 qiankun 的痛点

技术架构：

1
2
3
4
5
6
7
8
9
10
11
12
13
┌─────────────────────────────────────┐
│           主应用 (Main App)          │
│  ┌─────────────────────────────┐   │
│  │    <wujie-app> 组件         │   │
│  │  ┌─────────────────────┐    │   │
│  │  │  iframe 沙箱        │    │   │
│  │  │  ┌───────────────┐  │    │   │
│  │  │  │  子应用独立   │  │    │   │
│  │  │  │  JS运行环境   │  │    │   │
│  │  │  └───────────────┘  │    │   │
│  │  └─────────────────────┘    │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

2.4 Garfish

1
2
3
4
5
6
出品方: 字节跳动
GitHub: https://github.com/bytedance/Garfish
底层技术: 自研沙箱 + 插件化架构
Star数: ~2.5k
首次发布: 2021年
定位: 高性能微前端运行时框架

核心特性：

  • 高性能沙箱：优化的 JS 执行环境
  • 插件化架构：高度可扩展
  • 支持预加载：提升子应用加载速度
  • TypeScript 友好：完善的类型支持
  • 支持多实例：同一页面多个子应用

技术架构：

1
2
3
4
5
6
7
8
9
10
11
12
┌─────────────────────────────────────┐
│           主应用 (Main App)          │
│  ┌─────────────────────────────┐   │
│  │      Garfish Runtime        │   │
│  │  ┌─────────┐ ┌───────────┐  │   │
│  │  │插件系统 │ │沙箱系统   │  │   │
│  │  └─────────┘ └───────────┘  │   │
│  │  ┌─────────┐ ┌───────────┐  │   │
│  │  │生命周期 │ │应用管理   │  │   │
│  │  └─────────┘ └───────────┘  │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

2.5 Module Federation (MF)

1
2
3
4
5
出品方: Webpack 5 官方
文档: https://webpack.js.org/concepts/module-federation/
底层技术: 动态模块加载 + 共享依赖
首次发布: 2020年
定位: 原生微前端解决方案

核心特性：

  • 原生支持：Webpack 5 内置功能
  • 模块共享：依赖去重，减少包体积
  • 运行时集成：动态加载远程模块
  • 无框架限制：可用于任何框架
  • 高性能：共享依赖减少重复加载

技术架构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
┌─────────────────────────────────────┐
│           主应用 (Host)              │
│  ┌─────────────────────────────┐   │
│  │    Module Federation        │   │
│  │  ┌─────────────────────┐    │   │
│  │  │  Remote Entry       │    │   │
│  │  │  ┌───────────────┐  │    │   │
│  │  │  │ Shared Deps   │  │    │   │
│  │  │  └───────────────┘  │    │   │
│  │  └─────────────────────┘    │   │
│  └─────────────────────────────┘   │
│         ↓        ↓        ↓        │
│  ┌────────┐ ┌────────┐ ┌────────┐ │
│  │Remote A│ │Remote B│ │Remote C│ │
│  └────────┘ └────────┘ └────────┘ │
└─────────────────────────────────────┘

2.6 EMP

1
2
3
4
5
6
出品方: 腾讯电竞
GitHub: https://github.com/efoxTeam/emp
底层技术: Module Federation + Webpack 5
Star数: ~2.1k
首次发布: 2020年
定位: 基于MF的企业级微前端方案

核心特性：

  • 基于 Module Federation：继承 MF 所有优势
  • 开箱即用：封装了 MF 的复杂配置
  • 类型共享：支持 TypeScript 类型跨应用共享
  • 依赖管理：自动处理版本冲突
  • 插件生态：丰富的插件支持

技术架构：

1
2
3
4
5
6
7
8
9
10
11
12
┌─────────────────────────────────────┐
│           EMP 架构                   │
│  ┌─────────────────────────────┐   │
│  │    EMP CLI / Config         │   │
│  │  ┌─────────────────────┐    │   │
│  │  │ Module Federation   │    │   │
│  │  │  ┌───────────────┐  │    │   │
│  │  │  │ 类型共享系统  │  │    │   │
│  │  │  └───────────────┘  │    │   │
│  │  └─────────────────────┘    │   │
│  └─────────────────────────────┘   │
└─────────────────────────────────────┘

3. 详细对比分析

3.1 技术原理对比

框架 沙箱机制 样式隔离 JS隔离 路由模式
qiankun Proxy/快照沙箱 shadowDOM/scopedCSS Proxy代理 主子应用路由同步
micro-app with语句+Proxy shadowDOM 作用域隔离 自定义路由
wujie iframe原生隔离 iframe天然隔离 iframe原生隔离 降级路由
Garfish Proxy沙箱 scopedCSS Proxy代理 沙箱路由
MF 无沙箱 无隔离 无隔离 独立路由
EMP 无沙箱 无隔离 无隔离 独立路由

3.2 接入成本对比

框架 子应用改造 主应用接入 学习曲线 文档完善度
qiankun ⭐⭐ 较高 ⭐⭐⭐ 中等 ⭐⭐⭐ 中等 ⭐⭐⭐⭐⭐ 优秀
micro-app ⭐⭐⭐⭐⭐ 极低 ⭐⭐⭐⭐⭐ 极简 ⭐⭐⭐⭐⭐ 简单 ⭐⭐⭐⭐ 良好
wujie ⭐⭐⭐⭐⭐ 无需改造 ⭐⭐⭐⭐⭐ 极简 ⭐⭐⭐⭐⭐ 简单 ⭐⭐⭐⭐ 良好
Garfish ⭐⭐⭐ 中等 ⭐⭐⭐ 中等 ⭐⭐⭐ 中等 ⭐⭐⭐ 一般
MF ⭐⭐ 较高 ⭐⭐ 较复杂 ⭐⭐ 较难 ⭐⭐⭐ 一般
EMP ⭐⭐⭐ 中等 ⭐⭐⭐ 中等 ⭐⭐⭐ 中等 ⭐⭐⭐ 一般

3.3 构建工具支持

框架 Webpack Vite Rollup Rspack Turbopack
qiankun ✅ 完美 ⚠️ 需要插件 ⚠️ 有限 ⚠️ 有限 ❌ 不支持
micro-app ✅ 完美 ✅ 完美 ✅ 支持 ✅ 支持 ✅ 支持
wujie ✅ 完美 ✅ 完美 ✅ 支持 ✅ 支持 ✅ 支持
Garfish ✅ 完美 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持
MF ✅ 原生 ⚠️ 需插件 ⚠️ 有限 ✅ 原生 ✅ 原生
EMP ✅ 完美 ⚠️ 有限 ⚠️ 有限 ⚠️ 有限 ❌ 不支持

3.4 框架兼容性

框架 React Vue2 Vue3 Angular Svelte 原生JS
qiankun ✅ ✅ ✅ ✅ ✅ ✅
micro-app ✅ ✅ ✅ ✅ ✅ ✅
wujie ✅ ✅ ✅ ✅ ✅ ✅
Garfish ✅ ✅ ✅ ✅ ✅ ✅
MF ✅ ✅ ✅ ✅ ✅ ✅
EMP ✅ ⚠️ ✅ ⚠️ ⚠️ ✅

3.5 性能对比

框架 加载性能 运行时性能 内存占用 首屏时间
qiankun ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐
micro-app ⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐
wujie ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐
Garfish ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐
MF ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐
EMP ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐

说明：wujie 由于使用 iframe，每个子应用独立进程，内存占用较高；MF/EMP 由于模块共享，性能最优。

3.6 功能特性对比

特性 qiankun micro-app wujie Garfish MF EMP
子应用保活 ❌ ❌ ✅ ❌ ❌ ❌
预加载 ✅ ✅ ✅ ✅ ❌ ✅
预执行 ❌ ❌ ✅ ❌ ❌ ❌
样式隔离 ✅ ✅ ✅ ✅ ❌ ❌
JS沙箱 ✅ ✅ ✅ ✅ ❌ ❌
全局状态 ✅ ✅ ✅ ✅ ❌ ✅
应用通信 ✅ ✅ ✅ ✅ ✅ ✅
动态加载 ✅ ✅ ✅ ✅ ✅ ✅
类型共享 ❌ ❌ ❌ ❌ ⚠️ ✅
依赖共享 ❌ ❌ ❌ ❌ ✅ ✅

4. 多维度评分

4.1 综合评分表

维度 qiankun micro-app wujie Garfish MF EMP
技术架构 9 8 9 8 9 8
接入成本 6 9 10 7 5 7
隔离能力 8 8 10 8 3 3
生态成熟 10 7 7 6 9 6
性能表现 8 8 7 9 10 10
文档质量 9 8 8 7 7 7
社区活跃 9 7 7 5 9 5
生产验证 10 8 8 8 9 7
Vite支持 5 9 10 8 6 5
扩展性 8 7 8 9 10 8
总分 82 79 84 75 78 66

4.2 雷达图对比

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
                    生态成熟度
                        ↑
                        │
      接入成本 ←───────┼───────→ 隔离能力
                        │
                        │
      性能表现 ←───────┼───────→ 文档质量
                        │
                        ↓
                    扩展性

【图例说明】
- qiankun:    生态最强，接入成本较高
- micro-app:  接入最简单，平衡之选
- wujie:      隔离最强，接入最简单
- Garfish:    性能优秀，生态较弱
- MF:         性能最强，隔离最弱
- EMP:        类型共享，MF增强版

5. 场景化推荐

5.1 按项目类型推荐

项目类型 推荐框架 备选方案 理由
新项目 + Vite wujie micro-app 完美支持Vite，接入成本最低
新项目 + Webpack qiankun wujie 生态成熟，生产验证充分
存量项目迁移 wujie micro-app 无需改造子应用
大型企业应用 qiankun Garfish 成熟稳定，大厂验证
中小型项目 micro-app wujie 接入简单，维护成本低
多团队协作 MF/EMP qiankun 模块共享，独立部署
高隔离要求 wujie - iframe原生隔离最彻底
高性能要求 MF/EMP Garfish 模块共享，性能最优

5.2 按团队情况推荐

团队情况 推荐框架 理由
前端团队成熟 qiankun / MF 可驾驭复杂度，发挥框架优势
前端团队较小 micro-app / wujie 接入简单，维护成本低
多团队协作 MF / EMP 独立开发部署，模块共享
技术栈统一 任意 根据其他维度选择
技术栈多样 wujie / micro-app 框架无关，接入简单

5.3 按业务场景推荐

业务场景 推荐框架 关键考量
管理后台 qiankun / micro-app 成熟稳定，功能完善
C端应用 MF / EMP 性能优先，模块共享
移动端H5 micro-app 体积小，兼容性好
低代码平台 wujie 隔离彻底，支持保活
设计器/编辑器 wujie iframe隔离，状态保活
数据大屏 MF 性能最优，共享依赖

6. 选型决策树

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
开始选型
    │
    ├─ 是否需要严格隔离？
    │   ├─ 是 → wujie（iframe原生隔离）
    │   └─ 否 → 继续
    │
    ├─ 是否使用 Vite？
    │   ├─ 是 → wujie 或 micro-app
    │   └─ 否 → 继续
    │
    ├─ 是否需要子应用保活？
    │   ├─ 是 → wujie
    │   └─ 否 → 继续
    │
    ├─ 是否需要模块共享？
    │   ├─ 是 → MF 或 EMP
    │   └─ 否 → 继续
    │
    ├─ 团队规模和经验？
    │   ├─ 成熟团队 → qiankun
    │   ├─ 中等团队 → micro-app
    │   └─ 小团队 → wujie / micro-app
    │
    └─ 是否为存量项目？
        ├─ 是 → wujie（改造最小）
        └─ 否 → qiankun（生态最成熟）

7. 最终结论

7.1 综合推荐排名

排名 框架 推荐指数 适用场景
🥇 wujie ⭐⭐⭐⭐⭐ 新项目、Vite项目、高隔离需求
🥈 qiankun ⭐⭐⭐⭐ Webpack项目、大型企业应用
🥉 micro-app ⭐⭐⭐⭐ 中小项目、快速接入
4 MF ⭐⭐⭐ 性能优先、模块共享需求
5 Garfish ⭐⭐⭐ 字节系项目、高性能需求
6 EMP ⭐⭐⭐ TypeScript项目、类型共享需求

7.2 选型建议总结

推荐选择 wujie 的情况：

  • ✅ 新项目，希望快速落地
  • ✅ 使用 Vite 等现代构建工具
  • ✅ 需要最彻底的 JS/CSS 隔离
  • ✅ 子应用无需改造或改造成本要低
  • ✅ 需要子应用保活能力

推荐选择 qiankun 的情况：

  • ✅ 使用 Webpack 构建
  • ✅ 需要成熟的社区和丰富的踩坑经验
  • ✅ 大型企业级应用，稳定性优先
  • ✅ 团队有足够的改造时间

推荐选择 micro-app 的情况：

  • ✅ 希望接入成本最低
  • ✅ 中小型项目，功能需求简单
  • ✅ 需要支持多种构建工具
  • ✅ 对隔离性要求不是特别严格

推荐选择 MF/EMP 的情况：

  • ✅ 性能要求极高
  • ✅ 需要模块共享，减少重复加载
  • ✅ 多团队独立开发部署
  • ✅ 使用 Webpack 5 或 Rspack

7.3 风险提示

框架 主要风险 应对策略
qiankun Vite 支持不佳 使用插件或选择其他框架
micro-app 浏览器兼容性 添加 polyfill
wujie 内存占用较高 合理控制子应用数量
Garfish 社区较小 关注官方更新
MF 无沙箱隔离 自行实现隔离机制
EMP 维护活跃度较低 评估团队维护能力

附录

A. 参考链接

框架 官方文档 GitHub
qiankun https://qiankun.umijs.org/ https://github.com/umijs/qiankun
micro-app https://micro-zoe.github.io/micro-app/ https://github.com/micro-zoe/micro-app
wujie https://wujie-micro.github.io/doc/ https://github.com/Tencent/wujie
Garfish https://www.garfishjs.org/ https://github.com/bytedance/Garfish
MF https://webpack.js.org/concepts/module-federation/ Webpack 5 内置
EMP https://empjs.dev/ https://github.com/efoxTeam/emp

B. 大厂落地案例

框架 落地公司 应用场景
qiankun 蚂蚁金服、阿里云、钉钉 支付宝、蚂蚁财富等
micro-app 京东 京东商城、京东金融
wujie 腾讯 腾讯文档、腾讯会议
Garfish 字节跳动 抖音、今日头条
MF Netflix、Amazon 流媒体平台
EMP 腾讯电竞 腾讯游戏平台

文档维护：本文档基于 2026 年 4 月的最新信息编写，建议每季度更新一次以保持信息时效性。

架构设计
#微前端 #架构设计 #qiankun #wujie #micro-app
微前端框架技术选型
https://cszy.top/20260414-微前端框架技术选型/
作者
csorz
发布于
2026年4月14日
许可协议