微前端

微前端是一种将前端应用拆分为多个独立子应用的架构模式，每个子应用可以独立开发、测试和部署

📚 目录

框架教程

• micro-app - 🔵 京东微前端方案
• qiankun - 🟢 阿里乾坤微前端框架
• wujie - 🟠 字节跳动无界微前端框架

什么是微前端

微前端（Micro Frontends）借鉴了微服务的思想，将庞大的后端应用拆分为多个独立服务。在前端领域，它将一个大型应用拆分为多个可以独立开发、独立部署的子应用。

核心价值

• 技术栈无关：主应用与子应用可以使用不同的框架
• 独立开发：各子应用可由不同团队独立开发
• 独立部署：子应用可独立部署，不影响其他应用
• 增量升级：可以逐步升级或替换部分模块
• 状态隔离：各子应用间样式和全局变量相互隔离

主流方案对比

方案	开发方	隔离方式	侵入性	特点
qiankun	阿里	JS Sandbox + CSS Module	较低	基于 single-spa，生态成熟
micro-app	京东	Web Component	低	使用 Web Component 隔离
wujie	字节	JS+CSS 沙箱	低	降级 iframe，兼容性最强
single-spa	-	JS Sandbox	较高	最早的微前端方案

基础架构

┌─────────────────────────────────────┐
│            主应用 (Container)        │
│  ┌─────────┐ ┌─────────┐ ┌────────┐  │
│  │ 子应用1 │ │ 子应用2 │ │ 子应用3│  │
│  │ Vue     │ │ React   │ │ jQuery│  │
│  └─────────┘ └─────────┘ └────────┘  │
└─────────────────────────────────────┘

通信机制对比

方案	主→子通信	子→主通信	通信方式
qiankun	setGlobalState	onGlobalStateChange	GlobalState
micro-app	setData	addDataListener	window 通信
wujie	props	$wujie.bus.$emit	事件总线

选型建议

✅ 适合使用微前端

• 大型后台管理系统，多团队协作
• 技术栈升级（Vue2 → Vue3 过渡期）
• 独立部署的需求
• 需要整合多个遗留系统

❌ 不适合使用微前端

• 小型项目（增加复杂度）
• 团队小（沟通成本高）
• 性能敏感的应用
• SEO 优先的应用（SSR 不友好）

框架选择

场景	推荐方案
追求生态成熟	qiankun
追求高性能	micro-app
追求兼容性最强	wujie
需要 IE 支持	wujie (iframe 降级)

常见问题

1. 子应用静态资源 404

确保子应用的 publicPath/base 配置与主应用路由一致

2. 样式冲突

• 使用 CSS Modules
• 启用框架自带的样式隔离
• 给子应用样式添加命名空间前缀

3. 全局变量污染

• 利用框架的沙箱机制
• 避免使用全局变量
• 使用 IIFE 包裹代码

4. 跨域问题

确保子应用开发服务器配置了 CORS 头

headers: {
  'Access-Control-Allow-Origin': '*',
}

学习路径

1. 了解概念：阅读本文档的概述部分
2. 选择框架：根据团队和技术栈选择合适的框架
3. 跑通示例：按照对应框架的教程搭建 demo
4. 深入原理：了解沙箱、隔离、通信等原理
5. 生产实践：在实际项目中应用和优化

---

持续更新中，欢迎提出建议和补充！