# learn-micro-front-end

**Repository Path**: gt6550/learn-micro-front-end

## Basic Information

- **Project Name**: learn-micro-front-end
- **Description**: 系统学习微前端
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-05-29
- **Last Updated**: 2026-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微前端系统学习计划

---

## 第一阶段：概念与思想

### 1. 理论基础

- [x] 1.1 阅读 [Micro Frontends](https://swearer23.github.io/micro-frontends/) 完整文章
  - 理解微前端的定义和核心价值
  - 记录关键概念：独立部署、技术栈无关、团队自治

- [x] 1.2 阅读 [Martin Fowler - Micro Frontends](https://martinfowler.com/articles/micro-frontends.html)
  - 这是上文的原始出处，内容更详细
  - 重点关注：Benefits、Integration approaches、Styling

- [x] 1.3 理解微前端解决的核心问题
  - 巨石应用的痛点
  - 团队协作与独立交付
  - 技术栈升级与渐进式迁移

### 2. 实现方案概览

- [x] 2.1 了解主流实现方案
  - iframe 方案：优缺点分析
  - Web Components 方案
  - JavaScript Entry 方案
  - HTML Entry 方案
  - Module Federation 方案

- [x] 2.2 绘制方案对比表格
  - 从隔离性、通信、性能、改造成本等维度对比

  [微前端方案对比表格](./docs/微前端方案对比表格.md)

---

## 第二阶段：框架学习

### 3. single-spa（微前端鼻祖）

- [x] 3.1 阅读 [single-spa 官方文档](https://single-spa.js.org/docs/getting-started-overview)
  - 理解 Application、Parcel、Utility 概念
  - 理解生命周期：bootstrap、mount、unmount

- [x] 3.2 跑通 single-spa 官方示例
  - 克隆示例仓库并运行
  - 理解注册子应用的方式

### 4. qiankun（阿里）

- [x] 4.1 阅读 [qiankun 官方文档](https://qiankun.umijs.org/zh/guide)
  - 理解与 single-spa 的关系
  - 重点：沙箱机制、样式隔离、应用通信

- [x] 4.2 理解 qiankun 核心原理
  - HTML Entry 加载机制
  - JS 沙箱实现（Proxy 沙箱 vs 快照沙箱）
  - CSS 隔离方案
  - 推荐文章：搜索 "qiankun 源码解析"

- [x] 4.3 动手实践 qiankun
  - 实现应用间通信

### 5. micro-app（京东）- 当前项目使用

- [x] 5.1 阅读 [micro-app 官方文档](https://micro-zoe.github.io/micro-app/)
  - 理解 Web Components 实现原理
  - 对比与 qiankun 的差异

- [x] 5.2 深入理解当前项目实现
  - 分析 platform-base 基座配置
  - 分析 platform-main 子应用改造
  - 理解路由、通信、样式隔离的实现

- [x] 5.3 尝试添加一个新的子应用
  - 在当前项目中实践

---

## 第三阶段：原理深入

### 6. JS 沙箱原理

- [x] 6.1 理解 Proxy 沙箱
  - 学习 ES6 Proxy API
  - 理解如何拦截全局变量访问
  - 推荐：手写一个简易 Proxy 沙箱

- [x] 6.2 理解快照沙箱
  - 适用于不支持 Proxy 的环境
  - 理解 window 快照与恢复机制

- [x] 6.3 对比两种沙箱的优缺点
  - 性能、兼容性、多实例支持

### 7. CSS 隔离原理

- [x] 7.1 理解 Shadow DOM
  - 学习 Web Components 标准
  - 理解样式封装原理

- [x] 7.2 理解 CSS Scoped 方案
  - 选择器前缀添加
  - 动态样式处理

- [x] 7.3 理解 CSS Modules
  - 编译时隔离方案

### 8. 应用通信机制

- [x] 8.1 理解发布订阅模式
  - 实现一个简易 EventBus

- [x] 8.2 理解 Props 传递
  - 基座向子应用传递数据

- [x] 8.3 理解全局状态方案
  - 共享状态管理

---

## 第四阶段：扩展与实践

### 9. 其他框架了解

- [ ] 9.1 了解 [无界 wujie](https://wujie-micro.github.io/doc/)（腾讯）
  - iframe + Web Components 方案

- [ ] 9.2 了解 [garfish](https://www.garfishjs.org/)（字节）

- [ ] 9.3 了解 [Module Federation](https://webpack.js.org/concepts/module-federation/)
  - Webpack 5 原生方案

### 10. 工程化实践

- [x] 10.1 理解微前端部署方案
  - 独立部署 vs 统一部署
  - Nginx 配置要点

- [ ] 10.2 理解公共依赖处理
  - externals 方案
  - 共享依赖加载

- [ ] 10.3 理解性能优化
  - 预加载策略
  - 资源缓存

### 11. 总结输出

- [x] 11.1 整理学习笔记
  - 核心概念总结
  - 方案对比表格

- [x] 11.2 绘制微前端架构图
  - 当前项目架构图
  - 通用微前端架构图

- [x] 11.3 分享或写博客
  - 输出是最好的学习

---

## 学习资源汇总

### 官方文档

- micro-frontends.org: <https://micro-frontends.org/>
- single-spa: <https://single-spa.js.org/>
- qiankun: <https://qiankun.umijs.org/>
- micro-app: <https://micro-zoe.github.io/micro-app/>
- wujie: <https://wujie-micro.github.io/doc/>
- garfish: <https://www.garfishjs.org/>

### 推荐文章

- Martin Fowler 微前端: <https://martinfowler.com/articles/micro-frontends.html>
- Module Federation: <https://webpack.js.org/concepts/module-federation/>

### 视频资源

- B 站搜索 "微前端架构"
- B 站搜索 "qiankun 源码"

### 源码学习

- qiankun GitHub: <https://github.com/umijs/qiankun>
- micro-app GitHub: <https://github.com/micro-zoe/micro-app>
- single-spa GitHub: <https://github.com/single-spa/single-spa>