Module Federation模块联邦

34 阅读2分钟

Module Federation模块联邦

核心价值,将依赖管理从“构建时”推迟到“运行时” ,为微前端架构多应用场景提供了优雅的解决方案。

  • 解决代码共享问题:无需npm包,直接共享远程模块;angular,tiny3等
  • 避免重复打包:智能共享依赖,减少资源浪费;
  • 实现部署解耦:独立部署,团队协作更高效;按照业务拆分不同的微服务,

MF加载原理

动态加载: 运行时按需加载远程模块,异步加载

import()带来的两大优势:

1、懒加载lazy loading

  • 延迟加载非首屏必须的资源,适用场景:弹窗、工具函数、重量级库如图表库

2、按需加载-demand loading

  • 根据用户行为动态加载对应功能,适用场景:SPA路由路由切换时才加载对应路由、权限功能、A/B测试

shared配置

问题场景:微前端架构中,如果每个独立应用都打包自己的依赖,则

  • 资源浪费:每个应用都包含一份完整的react/vue,造成网络资源极大浪费
  • 多实例冲突:多个react实例共存可能引发Invalid hook call等运行时错误
  • 版本混乱:不同应用使用不同版本的依赖,难以维护和调试

MF解决方案

shared配置-一套精巧的运行时依赖协商与共享机制

  • singleton: 单例模式,确保全局唯一性,防止多实例冲突
  • requiredVersion: 版本范围^ ~
  • strictVersion: 为true时要求依赖版本严格匹配版本号,缺少灵活性
  • eager: 加载策略 默认false异步加载,建议 仅对应用启动必需的核心库开启同步加载

Module Fedaration 不仅是打包配置,更是一套运行时依赖协商机制

版本协商流程:Host注册依赖->remote查询->版本匹配->复用或fallback(降级)

qiankun和MF对比

qiankun: 应用级集成,强隔离机制(沙箱),技术栈无关、适合整合遗留系统

Module Federation: 模块级共享,原生依赖管理shared配置,极致性能按需加载模块,适合现代化应用

未来技术趋势:

  • web components标准化
  • vite生态 vite-plugin- federation