微前端概念与权衡
了解团队采用微前端的原因，以及运行时拆分与构建时拆分方案。
微前端概念与权衡 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
什么是微前端
微前端将微服务的理念扩展到了 UI 层。一个 Web 应用会被拆分为多个由不同团队独立负责、开发和部署的前端部分。
集成策略
主要有三种集成策略：构建时集成（npm 软件包）、服务端集成（边缘组合）和运行时集成（模块联邦、内嵌框架、Web 组件）。
构建时集成
将共享组件发布为 npm 软件包。这种方式很简单，但任何变更都要求重新发布并重新部署所有使用方——并不是真正的独立部署。
// Team A publishes:
npm publish @company/design-system
// Team B installs:
npm install @company/design-system
import { Button } from '@company/design-system';
// Deployed together — not independent通过模块联邦进行运行时集成
Webpack 5 的模块联邦允许一个应用（主应用）在运行时从另一个应用（远程应用）加载组件，从而实现真正的独立部署。
内嵌框架集成
使用内嵌框架嵌入微前端，以获得最大的隔离性。优点：不会发生 CSS/JS 冲突。缺点：用户体验较差（滚动、焦点、尺寸处理困难）、状态共享困难，并且不利于 SEO。
Web 组件
将每个微前端封装在自定义元素中。这种方式适用于任何框架并提供原生隔离能力，但缺少上下文共享等 React 专属功能。
// Remote team builds:
customElements.define('product-detail', ProductDetailElement);
// Host team embeds:
<product-detail product-id="123" />权衡：优点
独立部署（部署一个团队的 UI 时无需修改其他团队的 UI）、团队自主权（自行选择技术栈和依赖）以及可扩展性（团队可以并行工作而不会发生代码冲突）。
权衡：成本
运维复杂度更高（更多代码仓库、CI 管道和部署）、软件包重复（未共享时会多次加载 React）、性能开销增加，以及跨边界调试更加困难。
何时选择微前端
在以下情况下，微前端最有价值：多个大型团队共同开发同一产品、不同部分需要使用不同技术栈，或者需要完全独立地部署各个部分。
何时不应选择微前端（NOT）
以下情况应避免使用微前端：团队规模较小（额外开销超过收益）、应用较为简单，或者您能够完全控制整个前端——使用 Nx/Turborepo 的单仓库通常已经足够。
共享设计系统
无论采用哪种集成策略，共享设计系统（作为软件包发布或通过模块联邦暴露）都能确保各个微前端之间的视觉一致性。
快速检查
哪种集成方式可以在运行时实现微前端的真正独立部署？
回顾
微前端将 UI 拆分开来，以实现团队自主权和独立部署。集成选项从 npm 软件包（简单但不独立）到模块联邦（运行时集成且真正独立）不等。请权衡运维成本——微前端适合大型多团队产品，但会为较小的项目增加复杂度。
常见问题解答
「微前端概念与权衡」课时是免费的吗？
是的 — 「微前端概念与权衡」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「微前端概念与权衡」这节课中我会学到什么？
了解团队采用微前端的原因，以及运行时拆分与构建时拆分方案。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「微前端概念与权衡」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。