微前端
微前端的目标
- 实现前端应用的模块化解偶
- 支持多个团队并行开发
- 提供独立运行、独立部署的能力
- 支持多技术栈共存
- 降低大型应用的维护成本的发布风险
核心理念
| 原则 | 说明 |
|---|---|
| 技术栈无关 | 每个子应用可以使用自己选择的前端框架 |
| 独立开发与部署 | 每个子应用拥有自己的代码库、CICD，互不干扰 |
| 独立运行时 | 每个子应用可以不依赖主应用的情况运行与测试 |
| 主子应用解耦 | 主应用只负责加载子应用，不强依赖其实现细节 |
| 用户体验一致 | 尽管各子应用独立开发，但通过统一的设计规范，组件库保证UI/UX 一致性 |
核心技术点
| 技术点 | 说明 |
|---|---|
| 路由管理 | 解决主子应用路由冲突、同步跳转等问题 |
| 状态共享 | 提供全局状态管理方案（如eventBus、shared store） |
| 样式隔离 | 避免子应用样式污染主应用（如Shadow DOM、CSS Module） |
| JS运行时隔离 | 防止子应用篡改全局变量，可以使用沙箱机制 |
| 子应用生命周期 | 提供完整生命周期钩子（bootstrap、mount、unmount）支持管理 |