微前端架构与实践
巨石项目的痛点
- 项目代码量大
- 不同技术栈，导致维护成本高
- 复用层困难
传统解决方案：iframe
优点
- 独立性：每个子应用都有自己的生命周期和上下文，彼此互不影响
- 实现简单：基本的 HTML 即可使用 iframe 嵌入
缺点
- 性能问题：iframe 本身会产生较大的性能开销，尤其是存在多个嵌套应用时，容易导致页面加载变慢。
- 隔离性差：由于嵌入的页面是完全独立的，无法轻松实现应用之间的通信和共享状态
- 跨域问题：需要依赖 postMessage 等复杂机制，增加开发成本，增加出错概率
微前端框架方案
single-spa（鼻祖）
js
import { registerApplication, start } from 'single-spa'
// 注册一个子应用
registerApplication({
name: 'react-app',
app: () => System.import('reactApp'),
activeWhen: ['/react'], // 表示路由访问 /react 的时候才激活
})
start()qiankun（阿里开源）
优点：
- 强大的生命周期管理，轻松实现应用注册、加载、渲染、卸载、同应用之间的通信和状态共享
- 动态加载子应用，提高性能
- 内置跨框架支持，可以无缝接入不同的技术栈
缺点：
- 学习成本高
js
// js,css 隔离
// 基于 single-spa
// JS 隔离方案：
// - 快照沙箱（主要）：legacy Sandbox
// - 代理沙箱（主要）：proxy Sandbox
// - 原始沙箱：snapshots Sandbox其他框架
- wujie：美团技术团队开源
- micro-app：京东开源
- Garfish：字节开源的轻量级开源框架
- Module Federation：Webpack 5 内置
设计一套微前端系统需要考虑哪些事情？
- 应用之间的独立性和隔离性
- 跨框架支持
- 性能优化
- 子应用的生命周期管理
- 路由管理
面试题：如何负责 20 多个子应用的整合和微前端体系搭建？
1. 微前端架构概述
- 微前端的定义与优势
- 微前端的技术栈与常见框架
- 微前端架构中的挑战
2. 项目背景与需求
- 业务系统概述：用户中心、营销平台、数据分析、订单管理、内容管理等
- 项目需求分析：20 多个子应用的整合和微前端体系搭建
- 可扩展性、维护性与高效性需求
3. 选型：为什么选择 qiankun
优点：
- 强大的生命周期管理，轻松实现应用注册、加载、渲染、卸载、同应用之间的通信和状态共享
- 动态加载子应用，提高性能
- 内置跨框架支持，可以无缝接入不同的技术栈
4. 微前端基座的设计与架构
- 基座应用（Shell Application）设计与实现
- 子应用（Micro Applications）注册与加载
- 子应用框架选型与设计（如：React、Vue、Angular 等）
- 子应用隔离与沙箱机制（如：快照沙箱、代理沙箱、原始沙箱等）
5. 业务系统拆分与子应用设计
- 如何将 20 多个子应用拆分成多个子应用
- 每个子应用的职责划分与独立性要求
- 子应用框架选项与设计
6. 路由管理与跳转设计
- 主应用与子应用的路由管理策略
- 子应用路由与主应用路由协同工作
- 使用 qiankun 的路由切换机制
7. 跨应用通信设计
- qiankun 的通信机制：共享状态与事件总线
- 应用间通信的策略：发布、订阅模式、全局状态管理
- 例子：如何在用户中心子应用与营销平台子应用之间实现通信和状态共享
8. 性能优化与安全性考虑
- 如何确保子应用加载性能优化：懒加载、按需加载
- 性能瓶颈分析：如何处理多子应用并发加载、代码分割等
- 安全性：跨域安全、沙箱机制、子应用的隔离设计
9. 容器与子应用的部署策略
- 部署架构：基座应用与子应用的部署
- 子应用版本管理与升级机制
- 如何实现平滑过渡与无缝升级
10. 开发流程与工具链建设
- CI/CD 流程的设计：如何确保微前端架构下的自动化测试与构建
- 子应用独立开发与集成
- 自动化测试架构：如何编写跨子应用的测试用例
11. 监控与日志管理
- 微前端架构下的监控策略：如何监控所有子应用的健康状态
- 集中化日志系统与异常捕获
- 性能监控与分析工具的使用
12. 总结与展望
- 项目实施的关键点与经验总结
- 微前端架构的未来方向与挑战
- 持续优化与迭代、技术演化与优化方向