Generator 是状态快照调度器,通过编排子应用 mount/unmount 序列、捕获 serviceRegistry 快照、驱动组件级步进调试,实现可暂停/恢复/步进的确定性调试,但不替代 iframe/Proxy 等真实沙箱隔离机制。

Generator 本身不直接参与微前端沙箱的构建或回溯,但它可作为状态快照调度器,配合沙箱生命周期与事件流,实现可暂停、可恢复、可步进的调试控制逻辑。关键不在“用 Generator 模拟沙箱”,而在于用它编排子应用挂载/卸载/重放的执行序列,让调试过程具备确定性与可逆性。
用 Generator 管理子应用生命周期序列
微前端中每个子应用有 mount / unmount 钩子,但默认是单向执行。借助 Generator,可将一系列操作(如“加载 A → 挂载 A → 触发事件 → 卸载 A → 加载 B”)定义为可中断的流程:
- 定义一个 generator 函数,每 yield 一步对应一个明确的沙箱动作(例如
yield sandbox.mount(appA)) - 调试器通过调用
iterator.next()手动推进,每次只执行到下一个 yield,便于观察中间状态 - 结合
iterator.return()或自定义 reset 逻辑,可快速“回退”到上一有效挂载点(例如卸载当前 app 并重新挂载前一个)
配合 serviceRegistry 实现服务状态快照
主应用中维护的服务注册表(serviceRegistry)常含用户态、权限、消息总线等有状态服务。Generator 可用于按需捕获和还原这些服务的关键快照:
- 在每次 yield 前,调用
serviceRegistry.snapshot()记录当前服务实例的只读视图(如 auth token、当前路由、未确认消息列表) - 调试时,用
iterator.next()推进,同时同步 restore 对应快照,使子应用看到一致的服务上下文 - 避免直接 clone 整个 service 实例(可能含定时器、订阅等副作用),而是 snapshot 关键字段 + 提供 restore 接口
嵌入子应用上下文,支持组件级步进调试
若子应用基于 React,可在其顶层组件中注入一个由主应用提供的 debugStep 工具函数,该函数底层由 Generator 驱动:
立即学习“前端免费学习笔记(深入)”;
- 主应用暴露
createStepper(steps: Array<() => void>),返回 { next, reset, status } - 子应用在 useEffect 或自定义 Hook 中调用
stepper.next(),触发某段逻辑(如“模拟一次登录成功回调”、“触发一次错误边界捕获”) - 所有步骤隔离在 Generator 内部,不污染子应用自身状态管理,也不依赖全局变量
注意边界:Generator 不替代沙箱机制
Generator 是控制流工具,不是隔离层。它不能替代 iframe、Proxy 沙箱或 CSS Scoped 等真实隔离手段:
- 它不阻止子应用修改 window、污染全局样式或泄漏内存——这些仍需传统沙箱保障
- 它的价值在于让“已隔离”的行为变得可观察、可编排、可重现,把调试从“刷新看结果”变成“按 F10 逐帧验证”
- 若子应用使用模块联邦共享了状态对象,Generator 步进时需确保 shared 对象也参与快照/还原,否则会出现状态错位


















