generator 的天然挂起特性是微前端懒加载的底层支撑，其 yield/next 机制实现按需触发、状态可溯、流程可控的跨应用资源加载，配合调度器统一管理时机、错误与上下文。
Generator 天然挂起特性是微前端懒加载的底层支撑
微前端中跨应用资源加载常面临时机不可控、依赖链断裂、错误隔离难等问题。Generator 的 yield 暂停 + next 恢复 机制，恰好提供了一种“按需触发、状态可溯、流程可控”的执行模型——它不主动执行异步逻辑，而是把加载动作封装为暂停点，由宿主应用在合适时机（如路由就绪、权限校验通过、网络空闲时）调用 next() 推进，从而将加载控制权从模块内部上收至架构层。
构建跨应用异步懒加载底座的核心设计
底座不是封装一个工具函数，而是定义一套可组合、可中断、可注入上下文的 Generator 协议：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
每个微应用注册一个 Generator 工厂函数，如
function* loadAppA() { yield fetchManifest(); yield loadScript('app-a.js'); yield mountApp(); }，每个yield对应一个可观察、可重试、可超时的原子操作 -
统一调度器接管 next 调用：调度器根据当前主应用状态（如是否已 hydration、是否处于后台 tab、是否启用离线模式）决定是否调用
next()，甚至可插入中间件（如鉴权检查、CDN 切换、灰度分流） -
yield 返回值约定为标准化加载元数据，例如
{ type: 'script', url: '...', integrity: '...' }，而非原始 Promise，使宿主能做预检（如 CSP 校验、SRI 验证）、缓存决策或降级处理 -
错误不抛出，而是 yield 错误态对象，如
yield { error: 'timeout', retry: true, fallback: 'stub-ui' }，让调度器统一处理重试、兜底、上报，避免子应用自行捕获破坏流程一致性
与现代微前端框架的协同方式
Generator 底座不替代 qiankun、Module Federation 或 import-map，而是增强其加载阶段的可控性：
- 在
loadMicroApp前，先运行对应 Generator 获取资源清单和加载策略，再交由框架原生机制加载，实现“策略前置，加载后置” - 配合 Webpack 5 的
ModuleFederationPlugin，Generator 可动态生成remote配置（如根据用户 region 切换 CDN 域名），yield 出配置对象供 runtime 使用 - 在 SSR 场景下，Generator 可被同步遍历（仅执行到首个 yield），提前获取首屏必需资源列表，注入 HTML，避免水合时竞态
- 结合浏览器
import(...)动态导入，Generator 的 yield 可返回带条件的 import 表达式字符串（如yield `./apps/${env}/app-a.mjs`），由调度器安全求值并加载
实际落地的关键细节
Generator 在此处的价值不在语法糖，而在执行语义的显式化：
- 每次
next()调用必须携带上下文参数（如next({ network: '4g', userRole: 'admin' })），供 yield 内部逻辑做决策，这是回调或 async/await 难以自然表达的双向通信 - Generator 实例需绑定生命周期，当微应用卸载时，应调用
return()终止未完成的 yield 链，清理定时器、abort controller 和事件监听器 - 避免在 yield 后直接 await，否则失去暂停能力；所有异步操作应封装为返回 Promise 的纯函数，由调度器统一 await 并传入结果给下一个
next(value) - 可利用
Symbol.asyncIterator扩展 Generator，支持for await...of消费异步加载流，用于渐进式渲染或流式组件注入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
