微前端的组合方式
探索组合微前端的主要方式——构建时组合、服务器端组合和客户端组合，并了解每种方式的适用场景。
微前端的组合方式 是 CoddyKit 上的免费 Micro Frontends Architecture with Module Federation 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Micro Frontends Architecture with Module Federation 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Micro Frontends Architecture with Module Federation 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
What Is Composition?
Composition is how independently built micro frontends combine into the single page a user sees — and your choice shapes performance and deployment.
Three Families of Composition
Composition strategies fall into three families: build-time, server-side, and client-side (run-time). Real systems often mix them.
Build-Time Composition
Build-time composition publishes each MFE as an npm package pulled into a container app. Simple, but it couples deploys — one change rebuilds the whole shell.
{
"dependencies": {
"@team/cart-mfe": "1.2.0",
"@team/search-mfe": "0.9.1"
}
}Server-Side Composition
Server-side composition stitches MFE fragments into one HTML response, giving fast first paint and strong SEO since the browser gets a complete page.
Server-Side Includes (SSI)
A classic technique is Server-Side Includes: include directives the web server replaces with each MFE fragment before sending the page.
<!--#include virtual="/header-mfe" -->
<main><!--#include virtual="/catalog-mfe" --></main>
<!--#include virtual="/footer-mfe" -->Edge-Side Composition
Edge-side composition assembles fragments at the CDN edge (via Edge Side Includes), pairing low latency with centralized stitching close to users.
Client-Side Composition
Client-side composition loads a thin shell, then fetches and mounts each MFE at run time. It is the most flexible approach and the base of Module Federation.
Client-Side with Web Components
One client-side technique wraps each MFE in a custom element (web component). The shell just places the tags and each MFE bootstraps itself.
<app-shell>
<product-list></product-list>
<shopping-cart></shopping-cart>
</app-shell>Trade-offs at a Glance
Each approach trades off: build-time is simplest but weak on independence, server-side nails first load and SEO, client-side maximizes team autonomy.
Choosing an Approach
Choose by priority: server-side when SEO and first paint dominate, client-side for independent deploys and dynamic loading, build-time only for slow-changing teams.
Mixing Strategies
Mature systems mix strategies: server-side render the shell and above-the-fold content, then hydrate or lazy-load interactive MFEs client-side.
Quick Check
Test your understanding of composition.
Recap
Recap: composition can be build-time (coupled), server- or edge-side (great first paint and SEO), or client-side (max independence) — and real systems blend them.
常见问题解答
「微前端的组合方式」课时是免费的吗？
是的 — 「微前端的组合方式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Micro Frontends Architecture with Module Federation 课程的其余内容，请升级到 CoddyKit PRO。 Micro Frontends Architecture with Module Federation 课程共包含 4 节课。
「微前端的组合方式」这节课中我会学到什么？
探索组合微前端的主要方式——构建时组合、服务器端组合和客户端组合，并了解每种方式的适用场景。 你通过在浏览器中直接运行的动手代码来练习 Micro Frontends Architecture with Module Federation，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Micro Frontends Architecture with Module Federation 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Micro Frontends Architecture with Module Federation 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「微前端的组合方式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Micro Frontends Architecture with Module Federation 课中编写并运行代码吗？
能。每节 Micro Frontends Architecture with Module Federation 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。