Module Federation 和传统的微前端方案(如 qiankun、single-spa)有以下主要区别:
1. 构建时机不同
- Module Federation:在构建时生成独立的构建产物,运行时动态加载
- qiankun/single-spa:需要构建完整的子应用,主应用通过 JS/CSS 加载子应用
2. 依赖共享机制
- Module Federation:原生支持依赖共享,通过 shared 配置自动管理版本冲突
- qiankun:需要手动配置 importMap 或使用沙箱隔离依赖
- single-spa:依赖 SystemJS 模块加载器,需要额外配置依赖管理
3. 代码隔离方式
- Module Federation:通过 Webpack 的模块系统实现隔离,共享依赖时使用单例模式
- qiankun:使用 JS 沙箱(快照沙箱或代理沙箱)隔离全局变量
- single-spa:依赖 SystemJS 的模块隔离机制
4. 开发体验
- Module Federation:配置相对简单,与 Webpack 深度集成,支持 HMR
- qiankun:需要适配子应用生命周期,配置相对复杂
- single-spa:学习曲线较陡,需要理解 SystemJS 和生命周期
5. 性能对比
- Module Federation:按需加载模块,共享依赖减少重复代码,性能更优
- qiankun:需要加载完整的子应用,可能存在代码重复
- single-spa:通过 SystemJS 加载模块,有一定的运行时开销
6. 技术栈限制
- Module Federation:主要支持 Webpack 5,对其他构建工具支持有限
- qiankun:不限制技术栈,支持 Vue、React、Angular 等多种框架
- single-spa:框架无关,支持任意前端技术栈
7. 适用场景
- Module Federation:适合同技术栈、需要细粒度模块共享的场景
- qiankun:适合异构技术栈、需要完整应用隔离的场景
- single-spa:适合需要高度定制化微前端架构的场景