前言

写作动机

凌晨三点十七分。生产环境告警群炸了。

我盯着屏幕上那行刺眼的红字——"线上白屏，影响全量用户"——手指悬在键盘上方，大脑高速运转。三分钟前，订单子应用刚刚完成一次"无关紧要"的 CSS 样式升级，没有人想到，一个 .container { margin: 0 auto } 会以某种诡异的方式穿透沙箱，覆盖掉主应用的全局布局。导航栏消失了，侧边栏塌陷了，整个页面的骨架在一瞬间土崩瓦解。

/* 订单子应用的"无害"样式 */
.container {
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
/* 但主应用也有一个 .container —— 灾难开始了 */

那是 2023 年秋天，我所在团队维护的电商平台已经接入了六个子应用。我们选择了乾坤作为微前端框架，花了三个月完成了从单体到微前端的迁移。迁移过程中，团队信心满满——文档清晰、社区活跃、Demo 一跑就通。我们甚至在内部分享会上骄傲地展示了"五分钟接入一个新子应用"的能力。

然而，Demo 能跑通和生产环境能扛住，是两件完全不同的事。

那天凌晨的事故让我们付出了 47 分钟的线上白屏代价。复盘时发现根因简单得令人尴尬：乾坤的 strictStyleIsolation 在特定 Shadow DOM 场景下失效，而我们既没有阅读过这部分源码，也没有理解 CSS 隔离的底层机制。我们只是"用了"微前端，却从未真正"理解"它。

使用一个框架和理解一个框架之间的差距，犹如驾驶一辆车和能拆装发动机之间的差距。平时看不出区别——直到车在高速公路上抛锚。

那次事故之后，我开始系统性地阅读乾坤、single-spa、import-html-entry 的源码。一行一行地读，一个函数一个函数地追踪调用链。当我最终读懂 ProxySandbox 的 get 拦截器为什么要区分 window 和 self，读懂 processCSSLoading 为什么需要三次正则替换，读懂 reroute 函数那看似混乱的状态机背后藏着怎样精妙的并发控制——我意识到：

微前端不是一个"用就行了"的技术，它是一门需要深入理解的架构学科。

那颗种子在那个凌晨种下。而你正在阅读的，是它长出的果实。

为什么在 2026 年写这本书

"微前端"这个词诞生于 2016 年 ThoughtWorks 的技术雷达，至今已整整十年。十年间，这个领域经历了从概念探索到生产落地、从百花齐放到格局初定的完整周期。如果你在 2020 年搜索"微前端"，几乎所有结果都指向同一个答案：乾坤。

但 2026 年的微前端世界，已经不是乾坤一家独大的时代了。

三个关键变量改变了整个格局：

Module Federation 2.0 —— Webpack 5 引入的 Module Federation 开创了"编译时共享"的范式，而 2.0 版本在 Zack Jackson 的主导下，实现了跨构建工具（Webpack/Rspack/Vite）的统一运行时。这意味着你不再需要运行时沙箱来隔离子应用——模块联邦在编译阶段就解决了依赖共享和版本协商的问题。这是一次范式级的转变。

Rspack —— 字节跳动开源的基于 Rust 的构建工具，以 Webpack 兼容的 API 提供了 10-50 倍的构建速度提升。当构建时间从"等 3 分钟"变成"等 3 秒"，单体前端"构建慢"这个最常见的微前端动机之一被大幅削弱。Rspack 不是微前端框架，但它深刻地改变了微前端的决策方程式。

Wujie（无界） —— 腾讯开源的微前端方案，用 Web Components + iframe 的组合打出了一条全新路线。它没有走乾坤/single-spa 的运行时沙箱路线，而是利用 iframe 天然的隔离能力，再通过 Web Components 实现组件级的嵌入。优雅、简洁，且隔离性接近完美。

2016 ────── 2019 ────── 2022 ────── 2025 ────── 2026
  │           │           │           │           │
  概念提出    single-spa   乾坤2.x     MF 2.0     多方案并存
  ThoughtWorks  成熟       成为事实标准  Rspack 1.x  格局已变
                                      Wujie 成熟

在这个时间点写微前端架构书，恰好处于一个绝佳的观察窗口： 旧范式已经充分验证，新范式已经基本成型，而两者之间的张力——运行时隔离 vs 编译时共享、重沙箱 vs 轻隔离、框架绑定 vs 标准原生——正是理解微前端架构本质的最佳切入点。

下图展示了微前端技术方案的演进脉络与各方案的核心定位：

本书与其他微前端文章/书籍有何不同

市面上关于微前端的内容大致分为四类：

类别	典型内容	读完之后你会…
博客文章	某个框架的快速上手、踩坑记录、配置示例	知道怎么用，但不知道为什么这样设计
概念介绍书	微前端是什么、有哪些方案、架构图、决策树	能做技术选型，但遇到深层问题无从下手
单框架源码解读	逐行分析某一个框架的实现	深入理解了一个框架，但缺乏横向视野
本书	从源码层面横向剖析多个框架，揭示共性问题域与不同解法的设计权衡	理解微前端架构为什么这样演化，能独立评估任何方案

区别的核心在于：博客教你配置，概念书教你选择，单框架书教你一种实现，而本书教你理解问题本身。

下图以微前端的核心问题域为中心，展示了本书的知识结构与各章节的覆盖范围：

当你理解了 JS 隔离的本质是作用域代理，CSS 隔离的本质是样式边界，应用加载的本质是资源编排，通信的本质是事件总线与共享状态的权衡——你就不再需要"选框架"了。你会直接看到每个框架在这些维度上的设计取舍，然后做出真正基于理解的决策。

教你用乾坤的文章有一千篇。教你理解乾坤为什么这样设计、以及它的设计在什么条件下会失效的——几乎没有。

本书读者

这本书为五类读者而写：

前端架构师 —— 你需要为团队做微前端技术选型，或者设计大规模前端应用的架构。本书的横向对比表格和设计权衡分析，会成为你决策时的参考坐标系。每个方案的优势边界和失效条件，比"哪个更好"的简单结论更有价值。

资深前端工程师 —— 你已经在用乾坤或 single-spa，但遇到了文档覆盖不到的深层问题：沙箱逃逸、样式穿透、路由冲突、性能瓶颈。本书从源码层面解释这些问题的根因，不是告诉你"加个配置"，而是告诉你为什么那个配置能生效、什么时候它不能。

全栈工程师 —— 你同时负责前端和后端，需要理解微前端与微服务的异同，以及前端架构如何与后端部署策略协同。本书的架构分析采用系统思维视角，不局限于前端领域。

技术管理者 —— 你需要评估微前端是否适合你的团队和业务场景。第 1 章的"什么时候不该用微前端"和成本分析，会帮你避免盲目跟风的代价。

学生与研究者 —— 每章包含设计模式的系统性分析和框架横向对比，可作为论文引用和研究参考。章末思考题覆盖概念理解、实践应用和开放讨论三个层次。

不适合的读者：如果你在寻找一本"如何五分钟接入乾坤"的快速上手指南，这不是。本书假设读者已具备前端开发能力，想深入理解微前端架构的底层原理和设计哲学。

前提：具备 TypeScript/JavaScript 基础和现代前端开发经验（React/Vue/Angular 至少一种）。如果你使用过至少一个微前端框架，阅读会更加顺畅。

阅读路线图

本书支持多种阅读方式。你可以从第 1 章顺序通读，也可以根据自身情况选择快速路径：

路径	章节	适合
快速精华	前言 → 1 → 乾坤 JS 沙箱 → 乾坤 CSS 隔离	时间有限，2-3 小时获取核心架构洞察
乾坤深入	1 → 2 → 3 → 4 → 5	生产环境使用乾坤，想吃透每个细节
single-spa 专攻	1 → 6 → 7 → 8	理解微前端基座的底层路由与生命周期
架构决策	前言 → 1 → 各框架对比章节	架构师/技术管理者，关注选型与权衡
全景通读	按顺序从第 1 章读到最后	系统性学习者，建立完整知识体系

下图展示了不同阅读路径之间的关系与章节依赖：

工程师建议顺序通读，每章旁边打开源码，边读边调试。急性子直接翻到第 1 章乾坤 JS 隔离，那是整本书最精彩的起点之一。

源码与约定

本书涉及多个微前端框架的源码分析，以下是各框架的版本约定：

框架	版本	说明
乾坤 (qiankun)	2.x	当前生产环境最广泛使用的版本
single-spa	6.x	微前端基座的事实标准
Module Federation	2.0	跨构建工具的统一模块联邦
Rspack	1.x	高性能构建工具，MF 2.0 的重要载体

所有代码示例均从源码中提取，标注对应文件路径和行号。部分代码为可读性做了适度简化（去除边界检查、简化类型标注），但核心逻辑与设计意图始终忠实保留。

代码示例统一使用 TypeScript/JavaScript，所有框架的源码分析基于其 GitHub 仓库的对应版本 tag。

配套资源

• 本书在线版：book.yangyitao.com — 持续更新
• 勘误与反馈：在线版每章底部均可评论反馈

致谢

最深的谢意，献给乾坤、single-spa、Module Federation、Wujie 和所有微前端开源项目的贡献者。本书中剖析的每一个设计决策，都凝结着一线工程师在真实约束下解决真实问题的智慧。Evan You、Zack Jackson、kuitos——没有他们写下的那些代码，就没有这本书要讲的故事。

感谢微前端社区。从 ThoughtWorks 2016 年在技术雷达上首次提出这个概念，到今天形成多方案并存的成熟生态，这段旅程汇聚了无数人的贡献。每一篇博客、每一次技术分享、每一个 GitHub Issue 里的讨论，都在推动着这个领域向前。

感谢字节跳动 Web Infra 团队和 Rspack 社区。Rspack 不仅是一个构建工具，它重新定义了前端工程化的性能基线，间接改变了微前端的决策方程式。

感谢我的家人。写书的无数个深夜，是他们的理解与支持让我能够心无旁骛地沉浸在源码与架构的世界里。我的女儿还太小，不知道爸爸在做什么——但我希望有一天她会明白，那些深夜的键盘声，是一个父亲试图为世界留下一些有价值东西的声音。

感谢你，读者。在 AI 生成内容铺天盖地的 2026 年，选择一本源码级技术书籍，本身就是一种价值声明——你相信深度理解的力量，相信看懂源码比背诵 API 更重要。你翻开这本书的那一刻，就已经和我站在了同一边。

好的代码会被重写，好的架构会被传承，好的设计思想永不过时。

这本书不教你用框架——它教你理解框架背后的设计哲学。

这本书献给每一个在深夜读源码的人。

---

杨艺韬 2026 年春，北京