乐闻世界logo
搜索文章和话题

Module Federation 和 qiankun、single-spa 有什么区别?

2月19日 17:44

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:适合需要高度定制化微前端架构的场景
标签:Module Federation