Angular应用销毁时导入脚本未从内存清理问题咨询

1. 内存泄漏的产生原因 #

• 你观察到的脚本内存残留，本质是vendor.js执行后生成的对象、函数、闭包存在未被释放的根引用，导致V8无法回收编译后的代码块。最常见的场景是微前端架构下的Angular子应用销毁：此时只是从DOM中移除了应用节点，整个页面的JS上下文没有被销毁，脚本执行后挂载的全局引用会一直存留。
• 典型的残留引用包括：未退订的RxJS订阅、全局事件监听（window.resize/document.scroll等）、未清理的定时器/延时器、第三方依赖挂载在window上的全局实例、Angular模块缓存中持有的组件、服务实例引用。
• 你看到的距离值为-的vendor.js编译代码块，说明这些代码被GC根节点直接引用，不属于普通的DOM引用链范畴，常规的DOM节点删除不会触碰这些引用。

2. 两种删除script节点的效果差异原因 #

• Chrome开发者工具的Elements面板删除DOM节点时，除了执行标准的DOM移除逻辑，还会同步清理DevTools内部对该节点的所有调试关联缓存、V8引擎层面该节点与编译代码的绑定引用，相当于做了一层额外的清理操作。
• 而通过JS代码调用remove()方法，仅会把节点从DOM树中移除，只要其他位置还持有该script节点的引用（比如Angular资源加载器的缓存、代码中对该节点的变量引用、V8编译缓存的关联标记），对应的编译代码块就不会被标记为可回收。

3. 可行的解决方案 #

• 如果你是微前端场景下的子应用销毁：
  • 在Angular根模块的ngOnDestroy生命周期钩子中，统一清理所有全局事件监听、定时器，用takeUntil操作符退订所有全局RxJS流
  • 销毁时调用PlatformRef.destroy()方法，完全销毁Angular平台实例，清理所有模块、服务的缓存引用
  • 遍历所有应用动态加载的script节点，移除后把持有这些节点的变量全部赋值为null
  • 清理所有主动挂载到window上的自定义属性，全部赋值为null
• 如果是普通单页应用（无重复挂载卸载需求）：无需额外处理，关闭浏览器标签页时整个JS上下文会被完全销毁，不会有内存泄漏问题
• 注意不要在代码中缓存动态加载的script节点对象，加载执行完成后立即释放引用

内容的提问来源于stack exchange，提问作者Sébastien Tromp