Module Federation(Webpack 5 引入,现已有 Rspack、Vite 及 Module Federation 2.0 实现)让多个独立构建的应用在运行时共享模块:一个应用 exposes 组件或模块,另一个应用作为 host 通过 remotes 远程加载,shared 配置让公共依赖(react、react-dom)只加载一份。它把微前端的应用集成下沉为模块共享,颗粒度可以细到单个组件或工具函数。
核心配置:name、exposes、remotes、shared(singleton 保证单例、requiredVersion 做版本协商)。优势是去中心化——每个应用既可提供也可消费,不需要专门基座。易错点:remoteEntry 是运行时拉取,要有加载失败兜底;singleton 与多版本冲突会报错;类型提示需要 2.0 的类型同步能力。追问:与 qiankun 的互补关系——MF 管模块共享,qiankun 管应用生命周期与沙箱。
// webpack.config.js
new ModuleFederationPlugin({ name: 'host', remotes: { shop: 'shop@https://cdn/remoteEntry.js' }, shared: { react: { singleton: true } } })