乾坤（qiankun）沙箱机制学习记录

概述

乾坤（qiankun）是阿里巴巴开源的微前端框架，基于 single-spa 封装，提供了开箱即用的微前端解决方案。

其最核心的技术之一就是沙箱机制，沙箱机制旨在确保多个微应用同时运行时，它们的 JavaScript 执行和 CSS 样式不会相互污染，从而提供一个安全、隔离的运行时环境。

什么是沙箱？

沙箱（Sandbox）是一种安全机制，用于在受控环境中执行代码，防止恶意或有问题的代码影响系统的其他部分，沙箱主要分为两大类：JS 沙箱 和 样式（CSS）沙箱。

在微前端场景中，沙箱主要解决以下问题：

  • 全局变量污染：防止不同微应用的全局变量相互影响
  • DOM 污染：隔离 DOM 操作，防止样式和事件冲突
  • 副作用管理：确保微应用卸载时能完全清理副作用
  • 运行时隔离：为每个微应用提供独立的执行环境

乾坤沙箱演进历程

乾坤的沙箱机制经历了几个版本的演进：

1. SnapshotSandbox（快照沙箱）

  • 适用场景：不支持 Proxy 的旧版浏览器
  • 实现原理：通过记录和恢复 window 对象的快照
  • 优缺点：兼容性好但性能较差，无法支持多实例

2. LegacySandbox（遗留沙箱）

  • 适用场景：支持 Proxy 但不支持多实例的场景
  • 实现原理：使用 Proxy 代理 window 对象
  • 优缺点：性能好但仍然无法支持多实例

3. ProxySandbox（代理沙箱）

  • 适用场景：现代浏览器，支持多实例
  • 实现原理：为每个微应用创建独立的代理对象
  • 优缺点：性能最佳，支持多实例并发

沙箱实现原理详解

1. SnapshotSandbox 快照沙箱

快照沙箱是最简单的实现方式，通过在微应用激活前记录 window 状态，卸载时恢复状态来实现隔离。

  1. /**
  2.  * 快照沙箱实现
  3.  */
  4. class SnapshotSandbox {
  5.   constructor(name) {
  6.     this.name = name
  7.     this.modifyPropsMap = {} // 记录被修改的属性
  8.     this.active = false
  9.   }
  11.   /**
  12.    * 激活沙箱
  13.    */
  14.   active() {
  15.     if (this.active) return
  17.     // 记录当前 window 状态快照
  18.     this.windowSnapshot = {}
  19.     
  20.     // 遍历 window 对象的所有属性
  21.     for (const prop in window) {
  22.       if (window.hasOwnProperty(prop)) {
  23.         this.windowSnapshot[prop] = window[prop]
  24.       }
  25.     }
  27.     // 注意这里是 modifyPropsMap，在组件被二次激活时，需要恢复之前的修改
  28.     Object.keys(this.modifyPropsMap).forEach(p => {
  29.       window[p] = this.modifyPropsMap[p]
  30.     })
  32.     this.active = true
  33.   }
  35.   /**
  36.    * 失活沙箱
  37.    */
  38.   inactive() {
  39.     if (!this.active) return
  41.     // 记录被修改的属性
  42.     this.modifyPropsMap = {}
  43.     
  44.     // 比较当前 window 与快照的差异
  45.     for (const prop in window) {
  46.       if (window.hasOwnProperty(prop)) {
  47.         if (window[prop] !== this.windowSnapshot[prop]) {
  48.           // 记录被修改的属性，以便组件再次被激活时，反向恢复属性
  49.           this.modifyPropsMap[prop] = window[prop]
  50.           // 恢复原始值，使用记录的镜像值覆盖被修改的属性
  51.           window[prop] = this.windowSnapshot[prop]
  52.         }
  53.       }
  54.     }
  56.     // 清理新增的属性
  57.     for (const prop in window) {
  58.       if (window.hasOwnProperty(prop) && !(prop in this.windowSnapshot)) {
  59.         // 记录新增的属性（值为 undefined 表示需要删除？）
  60.         // this.modifyPropsMap[prop] = undefined
  61.         delete window[prop]
  62.       }
  63.     }
  65.     this.active = false
  66.   }
  67. }
  69. // 使用示例
  70. const sandbox = new SnapshotSandbox('app1')
  72. // 激活沙箱
  73. sandbox.active()
  75. // 微应用在沙箱中运行，但是实际更改的还是window对象的属性，只是在沙箱失活时会将其恢复
  76. window.customGlobalVar = 'app1-value'
  77. window.APP_NAME = 'MicroApp1'
  79. // 失活沙箱（自动恢复 window 状态）
  80. sandbox.inactive()
  81. // 沙箱失活后，快照沙箱会自动清理所有属性
  82. console.log(window.customGlobalVar) // undefined
  83. console.log(window.APP_NAME) // undefined
JavaScript复制

快照沙箱的特点

优点：

  • 实现简单，容易理解
  • 兼容性好，支持所有浏览器
  • 能完全隔离 window 对象的修改

缺点：

  • 性能较差，需要遍历整个 window 对象
  • 无法支持多实例并行运行
  • 对于属性很多的 window 对象，内存占用较大

2. LegacySandbox 遗留沙箱

遗留沙箱使用 ES6 的 Proxy 特性来代理 window 对象，相比快照沙箱有更好的性能。

  1. /**
  2.  * 遗留沙箱实现
  3.  */
  4. class LegacySandbox {
  5.   constructor(name) {
  6.     this.name = name
  7.     this.active = false
  8.     
  9.     // 记录沙箱期间新增的全局变量
  10.     this.addedPropsMapInSandbox = new Map()
  11.     
  12.     // 记录沙箱期间被修改的全局变量
  13.     this.modifiedPropsOriginalValueMapInSandbox = new Map()
  14.     
  15.     // 记录沙箱期间被修改但在沙箱外部也被修改的全局变量
  16.     this.currentUpdatedPropsValueMapInSandbox = new Map()
  17.     
  18.     // 创建 Proxy 代理
  19.     this.proxy = new Proxy(window, {
  20.       get: (target, prop) => {
  21.         return target[prop]
  22.       },
  23.       
  24.       set: (target, prop, value) => {
  25.         if (this.active) {
  26.           // 如果当前属性不存在，记录为新增属性
  27.           if (!(prop in target)) {
  28.             this.addedPropsMapInSandbox.set(prop, value)
  29.           } 
  30.           // 如果当前属性存在且之前没有被修改过，记录原始值
  31.           else if (!this.modifiedPropsOriginalValueMapInSandbox.has(prop)) {
  32.             this.modifiedPropsOriginalValueMapInSandbox.set(prop, target[prop])
  33.           }
  34.           
  35.           // 记录当前修改的值
  36.           this.currentUpdatedPropsValueMapInSandbox.set(prop, value)
  37.         }
  38.         
  39.         // 设置属性值
  40.         target[prop] = value
  41.         return true
  42.       },
  43.       
  44.       deleteProperty: (target, prop) => {
  45.         if (this.active) {
  46.           // 如果属性存在，记录删除操作
  47.           if (prop in target) {
  48.             this.addedPropsMapInSandbox.delete(prop)
  49.             this.currentUpdatedPropsValueMapInSandbox.delete(prop)
  50.             
  51.             if (!this.modifiedPropsOriginalValueMapInSandbox.has(prop)) {
  52.               this.modifiedPropsOriginalValueMapInSandbox.set(prop, target[prop])
  53.             }
  54.           }
  55.         }
  56.         
  57.         delete target[prop]
  58.         return true
  59.       }
  60.     })
  61.   }
  63.   /**
  64.    * 激活沙箱
  65.    */
  66.   active() {
  67.     if (this.active) return
  68.     
  69.     // 恢复沙箱期间的修改
  70.     this.currentUpdatedPropsValueMapInSandbox.forEach((value, prop) => {
  71.       window[prop] = value
  72.     })
  73.     
  74.     this.active = true
  75.   }
  77.   /**
  78.    * 失活沙箱
  79.    */
  80.   inactive() {
  81.     if (!this.active) return
  82.     
  83.     // 删除新增的属性
  84.     this.addedPropsMapInSandbox.forEach((_, prop) => {
  85.       delete window[prop]
  86.     })
  87.     
  88.     // 恢复被修改属性的原始值
  89.     this.modifiedPropsOriginalValueMapInSandbox.forEach((value, prop) => {
  90.       window[prop] = value
  91.     })
  92.     
  93.     this.active = false
  94.   }
  95. }
  97. // 使用示例
  98. const legacySandbox = new LegacySandbox('app1')
  100. // 激活沙箱
  101. legacySandbox.active()
  103. // 通过代理对象操作全局变量
  104. legacySandbox.proxy.customVar = 'legacy-value'
  105. legacySandbox.proxy.existingVar = 'modified-value'
  107. // 失活沙箱
  108. legacySandbox.inactive()
  110. console.log(window.customVar) // undefined
  111. console.log(window.existingVar) // 恢复原始值
JavaScript复制

遗留沙箱的特点

优点：

  • 性能比快照沙箱好，只记录变化的属性
  • 使用 Proxy 可以精确拦截属性操作
  • 支持属性的增删改查操作

缺点：

  • 仍然直接操作 window 对象，无法支持多实例
  • 需要浏览器支持 Proxy（IE11+ 及现代浏览器）

3. ProxySandbox 代理沙箱

代理沙箱是乾坤最新的沙箱实现，为每个微应用创建一个独立的代理对象，真正实现了多实例隔离。

  1. /**
  2.  * 代理沙箱实现
  3.  */
  4. class ProxySandbox {
  5.   constructor(name) {
  6.     this.name = name
  7.     this.active = false
  8.     
  9.     // 沙箱的私有变量存储
  10.     this.fakeWindow = {}
  11.     
  12.     // 记录哪些属性是沙箱私有的
  13.     this.propertiesWithGetter = new Map()
  14.     
  15.     // 创建代理对象
  16.     this.proxy = new Proxy(this.fakeWindow, {
  17.       get: (target, prop) => {
  18.         // 如果沙箱处于激活状态
  19.         if (this.active) {
  20.           // 优先从沙箱私有变量中获取
  21.           if (prop in target) {
  22.             return target[prop]
  23.           }
  24.           
  25.           // 如果沙箱中没有，则从 window 获取
  26.           const value = window[prop]
  27.           
  28.           // 如果是函数，需要绑定正确的 this
  29.           if (typeof value === 'function') {
  30.             // 对于 window 上的函数，绑定 window 作为 this
  31.             const boundValue = value.bind(window)
  32.             
  33.             // 缓存绑定后的函数，避免重复绑定
  34.             target[prop] = boundValue
  35.             return boundValue
  36.           }
  37.           
  38.           return value
  39.         }
  40.         
  41.         // 沙箱未激活时，直接返回 window 上的值
  42.         return window[prop]
  43.       },
  44.       
  45.       set: (target, prop, value) => {
  46.         if (this.active) {
  47.           // 检查是否是 window 的原生属性
  48.           if (this.isWindowProperty(prop)) {
  49.             // 如果是 window 的原生属性，直接设置到 window
  50.             window[prop] = value
  51.           } else {
  52.             // 否则设置到沙箱的私有空间
  53.             target[prop] = value
  54.           }
  55.         } else {
  56.           // 沙箱未激活时，直接设置到 window
  57.           window[prop] = value
  58.         }
  59.         
  60.         return true
  61.       },
  62.       
  63.       deleteProperty: (target, prop) => {
  64.         if (this.active) {
  65.           if (prop in target) {
  66.             delete target[prop]
  67.           } else if (prop in window) {
  68.             delete window[prop]
  69.           }
  70.         } else {
  71.           delete window[prop]
  72.         }
  73.         
  74.         return true
  75.       },
  76.       
  77.       has: (target, prop) => {
  78.         return prop in target || prop in window
  79.       },
  80.       
  81.       ownKeys: (target) => {
  82.         return [...Object.getOwnPropertyNames(target), ...Object.getOwnPropertyNames(window)]
  83.       },
  84.       
  85.       getOwnPropertyDescriptor: (target, prop) => {
  86.         if (prop in target) {
  87.           return Object.getOwnPropertyDescriptor(target, prop)
  88.         }
  89.         
  90.         if (prop in window) {
  91.           return Object.getOwnPropertyDescriptor(window, prop)
  92.         }
  93.         
  94.         return undefined
  95.       }
  96.     })
  97.   }
  99.   /**
  100.    * 判断属性是否为 window 的原生属性
  101.    */
  102.   isWindowProperty(prop) {
  103.     // 这里可以根据具体需求判断
  104.     // 例如：document, location, navigator 等应该直接操作 window
  105.     const windowProperties = [
  106.       'document', 'location', 'navigator', 'history', 'screen',
  107.       'alert', 'confirm', 'prompt', 'setTimeout', 'clearTimeout',
  108.       'setInterval', 'clearInterval', 'requestAnimationFrame',
  109.       'cancelAnimationFrame', 'fetch', 'XMLHttpRequest'
  110.     ]
  111.     
  112.     return windowProperties.includes(prop) || 
  113.            prop.startsWith('webkit') || 
  114.            prop.startsWith('moz') || 
  115.            prop.startsWith('ms')
  116.   }
  118.   /**
  119.    * 激活沙箱
  120.    */
  121.   active() {
  122.     this.active = true
  123.   }
  125.   /**
  126.    * 失活沙箱
  127.    */
  128.   inactive() {
  129.     this.active = false
  130.   }
  131.   
  132.   /**
  133.    * 获取沙箱的全局代理对象
  134.    */
  135.   getProxy() {
  136.     return this.proxy
  137.   }
  138. }
  140. // 使用示例
  141. const proxySandbox1 = new ProxySandbox('app1')
  142. const proxySandbox2 = new ProxySandbox('app2')
  144. // 激活两个沙箱
  145. proxySandbox1.active()
  146. proxySandbox2.active()
  148. // 在不同沙箱中设置同名变量
  149. const proxy1 = proxySandbox1.getProxy()
  150. const proxy2 = proxySandbox2.getProxy()
  152. proxy1.customVar = 'value-from-app1'
  153. proxy2.customVar = 'value-from-app2'
  155. console.log(proxy1.customVar) // 'value-from-app1'
  156. console.log(proxy2.customVar) // 'value-from-app2'
  157. console.log(window.customVar) // undefined
  159. // 访问 window 原生属性
  160. console.log(proxy1.document === window.document) // true
  161. console.log(proxy2.location === window.location) // true
JavaScript复制

代理沙箱的特点

优点：

  • 真正实现了多实例隔离，多个微应用可以并行运行
  • 性能最佳，每个沙箱只维护自己的变量
  • 提供了最完整的 JavaScript 沙箱能力

缺点：

  • 实现复杂度最高
  • 需要浏览器支持 Proxy 和 Reflect

乾坤沙箱源码学习

沙箱工厂函数

乾坤根据浏览器能力和配置自动选择合适的沙箱实现：

  1. /**
  2.  * 乾坤沙箱创建工厂
  3.  */
  4. function createSandbox(appName, elementGetter, scopedCSS, useLooseSandbox) {
  5.   let sandbox
  6.   
  7.   // 检查浏览器对 Proxy 的支持
  8.   if (window.Proxy) {
  9.     // 如果需要严格沙箱且支持 Proxy，使用 ProxySandbox
  10.     if (!useLooseSandbox) {
  11.       sandbox = new ProxySandbox(appName)
  12.     } else {
  13.       // 否则使用 LegacySandbox（向后兼容）
  14.       sandbox = new LegacySandbox(appName)
  15.     }
  16.   } else {
  17.     // 不支持 Proxy 的情况下使用 SnapshotSandbox
  18.     sandbox = new SnapshotSandbox(appName)
  19.   }
  20.   
  21.   return sandbox
  22. }
  24. /**
  25.  * 沙箱管理器
  26.  */
  27. class SandboxManager {
  28.   constructor() {
  29.     this.sandboxes = new Map()
  30.   }
  31.   
  32.   /**
  33.    * 创建沙箱
  34.    */
  35.   createSandbox(appName, options = {}) {
  36.     if (this.sandboxes.has(appName)) {
  37.       return this.sandboxes.get(appName)
  38.     }
  39.     
  40.     const sandbox = createSandbox(
  41.       appName,
  42.       options.elementGetter,
  43.       options.scopedCSS,
  44.       options.useLooseSandbox
  45.     )
  46.     
  47.     this.sandboxes.set(appName, sandbox)
  48.     return sandbox
  49.   }
  50.   
  51.   /**
  52.    * 激活沙箱
  53.    */
  54.   activateSandbox(appName) {
  55.     const sandbox = this.sandboxes.get(appName)
  56.     if (sandbox) {
  57.       sandbox.active()
  58.       return sandbox.proxy || window
  59.     }
  60.     return window
  61.   }
  62.   
  63.   /**
  64.    * 失活沙箱
  65.    */
  66.   deactivateSandbox(appName) {
  67.     const sandbox = this.sandboxes.get(appName)
  68.     if (sandbox) {
  69.       sandbox.inactive()
  70.     }
  71.   }
  72.   
  73.   /**
  74.    * 销毁沙箱
  75.    */
  76.   destroySandbox(appName) {
  77.     const sandbox = this.sandboxes.get(appName)
  78.     if (sandbox) {
  79.       sandbox.inactive()
  80.       this.sandboxes.delete(appName)
  81.     }
  82.   }
  83. }
  85. // 乾坤全局沙箱管理器
  86. const sandboxManager = new SandboxManager()
  88. export { sandboxManager, createSandbox }
JavaScript复制

沙箱与微应用生命周期整合

  1. /**
  2.  * 微应用生命周期管理
  3.  */
  4. class MicroAppLifecycle {
  5.   constructor(appName, options) {
  6.     this.appName = appName
  7.     this.options = options
  8.     this.sandbox = null
  9.     this.globalProxy = null
  10.   }
  11.   
  12.   /**
  13.    * 微应用挂载前
  14.    */
  15.   async beforeMount() {
  16.     // 创建沙箱
  17.     this.sandbox = sandboxManager.createSandbox(this.appName, this.options)
  18.     
  19.     // 激活沙箱并获取全局代理对象
  20.     this.globalProxy = sandboxManager.activateSandbox(this.appName)
  21.     
  22.     console.log(`${this.appName} 沙箱已激活`)
  23.   }
  24.   
  25.   /**
  26.    * 微应用挂载
  27.    */
  28.   async mount() {
  29.     // 在沙箱环境中执行微应用的挂载逻辑
  30.     const originalWindow = window
  31.     
  32.     try {
  33.       // 临时替换全局 window 对象
  34.       if (this.globalProxy && this.globalProxy !== window) {
  35.         // 这里需要通过特殊方式注入 globalProxy
  36.         // 实际实现会更复杂，涉及到模块加载器的改造
  37.       }
  38.       
  39.       // 执行微应用挂载逻辑
  40.       await this.executeAppMount()
  41.       
  42.     } finally {
  43.       // 恢复原始 window 对象
  44.       // window = originalWindow
  45.     }
  46.   }
  47.   
  48.   /**
  49.    * 微应用卸载
  50.    */
  51.   async unmount() {
  52.     // 执行微应用卸载逻辑
  53.     await this.executeAppUnmount()
  54.     
  55.     // 失活沙箱
  56.     sandboxManager.deactivateSandbox(this.appName)
  57.     
  58.     console.log(`${this.appName} 沙箱已失活`)
  59.   }
  60.   
  61.   /**
  62.    * 微应用销毁
  63.    */
  64.   async destroy() {
  65.     // 销毁沙箱
  66.     sandboxManager.destroySandbox(this.appName)
  67.     
  68.     console.log(`${this.appName} 沙箱已销毁`)
  69.   }
  70.   
  71.   /**
  72.    * 执行微应用挂载（需要在沙箱环境中）
  73.    */
  74.   async executeAppMount() {
  75.     // 这里会加载并执行微应用的 JavaScript 代码
  76.     // 实际实现涉及到模块加载、代码执行等复杂逻辑
  77.   }
  78.   
  79.   /**
  80.    * 执行微应用卸载
  81.    */
  82.   async executeAppUnmount() {
  83.     // 这里会执行微应用的清理逻辑
  84.   }
  85. }
  87. // 使用示例
  88. const microApp = new MicroAppLifecycle('my-micro-app', {
  89.   useLooseSandbox: false,
  90.   scopedCSS: true
  91. })
  93. // 微应用生命周期调用
  94. async function runMicroApp() {
  95.   await microApp.beforeMount()
  96.   await microApp.mount()
  97.   
  98.   // 模拟应用运行一段时间
  99.   setTimeout(async () => {
  100.     await microApp.unmount()
  101.     await microApp.destroy()
  102.   }, 5000)
  103. }
JavaScript复制

沙箱的高级特性

1. 副作用清理

乾坤沙箱不仅隔离全局变量，还会自动清理微应用产生的副作用：

  1. /**
  2.  * 副作用收集器
  3.  */
  4. class SideEffectCollector {
  5.   constructor() {
  6.     this.effects = []
  7.   }
  8.   
  9.   /**
  10.    * 收集定时器副作用
  11.    */
  12.   patchTimer() {
  13.     const originalSetTimeout = window.setTimeout
  14.     const originalSetInterval = window.setInterval
  15.     const originalClearTimeout = window.clearTimeout
  16.     const originalClearInterval = window.clearInterval
  17.     
  18.     const timers = new Set()
  19.     
  20.     // 代理 setTimeout
  21.     window.setTimeout = (callback, delay, ...args) => {
  22.       const timer = originalSetTimeout(callback, delay, ...args)
  23.       timers.add(timer)
  24.       return timer
  25.     }
  26.     
  27.     // 代理 setInterval
  28.     window.setInterval = (callback, delay, ...args) => {
  29.       const timer = originalSetInterval(callback, delay, ...args)
  30.       timers.add(timer)
  31.       return timer
  32.     }
  33.     
  34.     // 代理 clearTimeout
  35.     window.clearTimeout = (timer) => {
  36.       timers.delete(timer)
  37.       return originalClearTimeout(timer)
  38.     }
  39.     
  40.     // 代理 clearInterval
  41.     window.clearInterval = (timer) => {
  42.       timers.delete(timer)
  43.       return originalClearInterval(timer)
  44.     }
  45.     
  46.     // 记录恢复函数
  47.     this.effects.push(() => {
  48.       // 清理所有未清理的定时器
  49.       timers.forEach(timer => {
  50.         originalClearTimeout(timer)
  51.         originalClearInterval(timer)
  52.       })
  53.       
  54.       // 恢复原始函数
  55.       window.setTimeout = originalSetTimeout
  56.       window.setInterval = originalSetInterval
  57.       window.clearTimeout = originalClearTimeout
  58.       window.clearInterval = originalClearInterval
  59.     })
  60.   }
  61.   
  62.   /**
  63.    * 收集事件监听器副作用
  64.    */
  65.   patchEventListener() {
  66.     const originalAddEventListener = window.addEventListener
  67.     const originalRemoveEventListener = window.removeEventListener
  68.     
  69.     const listeners = new Map()
  70.     
  71.     // 代理 addEventListener
  72.     window.addEventListener = (type, listener, options) => {
  73.       const key = { type, listener, options }
  74.       listeners.set(key, { type, listener, options })
  75.       return originalAddEventListener.call(window, type, listener, options)
  76.     }
  77.     
  78.     // 代理 removeEventListener
  79.     window.removeEventListener = (type, listener, options) => {
  80.       const key = Array.from(listeners.keys()).find(k => 
  81.         k.type === type && k.listener === listener && k.options === options
  82.       )
  83.       if (key) {
  84.         listeners.delete(key)
  85.       }
  86.       return originalRemoveEventListener.call(window, type, listener, options)
  87.     }
  88.     
  89.     // 记录恢复函数
  90.     this.effects.push(() => {
  91.       // 清理所有未清理的事件监听器
  92.       listeners.forEach(({ type, listener, options }) => {
  93.         originalRemoveEventListener.call(window, type, listener, options)
  94.       })
  95.       
  96.       // 恢复原始函数
  97.       window.addEventListener = originalAddEventListener
  98.       window.removeEventListener = originalRemoveEventListener
  99.     })
  100.   }
  101.   
  102.   /**
  103.    * 收集 DOM 变更副作用
  104.    */
  105.   patchDOMChanges() {
  106.     const addedNodes = new Set()
  107.     const modifiedAttributes = new Map()
  108.     
  109.     // 监控 DOM 变更
  110.     const observer = new MutationObserver(mutations => {
  111.       mutations.forEach(mutation => {
  112.         if (mutation.type === 'childList') {
  113.           mutation.addedNodes.forEach(node => {
  114.             if (node.nodeType === Node.ELEMENT_NODE) {
  115.               addedNodes.add(node)
  116.             }
  117.           })
  118.         } else if (mutation.type === 'attributes') {
  119.           if (!modifiedAttributes.has(mutation.target)) {
  120.             modifiedAttributes.set(mutation.target, new Map())
  121.           }
  122.           modifiedAttributes.get(mutation.target).set(
  123.             mutation.attributeName,
  124.             mutation.oldValue
  125.           )
  126.         }
  127.       })
  128.     })
  129.     
  130.     observer.observe(document, {
  131.       childList: true,
  132.       subtree: true,
  133.       attributes: true,
  134.       attributeOldValue: true
  135.     })
  136.     
  137.     // 记录恢复函数
  138.     this.effects.push(() => {
  139.       // 停止监控
  140.       observer.disconnect()
  141.       
  142.       // 清理新增的 DOM 节点
  143.       addedNodes.forEach(node => {
  144.         if (node.parentNode) {
  145.           node.parentNode.removeChild(node)
  146.         }
  147.       })
  148.       
  149.       // 恢复被修改的属性
  150.       modifiedAttributes.forEach((attrs, element) => {
  151.         attrs.forEach((oldValue, attrName) => {
  152.           if (oldValue === null) {
  153.             element.removeAttribute(attrName)
  154.           } else {
  155.             element.setAttribute(attrName, oldValue)
  156.           }
  157.         })
  158.       })
  159.     })
  160.   }
  161.   
  162.   /**
  163.    * 应用所有补丁
  164.    */
  165.   applyPatches() {
  166.     this.patchTimer()
  167.     this.patchEventListener()
  168.     this.patchDOMChanges()
  169.   }
  170.   
  171.   /**
  172.    * 清理所有副作用
  173.    */
  174.   cleanup() {
  175.     this.effects.forEach(effect => effect())
  176.     this.effects = []
  177.   }
  178. }
  180. /**
  181.  * 增强的代理沙箱，集成副作用管理
  182.  */
  183. class EnhancedProxySandbox extends ProxySandbox {
  184.   constructor(name) {
  185.     super(name)
  186.     this.sideEffectCollector = new SideEffectCollector()
  187.   }
  188.   
  189.   active() {
  190.     super.active()
  191.     // 应用副作用收集补丁
  192.     this.sideEffectCollector.applyPatches()
  193.   }
  194.   
  195.   inactive() {
  196.     // 清理副作用
  197.     this.sideEffectCollector.cleanup()
  198.     super.inactive()
  199.   }
  200. }
JavaScript复制

2. CSS 隔离

乾坤也提供了 CSS 隔离机制：

  1. /**
  2.  * CSS 沙箱实现
  3.  */
  4. class CSSSandbox {
  5.   constructor(appName, container) {
  6.     this.appName = appName
  7.     this.container = container
  8.     this.dynamicStyleSheets = new Set()
  9.     this.modifiedStyles = new Map()
  10.   }
  11.   
  12.   /**
  13.    * 激活 CSS 沙箱
  14.    */
  15.   activate() {
  16.     this.patchDynamicCSS()
  17.     this.scopeStaticCSS()
  18.   }
  19.   
  20.   /**
  21.    * 处理动态添加的样式
  22.    */
  23.   patchDynamicCSS() {
  24.     const originalCreateElement = document.createElement
  25.     const originalAppendChild = Node.prototype.appendChild
  26.     const originalInsertBefore = Node.prototype.insertBefore
  27.     
  28.     // 代理 createElement
  29.     document.createElement = (tagName) => {
  30.       const element = originalCreateElement.call(document, tagName)
  31.       
  32.       if (tagName.toLowerCase() === 'style') {
  33.         this.dynamicStyleSheets.add(element)
  34.       }
  35.       
  36.       return element
  37.     }
  38.     
  39.     // 代理 appendChild
  40.     Node.prototype.appendChild = function(child) {
  41.       if (child.tagName === 'STYLE' || child.tagName === 'LINK') {
  42.         this.dynamicStyleSheets.add(child)
  43.         
  44.         // 为动态样式添加作用域
  45.         this.scopeStyleSheet(child)
  46.       }
  47.       
  48.       return originalAppendChild.call(this, child)
  49.     }
  50.     
  51.     // 记录原始函数用于恢复
  52.     this.restoreFunctions = () => {
  53.       document.createElement = originalCreateElement
  54.       Node.prototype.appendChild = originalAppendChild
  55.       Node.prototype.insertBefore = originalInsertBefore
  56.     }
  57.   }
  58.   
  59.   /**
  60.    * 为样式表添加作用域
  61.    */
  62.   scopeStyleSheet(styleElement) {
  63.     // 添加特殊的属性前缀，防止样式冲突
  64.     const appSelector = `[data-qiankun="${this.appName}"]`
  65.     
  66.     if (styleElement.sheet) {
  67.       const rules = Array.from(styleElement.sheet.cssRules || styleElement.sheet.rules)
  68.       
  69.       rules.forEach((rule, index) => {
  70.         if (rule.type === CSSRule.STYLE_RULE) {
  71.           const originalSelector = rule.selectorText
  72.           const scopedSelector = `${appSelector} ${originalSelector}`
  73.           
  74.           // 删除原规则并添加带作用域的新规则
  75.           styleElement.sheet.deleteRule(index)
  76.           styleElement.sheet.insertRule(`${scopedSelector} { ${rule.style.cssText} }`, index)
  77.         }
  78.       })
  79.     }
  80.   }
  81.   
  82.   /**
  83.    * 处理静态 CSS
  84.    */
  85.   scopeStaticCSS() {
  86.     const styleSheets = Array.from(document.styleSheets)
  87.     
  88.     styleSheets.forEach(sheet => {
  89.       try {
  90.         if (sheet.ownerNode && this.isAppStyleSheet(sheet.ownerNode)) {
  91.           this.scopeStyleSheet(sheet.ownerNode)
  92.         }
  93.       } catch (e) {
  94.         // 跨域样式表无法访问
  95.         console.warn('无法处理跨域样式表:', e)
  96.       }
  97.     })
  98.   }
  99.   
  100.   /**
  101.    * 判断是否为当前应用的样式表
  102.    */
  103.   isAppStyleSheet(element) {
  104.     // 根据元素位置或其他标识判断是否为当前应用的样式
  105.     return this.container.contains(element)
  106.   }
  107.   
  108.   /**
  109.    * 失活 CSS 沙箱
  110.    */
  111.   deactivate() {
  112.     // 恢复原始函数
  113.     if (this.restoreFunctions) {
  114.       this.restoreFunctions()
  115.     }
  116.     
  117.     // 移除动态添加的样式
  118.     this.dynamicStyleSheets.forEach(element => {
  119.       if (element.parentNode) {
  120.         element.parentNode.removeChild(element)
  121.       }
  122.     })
  123.     
  124.     this.dynamicStyleSheets.clear()
  125.   }
  126. }
JavaScript复制

实际应用场景

1. 电商平台微前端架构

  1. /**
  2.  * 电商平台微前端沙箱配置
  3.  */
  4. class ECommerceSandboxConfig {
  5.   static getConfig(appName) {
  6.     const configs = {
  7.       // 主应用 - 不需要沙箱
  8.       'main-app': {
  9.         sandbox: false
  10.       },
  11.       
  12.       // 用户中心 - 需要严格隔离
  13.       'user-center': {
  14.         sandbox: true,
  15.         useLooseSandbox: false,
  16.         scopedCSS: true,
  17.         customProps: {
  18.           // 共享用户信息
  19.           userInfo: window.globalUserInfo,
  20.           // 共享通用工具
  21.           utils: window.commonUtils
  22.         }
  23.       },
  24.       
  25.       // 商品模块 - 允许宽松沙箱以提升性能
  26.       'product-module': {
  27.         sandbox: true,
  28.         useLooseSandbox: true,
  29.         scopedCSS: true,
  30.         customProps: {
  31.           productAPI: window.productAPI
  32.         }
  33.       },
  34.       
  35.       // 支付模块 - 最严格的隔离
  36.       'payment-module': {
  37.         sandbox: true,
  38.         useLooseSandbox: false,
  39.         scopedCSS: true,
  40.         singular: true, // 单例模式
  41.         customProps: {
  42.           paymentConfig: window.securePaymentConfig
  43.         }
  44.       }
  45.     }
  46.     
  47.     return configs[appName] || { sandbox: true }
  48.   }
  49. }
  51. /**
  52.  * 微前端应用管理器
  53.  */
  54. class MicroAppManager {
  55.   constructor() {
  56.     this.apps = new Map()
  57.     this.sandboxManager = new SandboxManager()
  58.   }
  59.   
  60.   /**
  61.    * 注册微应用
  62.    */
  63.   registerApp(appConfig) {
  64.     const { name, entry, container, activeRule } = appConfig
  65.     const sandboxConfig = ECommerceSandboxConfig.getConfig(name)
  66.     
  67.     this.apps.set(name, {
  68.       ...appConfig,
  69.       sandboxConfig,
  70.       status: 'registered'
  71.     })
  72.   }
  73.   
  74.   /**
  75.    * 加载并挂载应用
  76.    */
  77.   async mountApp(appName) {
  78.     const appConfig = this.apps.get(appName)
  79.     if (!appConfig) {
  80.       throw new Error(`应用 ${appName} 未注册`)
  81.     }
  82.     
  83.     try {
  84.       // 创建沙箱
  85.       if (appConfig.sandboxConfig.sandbox) {
  86.         const sandbox = this.sandboxManager.createSandbox(appName, appConfig.sandboxConfig)
  87.         const globalProxy = this.sandboxManager.activateSandbox(appName)
  88.         
  89.         // 注入自定义属性
  90.         if (appConfig.sandboxConfig.customProps) {
  91.           Object.keys(appConfig.sandboxConfig.customProps).forEach(key => {
  92.             globalProxy[key] = appConfig.sandboxConfig.customProps[key]
  93.           })
  94.         }
  95.       }
  96.       
  97.       // 加载应用资源
  98.       const { template, execScripts } = await this.loadApp(appConfig.entry)
  99.       
  100.       // 渲染应用模板
  101.       const container = document.querySelector(appConfig.container)
  102.       container.innerHTML = template
  103.       
  104.       // 在沙箱环境中执行应用脚本
  105.       const appExports = await execScripts(
  106.         appConfig.sandboxConfig.sandbox ? 
  107.         this.sandboxManager.sandboxes.get(appName).proxy : 
  108.         window
  109.       )
  110.       
  111.       // 执行应用挂载
  112.       if (appExports.mount) {
  113.         await appExports.mount({
  114.           container,
  115.           props: appConfig.sandboxConfig.customProps || {}
  116.         })
  117.       }
  118.       
  119.       appConfig.status = 'mounted'
  120.       appConfig.appExports = appExports
  121.       
  122.     } catch (error) {
  123.       console.error(`挂载应用 ${appName} 失败:`, error)
  124.       appConfig.status = 'load_error'
  125.     }
  126.   }
  127.   
  128.   /**
  129.    * 卸载应用
  130.    */
  131.   async unmountApp(appName) {
  132.     const appConfig = this.apps.get(appName)
  133.     if (!appConfig || appConfig.status !== 'mounted') {
  134.       return
  135.     }
  136.     
  137.     try {
  138.       // 执行应用卸载
  139.       if (appConfig.appExports && appConfig.appExports.unmount) {
  140.         await appConfig.appExports.unmount()
  141.       }
  142.       
  143.       // 失活沙箱
  144.       if (appConfig.sandboxConfig.sandbox) {
  145.         this.sandboxManager.deactivateSandbox(appName)
  146.       }
  147.       
  148.       // 清理容器
  149.       const container = document.querySelector(appConfig.container)
  150.       container.innerHTML = ''
  151.       
  152.       appConfig.status = 'unmounted'
  153.       
  154.     } catch (error) {
  155.       console.error(`卸载应用 ${appName} 失败:`, error)
  156.     }
  157.   }
  158.   
  159.   /**
  160.    * 加载应用资源
  161.    */
  162.   async loadApp(entry) {
  163.     // 这里实现应用资源加载逻辑
  164.     // 包括 HTML、CSS、JavaScript 的获取和处理
  165.     
  166.     const response = await fetch(entry)
  167.     const html = await response.text()
  168.     
  169.     // 解析 HTML，提取 CSS 和 JS
  170.     const { template, scripts, styles } = this.parseHTML(html)
  171.     
  172.     // 创建脚本执行函数
  173.     const execScripts = (global = window) => {
  174.       return new Promise((resolve) => {
  175.         const exports = {}
  176.         
  177.         scripts.forEach(script => {
  178.           // 在指定的全局环境中执行脚本
  179.           const func = new Function('window', 'exports', script)
  180.           func.call(global, global, exports)
  181.         })
  182.         
  183.         resolve(exports)
  184.       })
  185.     }
  186.     
  187.     return { template, execScripts }
  188.   }
  189.   
  190.   /**
  191.    * 解析 HTML 内容
  192.    */
  193.   parseHTML(html) {
  194.     // HTML 解析逻辑
  195.     const template = html.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
  196.     
  197.     const scripts = []
  198.     const scriptRegex = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi
  199.     
  200.     let match
  201.     while ((match = scriptRegex.exec(html)) !== null) {
  202.       const scriptContent = match[0].replace(/<script[^>]*>|<\/script>/gi, '')
  203.       scripts.push(scriptContent)
  204.     }
  205.     
  206.     return { template, scripts, styles: [] }
  207.   }
  208. }
  210. // 使用示例
  211. const appManager = new MicroAppManager()
  213. // 注册微应用
  214. appManager.registerApp({
  215.   name: 'user-center',
  216.   entry: 'http://localhost:3001',
  217.   container: '#user-center-container',
  218.   activeRule: '/user'
  219. })
  221. appManager.registerApp({
  222.   name: 'product-module',
  223.   entry: 'http://localhost:3002',
  224.   container: '#product-container',
  225.   activeRule: '/product'
  226. })
  228. // 路由变化时挂载/卸载应用
  229. window.addEventListener('popstate', () => {
  230.   const pathname = window.location.pathname
  231.   
  232.   if (pathname.startsWith('/user')) {
  233.     appManager.mountApp('user-center')
  234.   } else if (pathname.startsWith('/product')) {
  235.     appManager.mountApp('product-module')
  236.   }
  237. })
JavaScript复制

2. 开发环境沙箱调试

  1. /**
  2.  * 沙箱调试工具
  3.  */
  4. class SandboxDebugger {
  5.   constructor(sandbox) {
  6.     this.sandbox = sandbox
  7.     this.logs = []
  8.     this.startTime = Date.now()
  9.   }
  10.   
  11.   /**
  12.    * 开始监控沙箱
  13.    */
  14.   startMonitoring() {
  15.     this.monitorProxyAccess()
  16.     this.monitorSideEffects()
  17.     this.monitorPerformance()
  18.   }
  19.   
  20.   /**
  21.    * 监控代理访问
  22.    */
  23.   monitorProxyAccess() {
  24.     const originalProxy = this.sandbox.proxy
  25.     
  26.     this.sandbox.proxy = new Proxy(originalProxy, {
  27.       get: (target, prop, receiver) => {
  28.         this.log('GET', prop, Reflect.get(target, prop, receiver))
  29.         return Reflect.get(target, prop, receiver)
  30.       },
  31.       
  32.       set: (target, prop, value, receiver) => {
  33.         this.log('SET', prop, value)
  34.         return Reflect.set(target, prop, value, receiver)
  35.       },
  36.       
  37.       deleteProperty: (target, prop) => {
  38.         this.log('DELETE', prop)
  39.         return Reflect.deleteProperty(target, prop)
  40.       }
  41.     })
  42.   }
  43.   
  44.   /**
  45.    * 监控副作用
  46.    */
  47.   monitorSideEffects() {
  48.     // 监控定时器
  49.     const originalSetTimeout = window.setTimeout
  50.     window.setTimeout = (...args) => {
  51.       this.log('SIDE_EFFECT', 'setTimeout', args[1] || 0)
  52.       return originalSetTimeout.apply(window, args)
  53.     }
  54.     
  55.     // 监控事件监听器
  56.     const originalAddEventListener = window.addEventListener
  57.     window.addEventListener = (...args) => {
  58.       this.log('SIDE_EFFECT', 'addEventListener', args[0])
  59.       return originalAddEventListener.apply(window, args)
  60.     }
  61.   }
  62.   
  63.   /**
  64.    * 监控性能
  65.    */
  66.   monitorPerformance() {
  67.     const observer = new PerformanceObserver(list => {
  68.       list.getEntries().forEach(entry => {
  69.         if (entry.entryType === 'measure' || entry.entryType === 'navigation') {
  70.           this.log('PERFORMANCE', entry.name, entry.duration)
  71.         }
  72.       })
  73.     })
  74.     
  75.     observer.observe({ entryTypes: ['measure', 'navigation'] })
  76.   }
  77.   
  78.   /**
  79.    * 记录日志
  80.    */
  81.   log(type, property, value) {
  82.     const logEntry = {
  83.       timestamp: Date.now() - this.startTime,
  84.       type,
  85.       property,
  86.       value,
  87.       stack: new Error().stack
  88.     }
  89.     
  90.     this.logs.push(logEntry)
  91.     
  92.     // 开发环境下打印日志
  93.     if (process.env.NODE_ENV === 'development') {
  94.       console.log(`[沙箱调试] ${type}: ${property}`, value)
  95.     }
  96.   }
  97.   
  98.   /**
  99.    * 生成调试报告
  100.    */
  101.   generateReport() {
  102.     const report = {
  103.       sandboxName: this.sandbox.name,
  104.       duration: Date.now() - this.startTime,
  105.       totalOperations: this.logs.length,
  106.       operationsByType: {},
  107.       performanceMetrics: {},
  108.       sideEffects: []
  109.     }
  110.     
  111.     // 统计操作类型
  112.     this.logs.forEach(log => {
  113.       report.operationsByType[log.type] = (report.operationsByType[log.type] || 0) + 1
  114.       
  115.       if (log.type === 'SIDE_EFFECT') {
  116.         report.sideEffects.push(log)
  117.       } else if (log.type === 'PERFORMANCE') {
  118.         report.performanceMetrics[log.property] = log.value
  119.       }
  120.     })
  121.     
  122.     return report
  123.   }
  124.   
  125.   /**
  126.    * 导出调试数据
  127.    */
  128.   exportDebugData() {
  129.     const data = {
  130.       report: this.generateReport(),
  131.       logs: this.logs
  132.     }
  133.     
  134.     const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
  135.     const url = URL.createObjectURL(blob)
  136.     
  137.     const a = document.createElement('a')
  138.     a.href = url
  139.     a.download = `sandbox-debug-${this.sandbox.name}-${Date.now()}.json`
  140.     a.click()
  141.     
  142.     URL.revokeObjectURL(url)
  143.   }
  144. }
  146. // 使用示例
  147. const sandbox = new ProxySandbox('debug-app')
  148. const debugger = new SandboxDebugger(sandbox)
  150. sandbox.active()
  151. debugger.startMonitoring()
  153. // 运行一段时间后生成报告
  154. setTimeout(() => {
  155.   const report = debugger.generateReport()
  156.   console.log('沙箱调试报告:', report)
  157.   
  158.   // 导出详细调试数据
  159.   debugger.exportDebugData()
  160. }, 10000)
JavaScript复制

性能优化与最佳实践

1. 沙箱性能优化

  1. /**
  2.  * 性能优化的沙箱实现
  3.  */
  4. class OptimizedProxySandbox extends ProxySandbox {
  5.   constructor(name, options = {}) {
  6.     super(name)
  7.     
  8.     this.options = {
  9.       // 是否启用属性缓存
  10.       enablePropertyCache: true,
  11.       // 缓存大小限制
  12.       maxCacheSize: 1000,
  13.       // 是否启用懒加载
  14.       enableLazyLoading: true,
  15.       ...options
  16.     }
  17.     
  18.     // 属性访问缓存
  19.     this.propertyCache = new Map()
  20.     
  21.     // 热点属性（频繁访问的属性）
  22.     this.hotProperties = new Set([
  23.       'document', 'location', 'navigator', 'console',
  24.       'setTimeout', 'clearTimeout', 'setInterval', 'clearInterval'
  25.     ])
  26.     
  27.     this.optimizeProxy()
  28.   }
  29.   
  30.   /**
  31.    * 优化代理对象
  32.    */
  33.   optimizeProxy() {
  34.     const originalProxy = this.proxy
  35.     
  36.     this.proxy = new Proxy(this.fakeWindow, {
  37.       get: (target, prop) => {
  38.         // 对于热点属性，直接返回不走复杂逻辑
  39.         if (this.hotProperties.has(prop)) {
  40.           return window[prop]
  41.         }
  42.         
  43.         // 使用缓存
  44.         if (this.options.enablePropertyCache && this.propertyCache.has(prop)) {
  45.           return this.propertyCache.get(prop)
  46.         }
  47.         
  48.         const value = originalProxy[prop]
  49.         
  50.         // 缓存结果
  51.         if (this.options.enablePropertyCache && this.propertyCache.size < this.options.maxCacheSize) {
  52.           this.propertyCache.set(prop, value)
  53.         }
  54.         
  55.         return value
  56.       },
  57.       
  58.       set: (target, prop, value) => {
  59.         // 清除相关缓存
  60.         if (this.options.enablePropertyCache) {
  61.           this.propertyCache.delete(prop)
  62.         }
  63.         
  64.         return Reflect.set(originalProxy, prop, value)
  65.       }
  66.     })
  67.   }
  68.   
  69.   /**
  70.    * 预热常用属性
  71.    */
  72.   preheatProperties() {
  73.     const commonProperties = [
  74.       'document', 'location', 'navigator', 'console',
  75.       'setTimeout', 'clearTimeout', 'setInterval', 'clearInterval',
  76.       'requestAnimationFrame', 'cancelAnimationFrame',
  77.       'fetch', 'XMLHttpRequest', 'localStorage', 'sessionStorage'
  78.     ]
  79.     
  80.     commonProperties.forEach(prop => {
  81.       // 触发属性访问以填充缓存
  82.       this.proxy[prop]
  83.     })
  84.   }
  85.   
  86.   /**
  87.    * 清理缓存
  88.    */
  89.   clearCache() {
  90.     this.propertyCache.clear()
  91.   }
  92.   
  93.   active() {
  94.     super.active()
  95.     
  96.     // 预热属性
  97.     if (this.options.enablePropertyCache) {
  98.       this.preheatProperties()
  99.     }
  100.   }
  101.   
  102.   inactive() {
  103.     // 清理缓存
  104.     this.clearCache()
  105.     super.inactive()
  106.   }
  107. }
JavaScript复制

2. 沙箱使用最佳实践

  1. /**
  2.  * 沙箱最佳实践指南
  3.  */
  4. class SandboxBestPractices {
  5.   /**
  6.    * 创建生产环境推荐的沙箱配置
  7.    */
  8.   static createProductionConfig(appName, options = {}) {
  9.     return {
  10.       // 根据浏览器支持情况自动选择沙箱类型
  11.       sandbox: 'auto', // auto | strict | loose | false
  12.       
  13.       // CSS 隔离
  14.       scopedCSS: true,
  15.       
  16.       // 预加载优化
  17.       prefetch: true,
  18.       
  19.       // 资源缓存
  20.       cache: true,
  21.       
  22.       // 性能监控
  23.       enablePerformanceMonitor: true,
  24.       
  25.       // 自定义沙箱配置
  26.       sandboxConfig: {
  27.         enablePropertyCache: true,
  28.         maxCacheSize: 500,
  29.         enableLazyLoading: true
  30.       },
  31.       
  32.       // 全局变量白名单（允许访问的全局变量）
  33.       globalWhitelist: [
  34.         'document',
  35.         'location',
  36.         'navigator',
  37.         'console',
  38.         // 第三方库
  39.         'React',
  40.         'Vue',
  41.         'jQuery',
  42.         // 业务全局变量
  43.         'APP_CONFIG',
  44.         'USER_INFO'
  45.       ],
  46.       
  47.       // 副作用清理配置
  48.       sideEffectConfig: {
  49.         // 自动清理定时器
  50.         autoCleanupTimers: true,
  51.         // 自动清理事件监听器
  52.         autoCleanupListeners: true,
  53.         // 自动清理 DOM 变更
  54.         autoCleanupDOM: true,
  55.         // 自动清理网络请求
  56.         autoCleanupRequests: false
  57.       },
  58.       
  59.       ...options
  60.     }
  61.   }
  62.   
  63.   /**
  64.    * 沙箱错误处理
  65.    */
  66.   static createErrorHandler(appName) {
  67.     return {
  68.       onLoadError: (error) => {
  69.         console.error(`[${appName}] 应用加载失败:`, error)
  70.         
  71.         // 上报错误
  72.         this.reportError('load_error', { appName, error: error.message })
  73.       },
  74.       
  75.       onMountError: (error) => {
  76.         console.error(`[${appName}] 应用挂载失败:`, error)
  77.         
  78.         // 尝试降级处理
  79.         this.fallbackMount(appName)
  80.       },
  81.       
  82.       onUnmountError: (error) => {
  83.         console.error(`[${appName}] 应用卸载失败:`, error)
  84.         
  85.         // 强制清理
  86.         this.forceCleanup(appName)
  87.       },
  88.       
  89.       onSandboxError: (error) => {
  90.         console.error(`[${appName}] 沙箱错误:`, error)
  91.         
  92.         // 重建沙箱
  93.         this.recreateSandbox(appName)
  94.       }
  95.     }
  96.   }
  97.   
  98.   /**
  99.    * 上报错误
  100.    */
  101.   static reportError(type, data) {
  102.     // 发送错误信息到监控系统
  103.     fetch('/api/error-report', {
  104.       method: 'POST',
  105.       headers: { 'Content-Type': 'application/json' },
  106.       body: JSON.stringify({
  107.         type,
  108.         data,
  109.         timestamp: Date.now(),
  110.         userAgent: navigator.userAgent,
  111.         url: window.location.href
  112.       })
  113.     }).catch(console.error)
  114.   }
  115.   
  116.   /**
  117.    * 降级挂载
  118.    */
  119.   static fallbackMount(appName) {
  120.     console.log(`[${appName}] 尝试降级挂载`)
  121.     
  122.     // 使用更宽松的沙箱配置重试
  123.     const fallbackConfig = {
  124.       sandbox: 'loose',
  125.       scopedCSS: false
  126.     }
  127.     
  128.     // 重新挂载应用
  129.     // ... 实现降级逻辑
  130.   }
  131.   
  132.   /**
  133.    * 强制清理
  134.    */
  135.   static forceCleanup(appName) {
  136.     console.log(`[${appName}] 执行强制清理`)
  137.     
  138.     // 清理容器
  139.     const containers = document.querySelectorAll(`[data-app="${appName}"]`)
  140.     containers.forEach(container => {
  141.       container.innerHTML = ''
  142.     })
  143.     
  144.     // 清理全局状态
  145.     delete window[`__MICRO_APP_${appName.toUpperCase()}__`]
  146.   }
  147.   
  148.   /**
  149.    * 重建沙箱
  150.    */
  151.   static recreateSandbox(appName) {
  152.     console.log(`[${appName}] 重建沙箱`)
  153.     
  154.     // 销毁现有沙箱
  155.     sandboxManager.destroySandbox(appName)
  156.     
  157.     // 创建新沙箱
  158.     const config = this.createProductionConfig(appName)
  159.     sandboxManager.createSandbox(appName, config.sandboxConfig)
  160.   }
  161. }
  163. /**
  164.  * 应用性能监控
  165.  */
  166. class AppPerformanceMonitor {
  167.   constructor(appName) {
  168.     this.appName = appName
  169.     this.metrics = {
  170.       loadTime: 0,
  171.       mountTime: 0,
  172.       unmountTime: 0,
  173.       memoryUsage: 0,
  174.       errorCount: 0
  175.     }
  176.   }
  177.   
  178.   /**
  179.    * 开始监控应用加载
  180.    */
  181.   startLoadMonitoring() {
  182.     this.loadStartTime = performance.now()
  183.   }
  184.   
  185.   /**
  186.    * 结束加载监控
  187.    */
  188.   endLoadMonitoring() {
  189.     this.metrics.loadTime = performance.now() - this.loadStartTime
  190.   }
  191.   
  192.   /**
  193.    * 开始挂载监控
  194.    */
  195.   startMountMonitoring() {
  196.     this.mountStartTime = performance.now()
  197.   }
  198.   
  199.   /**
  200.    * 结束挂载监控
  201.    */
  202.   endMountMonitoring() {
  203.     this.metrics.mountTime = performance.now() - this.mountStartTime
  204.   }
  205.   
  206.   /**
  207.    * 监控内存使用
  208.    */
  209.   monitorMemoryUsage() {
  210.     if ('memory' in performance) {
  211.       this.metrics.memoryUsage = performance.memory.usedJSHeapSize
  212.     }
  213.   }
  214.   
  215.   /**
  216.    * 记录错误
  217.    */
  218.   recordError(error) {
  219.     this.metrics.errorCount++
  220.     
  221.     // 上报性能数据
  222.     this.reportMetrics()
  223.   }
  224.   
  225.   /**
  226.    * 上报性能指标
  227.    */
  228.   reportMetrics() {
  229.     const data = {
  230.       appName: this.appName,
  231.       metrics: this.metrics,
  232.       timestamp: Date.now()
  233.     }
  234.     
  235.     console.log(`[性能监控] ${this.appName}:`, data)
  236.     
  237.     // 发送到监控系统
  238.     fetch('/api/performance-metrics', {
  239.       method: 'POST',
  240.       headers: { 'Content-Type': 'application/json' },
  241.       body: JSON.stringify(data)
  242.     }).catch(console.error)
  243.   }
  244. }
JavaScript复制

总结

乾坤的沙箱机制是微前端架构中的核心技术，它解决了多个独立应用在同一页面中运行时的隔离问题。

通过三种不同的沙箱实现，乾坤能够在不同的浏览器环境中提供最佳的隔离效果：

关键特性：

  1. 渐进式隔离：根据浏览器能力自动选择合适的沙箱实现
  2. 多实例支持：ProxySandbox 支持多个微应用同时运行
  3. 副作用管理：自动清理定时器、事件监听器等副作用
  4. 性能优化：通过缓存、预热等技术提升沙箱性能
  5. 开发友好：提供调试工具和错误处理机制

使用建议：

  • 生产环境：优先使用 ProxySandbox，启用完整的隔离和副作用管理
  • 开发环境：可以使用调试模式，便于排查问题
  • 性能敏感场景：可以考虑使用 LegacySandbox 或关闭部分隔离特性
  • 兼容性要求高：使用 SnapshotSandbox 以支持旧版浏览器
编程笔记 & 随笔杂谈