Webpack构建应用加载卸载iframe时的内存泄漏问题问询

我之前也碰到过类似的Webpack打包应用与iframe交互导致的内存泄漏问题，结合排查和解决经验，给你整理几个关键注意事项：

• 清理Webpack模块缓存与全局引用
  Webpack的模块缓存机制（比如require.cache或ES模块的内置缓存）很容易持有iframe相关的模块引用，尤其是当iframe内代码和主应用通过全局对象共享模块时。在卸载iframe前，务必：

  • 遍历require.cache，删除所有与iframe业务相关的模块缓存项
  • 清空主应用中所有指向iframe内容的全局变量，移除message等跨iframe事件的监听，比如主动设置window.iframeRelatedModule = null并调用removeEventListener清理回调

• 避免Webpack持久化缓存的残留锁定
  如果你使用了hard-source-webpack-plugin这类持久化缓存插件，要给iframe对应的入口chunk单独配置缓存策略，防止缓存机制锁住相关内存。另外，Webpack热更新（module.hot）相关的缓存也可能残留引用，卸载iframe时要确保热更新模块没有持有iframe的DOM或对象引用。

• 切断Webpack全局闭包与iframe的关联
  Webpack打包后会生成__webpack_require__、__webpack_modules__这类全局闭包变量，如果iframe内代码意外引用了主应用的这些变量，或者主应用通过闭包（比如定时器、事件回调）持有了iframe的contentWindow或DOM节点，都会导致内存无法释放。要：

  • 给iframe添加sandbox属性加强隔离，避免它访问主应用的Webpack全局变量
  • 卸载iframe前，清除所有关联的定时器、异步回调，确保没有闭包残留对iframe的引用

• 清理动态加载的chunk加载器残留
  如果是通过Webpack的import()动态加载iframe的入口代码，chunk加载器可能会持有未完成的请求或加载状态引用。卸载时要：

  • 用AbortController取消未完成的import()请求
  • 检查并清理__webpack_chunk_load__相关的缓存项，避免加载器持有无效引用

• 针对性排查Webpack相关内存引用
  结合你提到的DevTools排查情况，补充几个实用技巧：

  • 在Memory面板的Retainers视图中，追溯(system)或(array)持有的对象引用链，通常能定位到Webpack的模块缓存或闭包
  • 通过console.log(__webpack_modules__)查看所有已加载模块，搜索与iframe相关的模块，确认是否存在未释放的引用
  • 启用Memory Inspector，检查堆快照中的Module实例，看是否有与iframe绑定的未清理对象

内容的提问来源于stack exchange，提问作者julius_am