# 微前端：何时选择 WU Framework

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

<span id="qué-son-los-microfrontends-o-microfronts"></span>

<span class="section-anchor" id="section-1"></span>

## 什么是 microfrontends 或 microfronts

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

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

该包包含 **React、Vue、Angular、Svelte、Preact、Solid、Lit、Vanilla、Alpine、Qwik、Stencil、HTMX 和 Stimulus** 的适配器。请在[适配器参考](/zh-cn/docs/framework/api-adapters/)中查看各自的契约。

对于其他技术，可以通过 `wu.define` 注册 `mount` 和 `unmount`，或使用 [`createWuAdapter`](/zh-cn/docs/framework/api-adapters/#createwuadapter) 构建适配器。统一契约既能连接使用相同框架的应用，也能连接使用不同框架的应用。

<span id="una-tienda-con-equipos-independientes"></span>

<span class="section-anchor" id="section-2"></span>

## 由独立团队维护的商店

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

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

<span id="cuándo-wu-merece-una-evaluación"></span>

<span class="section-anchor" id="section-3"></span>

## 何时值得评估 WU

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

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

<span id="qué-debes-decidir-antes-de-producción"></span>

<span class="section-anchor" id="section-4"></span>

## 上线前需要做哪些决定

明确谁控制 URL、哪些数据可以跨越边界，以及应用加载失败时如何处理。共享 JavaScript 上下文无法隔离恶意代码。WU 的 grants 限制对其 facade 的访问；请阅读[权限与生命周期](/zh-cn/docs/framework/api-core/)和 [Shell 架构](/zh-cn/docs/guides/architecture/)。

独立构建也不自动等于独立部署。发布相互兼容的资源和 manifest，保留可恢复的版本，并在每次变更后检查 Shell。[生产指南](/zh-cn/docs/guides/production/)解释了 CLI 的输出。

<span id="evalúa-wu-con-una-capacidad-real"></span>

<span class="section-anchor" id="section-5"></span>

## 用真实业务能力评估 WU

从[使用 WU CLI 创建第一个微应用](/zh-cn/docs/guides/quickstart/)开始，添加第二个应用，并测试卸载、通信和加载失败。选择集成方式时请阅读 [React 与 Angular](/zh-cn/docs/guides/react-angular-microfrontends/)；选择架构时请阅读 [WU 与 Module Federation、single-spa 对比](/zh-cn/docs/guides/module-federation-alternative/)。