📘 微前端架构落地
React 实战
🎯 30 章 · 从入门到未来
01
微前端概念与价值
核心
什么是微前端、核心价值、适用场景与挑战
02
主流方案对比
选型
iframe / Web Components / Module Federation / qiankun / Micro-app
03
qiankun框架入门
核心原理、主应用与子应用通信、生命周期
04
主应用搭建
创建React主应用、配置qiankun、注册子应用、全局状态管理
05
子应用接入（React）
改造React为子应用、生命周期、独立运行与联调
06
子应用接入（Vue）
改造Vue为子应用、跨框架通信、样式隔离
07
样式隔离方案
CSS Modules / Shadow DOM / qiankun沙箱 / BEM
08
JS沙箱机制
快照沙箱、代理沙箱、legacySandbox & proxySandbox
09
应用间通信
initGlobalState / EventBus / Shared Store
10
路由管理
主应用路由分发、子应用路由、冲突解决、keep-alive
11
公共依赖管理
共享React/Vue实例、externals、CDN、版本冲突
12
构建与部署
Webpack优化、独立/统一构建、CI/CD、Docker
13
微前端监控
性能监控、错误监控、白屏检测、日志上报
14
权限管理
统一登录、子应用权限、路由权限、按钮级权限
15
国际化方案
主应用统一i18n、子应用独立i18n、语言同步
16
主题定制
CSS变量方案、动态主题切换、子应用同步
17
微前端测试
单元测试、集成测试、E2E、跨应用测试策略
18
性能优化
首屏加载、预加载、按需加载、缓存策略
19
错误边界
React Error Boundary、子应用崩溃隔离、降级
20
微前端与微服务
BFF层设计、API网关、服务拆分与聚合
21
Module Federation实战
Webpack 5 MF配置、共享模块、动态加载
22
Micro-app框架
原理、配置使用、与qiankun对比
23
无界微前端
无界框架特性、iframe增强方案、性能优势
24
微前端迁移策略
从巨石应用到微前端、渐进式迁移、灰度发布
25
微前端架构设计
组织架构匹配、技术选型、目录规范、代码规范
26
微前端与低代码
低代码平台集成、动态加载组件、可视化搭建
27
微前端安全
XSS/CSRF防护、子应用隔离安全、数据安全
28
微前端调试
Chrome DevTools技巧、跨应用调试、SourceMap
29
微前端最佳实践
大型项目案例、常见坑总结、团队协作流程
30
微前端未来趋势
Web Components标准化、Islands架构、与AI结合