WU 与 Module Federation、single-spa 对比
评估 WU 作为微前端组合方案的适用性:比较模块加载、应用生命周期、通信方式及 Shell 的职责。
你需要解决什么问题
如果你在寻找 Module Federation 的替代方案,请先区分共享模块与协调完整应用。WU 通过注册、加载和生命周期组织应用,并提供 store、事件和 contracts。选择取决于你希望将集成边界放在哪里。
以下对比涵盖 WU 4.0.0、webpack 文档中的 Module Federation 概念,以及 single-spa 的应用模型。这不是性能测试,也不覆盖各生态中的全部插件。
职责对比
| 决策 | WU Framework | Module Federation | single-spa |
|---|---|---|---|
| 集成单元 | 带 manifest 和生命周期的应用 | 在不同构建之间暴露和使用的模块 | 带加载、激活和生命周期的应用 |
| 界面挂载 | 宿主向 WU 请求 mount/unmount | 使用方决定如何渲染模块 | 运行时激活并挂载已注册的应用 |
| 共享依赖 | 显式配置构建与 WU 加载 | 配置共享模块及其版本 | 由加载环境和应用决定 |
| 应用间数据 | 运行时的 store、事件和 contracts | 由模块及其使用方定义契约 | 由应用和共享工具定义契约 |
来源:webpack 的 Module Federation、single-spa 模型和 WU API。如果使用其他联邦插件,请查阅该具体实现的文档。
何时将 WU 纳入替代方案评估
如果你希望通过统一挂载契约组合应用,并在它们之间使用状态、事件或服务,可以评估 WU。判断依据是组合和通信需求,与各应用使用的技术无关。从边界明确的一项能力开始,参考微前端指南检查集成。
该包包含 React、Vue、Angular、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus 的适配器。请在适配器参考中查看各自的契约。
对于其他技术,可以通过 wu.define 注册 mount 和 unmount,或使用 createWuAdapter 构建适配器。统一契约既能连接使用相同框架的应用,也能连接使用不同框架的应用。
如果需要使用其他构建产出的模块,并在该层面管理共享依赖,Module Federation 值得评估。如果希望在 root config 中配置应用的激活规则和生命周期,single-spa 值得评估。无论选择哪种方案,都仍然需要设计契约和运维部署。
迁移时需要改变什么
WU 不会自动解释 Module Federation 的 remotes 配置或 single-spa 的 root config。识别每个入口,创建对应 manifest,将渲染器连接到生命周期,并把全局决策移到 Shell。明确如何转换现有通信契约,以及发布失败时如何回到旧版本。
全局路由由 Shell 维护,WU 没有公开的路由器。也不要认为在同一个 JavaScript 上下文中运行模块就形成了安全边界。架构文档解释了这些职责。
用测试辅助选择
在你的环境中比较同一项能力:首次加载、路由切换、数据更新、卸载、网络故障和依赖版本升级。使用相同浏览器和缓存条件记录传输体积及耗时。评估 WU 时,可从通信示例和生产输出开始。