WU / 文档通用微前端
中文

微前端:何时选择 WU Framework

了解微前端(microfrontends 或 microfronts)的含义、WU 的作用,以及如何拆分应用并掌握数据、路由和部署的控制权。

什么是 microfrontends 或 microfronts

Microfrontends(微前端)将界面拆分为具有功能边界和独立交付周期的应用。你也会见到 micro-frontends、microfronts 和 MFE 这些名称。仅将组件分到不同文件夹还不够:每个应用都需要集成契约和负责发布的维护者。

WU Framework 是用于组合这些应用的 JavaScript 运行时。Shell 决定应用显示的位置,WU 管理注册、加载、挂载和卸载。各应用保留构建界面所用的技术。什么是 WU介绍了基本契约。

该包包含 React、Vue、Angular、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus 的适配器。请在适配器参考中查看各自的契约。

对于其他技术,可以通过 wu.define 注册 mount 和 unmount,或使用 createWuAdapter 构建适配器。统一契约既能连接使用相同框架的应用,也能连接使用不同框架的应用。

由独立团队维护的商店

一个团队可以维护 React 商品目录,另一个团队维护 Vue 购物车。Shell 为两者分别预留空间。目录发布选择结果,购物车观察这些数据,双方都无需导入对方的内部组件。React 与 Vue 共享计数器 提供可下载代码,让你实际体验这种交互。

按商品目录、支付或管理等业务能力拆分。共享按钮通常应放在组件库中。将其变成另一个微前端会增加加载、挂载和协调工作,却不一定带来有用的独立性。

何时值得评估 WU

  • 你需要分阶段将新应用引入现有界面,同时保留其使用的技术。
  • 不同团队发布不同的业务能力,并能维护兼容的契约。
  • 你希望组合不同渲染器,并通过状态、事件或版本化服务连接应用。

对于统一协调发布的单一团队,模块化应用可能更合适。微前端需要额外考虑依赖、网络故障、可观测性和兼容性。WU 提供组合机制,但这些决策仍由团队负责。

上线前需要做哪些决定

明确谁控制 URL、哪些数据可以跨越边界,以及应用加载失败时如何处理。共享 JavaScript 上下文无法隔离恶意代码。WU 的 grants 限制对其 facade 的访问;请阅读权限与生命周期和 Shell 架构。

独立构建也不自动等于独立部署。发布相互兼容的资源和 manifest,保留可恢复的版本,并在每次变更后检查 Shell。生产指南解释了 CLI 的输出。

用真实业务能力评估 WU

从使用 WU CLI 创建第一个微应用开始,添加第二个应用,并测试卸载、通信和加载失败。选择集成方式时请阅读 React 与 Angular;选择架构时请阅读 WU 与 Module Federation、single-spa 对比。

一起完善 WU

发现了问题?有新的想法?

你的使用体验能让 WU 变得更好。告诉我们遇到的问题,或支持项目的持续开发。