微前端接入全局 AI 助手：上下文隔离与生命周期回收

微前端接入全局 AI 助手上下文隔离与生命周期回收全局 AI 助手跨越多个子应用时真正麻烦的是事件订阅和上下文归属。路由切换后若旧连接没有释放就会重复消费消息。本文用主应用代理、命名空间和销毁钩子把生命周期说清楚。1. 产生工程落差的四大破坏点为什么在单体应用里好端端的 AI 助手放在微前端架构里就会惨烈翻车Window 假沙箱逃逸Sandbox Escape像 qiankun 的ProxySandbox虽然能拦截子应用对window全局变量的修改但如果大模型的 SDK 将 EventSource、WebSocket 实例或 Global Event Listener 挂载到了基座top window上子应用卸载时沙箱无法自动清理这些长连接。AI 上下文污染Context Pollution为了让 AI 识别当前页面业务子应用通常需要在全局 State 中注册currentBusinessContext。如果子应用卸载前没有严格执行 unmount 清理逻辑切换到新子应用后大模型依然带着旧子应用的敏感业务数据发起 Prompt 查询。CSS 沙箱穿透Style ContaminationAI Copilot 侧边栏通常挂载在基座 DOM 节点中为了跨子应用保持显示。当某些子应用使用了带有污染性的全局 CSS如button { box-sizing: content-box; }且未开启 Shadow DOM 隔离时AI 侧边栏的 UI 结构会被直接插烂。2. 架构设计主应用代理 隔离总线 生命周期防线为了解决微前端与 AI 能力集成的冲突不能允许各个子应用私自由连接大模型 Gateway。可以重构为“主应用单例代理 确定性 Event Bus 桥接 强制生命周期卸载” 的治理架构。该架构三大收口原则单例收口子应用不允许直接实例化大模型长连接应通过主应用暴露的EventBus进行订阅Shadow DOM 隔离AI Copilot 侧边栏使用 Shadow DOM 或 CSS Modules 强行隔离避免子应用样式污染生命周期强契约在微前端unmount生命周期中强制触发上下文清空与未完成请求的abort()截断。3. 核心实现微前端全局 AI Context 隔离总线以下是使用 TypeScript 实现的微前端 AI 上下文安全总线与长连接管理器代码export interface BusinessContext { appId: string; pageRoute: string; payload: Recordstring, any; } export class MicroAiBridge { private static instance: MicroAiBridge; private currentContext: BusinessContext | null null; private activeController: AbortController | null null; private listeners: Set(data: string) void new Set(); private constructor() { // 监听微前端路由切换事件作为兜底二次防护 window.addEventListener(single-spa:before-routing-event, () { this.handleRouteShutdown(); }); } public static getInstance(): MicroAiBridge { if (!MicroAiBridge.instance) { MicroAiBridge.instance new MicroAiBridge(); } return MicroAiBridge.instance; } /** * 子应用 mount 时注册业务上下文 */ public registerContext(context: BusinessContext): void { console.log([Micro AI Bridge] 子应用 [${context.appId}] 已成功挂载 AI 上下文); this.currentContext context; } /** * 子应用 unmount 或切换路由时强制注销与中断连接 */ public unregisterContext(appId: string): void { if (this.currentContext?.appId appId) { console.log([Micro AI Bridge] 检测到子应用 [${appId}] 卸载强制清空上下文与中断长连接); this.handleRouteShutdown(); } } /** * 强行中断当前未完成的大模型请求与上下文 */ private handleRouteShutdown(): void { if (this.activeController) { this.activeController.abort(); // 阻断 SSE 流传输 this.activeController null; console.warn([Micro AI Bridge] 动态切页未完成的 AI 请求已强行 Abort 截断); } this.currentContext null; this.listeners.clear(); } /** * 统一由主应用发起的带上下文 AI 流式调用 */ public async requestAiStream( userPrompt: string, onChunk: (chunk: string) void ): Promisevoid { // 如果没有子应用上下文拒绝盲目请求 if (!this.currentContext) { console.warn([Micro AI Bridge] 当前无有效子应用上下文拒绝发起 AI 请求); return; } // 挂载新的 AbortController this.activeController new AbortController(); try { const response await fetch(/api/ai/v1/stream, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ prompt: userPrompt, context: this.currentContext // 附带安全的当前子应用上下文 }), signal: this.activeController.signal }); if (!response.body) return; const reader response.body.getReader(); const decoder new TextDecoder(); while (true) { const { done, value } await reader.read(); if (done) break; const chunk decoder.decode(value, { stream: true }); onChunk(chunk); } } catch (err: any) { if (err.name AbortError) { console.log([Micro AI Bridge] 流式请求已正常响应 Abort 中断信号); } else { console.error([Micro AI Bridge] 流式请求异常:, err); } } finally { this.activeController null; } } }4. 用同一组故障注入验证生命周期边界准备固定路由、提问和样式污染用例分别测试未设置隔离策略与加入隔离策略的版本验证维度注入方式观察指标通过条件子应用切换按固定序列反复挂载与卸载活跃监听器、SSE 连接和内存卸载后资源回到基线区间跨子应用 AI 提问在订单与 CRM 路由间切换提问请求携带的应用 ID 与上下文每次只携带当前应用上下文UI 样式隔离子应用注入同名全局选择器主应用关键组件快照主应用样式不受该选择器影响Gateway 负载重放相同请求序列QPS、P99、连接数和错误率不越过事先定义的服务预算5. 总结在微前端这种高度复杂的解耦架构中落座 AI 智能化能力不能被简易 Demo 带来的表象所欺骗。将 HTTP/SSE 连接、DOM 隔离和上下文清理放在职责明确的生命周期管理层。子应用执行unmount后用自动化断言检查监听器、连接和上下文是否释放不能只依赖约定。