Angular Redux应用内存泄漏问题排查与解决方案咨询

问题背景 #

我的Angular应用需从后端每秒加载20条更新消息：

• 启动时加载所有资产（Assets）快照
• 之后每秒获取增量更新
• 所有资产存储在Redux Store，通过NgRx Actions/Effects与后端交互：LoadAssetByIdAction由Effect触发后端请求，LoadAssetByIdSuccessAction在接收数据后更新Store

应用启动时内存仅26MB、对象数量极少，但运行一段时间后内存飙升至76MB，大量对象驻留内存，整夜运行会导致浏览器标签页崩溃。

可能成因 #

• NgRx Action/Effect内存泄漏：每秒触发的LoadAssetByIdAction若未正确管理订阅，Effect中的HTTP请求可能存在未取消的订阅，导致请求实例、响应数据持续驻留；若使用mergeMap而非switchMap，后端响应延迟时会堆积大量未完成请求，占用内存。
• Redux Store状态冗余：增量更新时未复用现有资产对象，每次更新都创建新对象引用，旧对象无法被GC回收；未清理后端已删除的资产数据，导致无效数据长期驻留Store。
• 组件订阅未清理：组件订阅Store数据时，未用async管道、未在ngOnDestroy中取消订阅，导致组件实例、订阅回调持续占用内存。
• 对象引用未释放：第三方库、自定义服务中存在对资产对象的长期引用，导致这些对象无法被垃圾回收。

解决方案 #

• 优化NgRx Effect订阅管理

  • 用switchMap操作符自动取消前一次未完成的请求，避免请求堆积
  • 长期运行的Effect流结合takeUntil与销毁信号，确保订阅及时取消

  loadAssetById$ = createEffect(() =>
    this.actions$.pipe(
      ofType(LoadAssetByIdAction),
      switchMap(({ id }) => 
        this.assetService.getAsset(id).pipe(
          map(data => LoadAssetByIdSuccessAction({ data })),
          catchError(err => of(LoadAssetByIdFailureAction({ err })))
        )
      ),
      takeUntil(this.destroy$)
    )
  );
  

• 优化Store状态更新逻辑

  • 使用NgRx Entity管理资产数据，自动处理对象复用与状态更新，避免冗余对象创建
  • 增量更新时仅修改变化字段，已删除资产及时从Store中移除

  on(LoadAssetByIdSuccessAction, (state, { data }) =>
    adapter.updateOne({ id: data.id, changes: data }, state)
  )
  

• 清理组件订阅

  • 优先使用async管道自动管理订阅，组件销毁时自动取消
  • 手动订阅需在ngOnDestroy中取消：

  private destroy$ = new Subject<void>();
  
  ngOnInit() {
    this.asset$ = this.store.select(selectAssetById(id)).pipe(
      takeUntil(this.destroy$)
    );
  }
  
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
  

• 排查内存泄漏点

  • 用Chrome DevTools的Memory面板，通过堆快照对比找出持续增长的对象类型
  • 检查自定义服务、第三方库中的全局引用，及时清理无效引用

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