微前端源码精讲

从乾坤到 Module Federation 2.0，从 JS 沙箱到 iframe 方案的复兴——深入每一个微前端方案的内核实现。

微前端的每一种方案，本质上都在回答同一组问题：远程代码怎么加载、全局变量怎么隔离、样式怎么不打架、应用之间怎么通信、路由归谁管、公共依赖怎么共享。 不同方案的差别不在"用不用"，而在这六道题各自选了哪个答案，以及为此付出了什么代价。

flowchart TB
  subgraph Q [微前端的六道题]
    direction LR
    Q1[加载] --- Q2[JS 隔离] --- Q3[CSS 隔离]
    Q4[通信] --- Q5[路由] --- Q6[依赖共享]
  end
  Q --> A1[乾坤 qiankun<br/>运行时加载 + 沙箱]
  Q --> A2[single-spa<br/>生命周期 + 路由劫持]
  Q --> A3[Module Federation<br/>构建期共享模块]
  Q --> A4[Web Components / 无界]
  A1 --> SB[三代沙箱<br/>快照 → 单实例 Proxy → fakeWindow]
  A3 --> MF[Container / Reference / Share<br/>版本协商]
  A1 --> SEL{选型}
  A2 --> SEL
  A3 --> SEL
  A4 --> SEL

这个专栏不站队。 每种方案都拆到源码——乾坤的三代沙箱怎么演进、import-html-entry 怎么把 HTML 拆成 scripts/styles/template、Module Federation 的 ContainerPlugin 与 SharePlugin 在构建期埋下什么、运行时又怎么协商共享依赖的版本——然后用一章专门讲选型：什么规模、什么组织结构、什么技术栈组合下该选哪个。

读完你能做到什么

用同一套坐标系评估任何微前端方案。 六大核心问题各自的解决策略谱系，以及它们之间的相互制约（第2章核心问题）。
手写三种 JS 沙箱。 快照沙箱的全量 diff、单实例代理沙箱的 Proxy 优化、多实例沙箱的 fakeWindow 设计，以及最重要的一节——沙箱的边界：哪些东西隔离不了（第4章 JS 沙箱）。
解决样式冲突。 Shadow DOM / Scoped CSS / 动态样式表三种策略的取舍，以及 import-html-entry 的源码剖析、子应用预加载与加载失败的容错重试（第5章 CSS 隔离）。
读懂 Module Federation 2.0。 Host / Remote / Shared / Exposes 四个概念、1.0 到 2.0 的架构跃迁、与运行时加载方案的本质区别、remoteEntry.js 到模块实例化的完整流程、共享依赖的版本协商（第9章 MF 哲学、第10章 MF 与 webpack、第11章 MF2 与 Rspack）。
理解 single-spa 的路由劫持。 生命周期协议与路由接管机制（第7章 single-spa 内核、第8章路由）。
做出能对老板解释的选型。 各方案的适用边界与代价对照（第14章其他方案、第15章选型）。
把它稳定跑在生产上。 部署与运维、性能优化，以及架构层面的设计模式与取舍（第16章 DevOps、第17章性能、第18章设计模式）。

适合谁读

正在拆巨石应用、或要把多个团队的应用拼起来的前端负责人。 选型那一章是为你写的。
要自己实现或改造微前端框架的工程师。 沙箱与 MF 插件那几章直接到源码。
被样式冲突、全局变量污染折磨过的人。 第 4、5 章讲的是这些问题的根。

不适合：想找"三步接入微前端"教程的读者——这里讲的是接入之后才会遇到的那些事。

源码版本

正文里的源码片段与文件路径，都以下面这些版本为核查基准。Module Federation 引用的是 module-federation/core 这个 monorepo，它按包分别打 tag、没有统一的仓库级版本号，所以钉的是 commit；其余五个仓库钉的是 tag：

仓库	版本	文中引用到的位置
module-federation/core	commit `80e9597`（2026-08-17）	`packages/enhanced/src/lib/container/ModuleFederationPlugin.ts`、`packages/enhanced/src/schemas/container/ModuleFederationPlugin.ts`、`packages/runtime-core/src/core.ts`、`packages/runtime-core/src/constant.ts`、`packages/runtime-core/src/remote/index.ts`、`packages/runtime-core/src/module/index.ts` 等
umijs/qiankun	`v2.10.16`（2.x 稳定线；3.0 仍是 rc）	`src/sandbox/snapshotSandbox.ts`、`src/sandbox/legacy/sandbox.ts`、`src/sandbox/proxySandbox.ts`、`src/sandbox/patchers/css.ts`、`src/loader.ts`、`src/apis.ts`、`src/globalState.ts`
kuitos/import-html-entry	`v1.17.0`	`src/index.js`（`importEntry` / `execScripts`）、`src/process-tpl.js`（`processTpl`）
webpack/webpack	`v5.109.2`	第 10 章拆 Module Federation 的 webpack 侧实现时引到的内部模块：`lib/container/`（`ContainerEntryModule`、`RemoteRuntimeModule`）、`lib/sharing/`（`ConsumeSharedModule`、`ConsumeSharedRuntimeModule`）、`lib/AsyncDependenciesBlock.js`、`lib/RuntimeGlobals.js`（`__webpack_require__.e` 等运行时全局量）
single-spa/single-spa	`v6.0.3`（独立分析对象，非乾坤的依赖版本——qiankun v2.10.16 的 `package.json:107` 声明的是 `single-spa: ^5.9.2`）	`src/applications/`（状态常量、`getAppChanges`）、`src/lifecycles/`、`src/navigation/`（`reroute.js`、`navigation-events.js`）、`src/parcels/`
Tencent/wujie	`v2.1.0`	`packages/wujie-core/src/`（`sandbox.ts`、`iframe.ts`、`shadow.ts`、`proxy.ts` 等）

git clone https://github.com/module-federation/core.git
cd core && git checkout 80e9597
# 其余五个仓库直接 checkout 对应 tag，例如：
git clone https://github.com/umijs/qiankun.git && cd qiankun && git checkout v2.10.16

正文大多按文件和符号名指路，行号只在少数地方给出（如第 11 章 core.ts 里 loadRemote 的位置、部分代码块首行的出处注释）——这些仓库重构频繁，符号名比行号活得久。读的时候用编辑器搜符号，不要数行。

qiankun、single-spa、无界的代码片段为了可读性做过删减（去掉了开发态日志、测试桩和边界分支），但类名、方法名与文件路径都与上表版本一致；拿别的版本对照可能对不上，尤其是 qiankun 3.0 rc 已把沙箱拆到了 @qiankunjs/sandbox 包里。

开始阅读

从前言开始你的学习之旅。

版权声明

欢迎分享本专栏的链接。引用少量内容用于评论、教学或研究时，请署名 杨艺韬 并附上原文链接。

微前端源码精讲

读完你能做到什么

适合谁读

目录

第一部分：微前端的本质

第二部分：运行时隔离方案——乾坤

第三部分：路由驱动方案——single-spa

第四部分：构建时声明、运行时共享——Module Federation

第五部分：其他方案与前沿

第六部分：工程实践

源码版本

开始阅读

版权声明