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