微前端源码精讲

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

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

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：

仓库	commit	文中引用到的位置
module-federation/core	`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`

git clone https://github.com/module-federation/core.git
cd core && git checkout 80e9597

正文里只有一处给了行号（core.ts 里 loadRemote 的位置），其余都按文件和符号名指路——这个仓库重构频繁，符号名比行号活得久。读的时候用编辑器搜符号，不要数行。

qiankun、single-spa、无界这三个方案，正文分析的是它们公开的设计与文档化行为（沙箱机制、生命周期、路由劫持），不逐行引用其源码，因此不在上表中。

开始阅读

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

版权声明

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

微前端源码精讲

读完你能做到什么

适合谁读

目录

第一部分：微前端的本质

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

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

第四部分：编译时共享方案——Module Federation

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

第六部分：工程实践

源码版本

开始阅读

版权声明