Module Federation 如何实现微前端?和 qiankun 有何区别?
Module Federation(Webpack5/Vite 插件)让多个独立构建的应用在运行时互相加载对方导出的模块,天然适合微前端:
// app1 暴露组件
new ModuleFederationPlugin({ name: 'app1', filename: 'remoteEntry.js', exposes: { './Button': './src/Button' }, shared: { react: { singleton: true } } })
// app2 消费
remotes: { app1: 'app1@https://app1.com/remoteEntry.js' }
import Button from 'app1/Button'与 qiankun 区别:
- qiankun:基座模式,主应用统一调度子应用(HTML entry、路由劫持、沙箱),子应用是「整站」
- MF:组件/模块级共享,没有强制基座,更轻、更灵活,但需要自己处理加载/隔离;它解决的是「运行时共享代码/依赖」
实践中两者可结合:用 MF 共享组件与依赖,用基座/路由做应用级编排。