单 spa 适用于多前端应用整合场景，支持不同技术栈子应用共存于同一页面，实现独立开发与部署；典型应用包括大型企业平台集成、渐进式技术升级及多团队协作，通过统一主应用协调路由、生命周期与公共逻辑，提升系统一致性与交付效率；其核心优势在于多框架兼容、按需加载与清晰的生命周期管理，同时需注意样式隔离、JavaScript 沙箱局限及跨应用通信规范，整体有效降低复杂前端项目的维护成本。
单 spa 框架适用于需要将多个前端应用整合到一个页面中，同时保持各子应用独立开发、独立部署的场景。它通过 JavaScript 微前端的方式，实现不同技术栈应用的共存与协同，特别适合大型组织中多团队协作的复杂系统。
适合使用单 spa 的典型应用场景
大型企业级平台的前端整合
当企业拥有多个业务系统（如订单、用户管理、报表等），每个系统由不同团队用不同框架（React、Vue、Angular）开发时，单 spa 可以将这些系统统一集成到一个主应用中，共享导航、登录、权限控制等公共逻辑，提升整体体验一致性。
渐进式技术升级
立即学习“前端免费学习笔记（深入）”；
在从旧技术（如 jQuery 或 AngularJS）向现代框架迁移过程中，单 spa 允许新旧应用并行运行。可以逐步将老模块替换为新框架实现的子应用，避免“重写式”迁移带来的高风险和长周期问题。
多团队协作与独立交付
不同团队可独立开发、测试和部署自己的子应用，只要遵循约定的生命周期接口即可接入主应用。这种松耦合模式提升交付效率，降低协作成本，适合敏捷开发和 DevOps 实践。
单 spa 的核心优势与实践要点
支持多框架共存
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
子应用可用 Vue、React、Angular 甚至原生 JS 开发，主应用通过配置路由动态加载对应资源，无需统一技术栈。
独立部署与按需加载
- 子应用可部署在不同域名或路径下，主应用通过 URL 配置动态引入
- 结合懒加载策略，只在访问对应路由时加载子应用资源，优化首屏性能
生命周期管理清晰
每个子应用需导出 bootstrap、mount、unmount 三个方法，确保在切换时正确初始化和销毁，避免内存泄漏和样式冲突。
需要注意的问题与建议
样式隔离需额外处理
单 spa 不提供默认的样式隔离，建议使用 CSS 命名空间、Shadow DOM 或构建时加前缀等方式防止样式污染。
JavaScript 沙箱不完全
全局变量和 window 对象的修改可能影响其他应用，推荐子应用避免直接操作全局环境，必要时可借助 import-map 和沙箱库增强隔离。
通信机制要规范
- 可通过 customEvent、props 传递、全局状态（如 Redux、Vuex）或专用事件总线实现跨应用通信
- 建议定义统一的通信规范，避免过度耦合
