由于过度使用内存和 CPU，NgRx 和 redux 开发工具出现性能问题

Question

最近加入了一个使用 Angular 和 Redux 的新项目。但它没有启用 chrome redux 开发工具。我注意到它在 app.module.ts 部分被注释掉了。所以我取消评论这部分。

StoreDevToolsModule.instrument({
    name: 'AppName Dev Tools",
    logOnly: environment.production, 
    maxAge: 10 
})

然后我在 github 文档中看到了关于 "Excessive use of memory and CPU" 和这个 link 的警告：https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-use-of-memory-and-cpu

启用 reduxDev 工具会使应用程序崩溃，无法单击任何按钮或选项卡。即使我把maxAge调成2，还是很慢。如果未启用 ReduxDev 工具，则不会出现性能问题。

由于文档说 "it's due to serialization of some huge objects." 然后我开始浏览该应用程序以查看可能是什么。我的应用没有图片或视频。唯一可以被认为是大的 API 是 returns 4.5 MB 下拉内容的端点。而且我认为它是由以前的开发人员存储的，因为此下拉内容在整个应用程序的多个选项卡中使用。

现在尝试根据文档部分清理上述端点：

const actionSanitizer = (action) => (
  action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
  { ...action, data: '<<LONG_BLOB>>' } : action
);
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  actionSanitizer,
  stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
}));

我发现我们基于此 sample project by ngrx 的应用程序根本没有 createStore()。

问题：1.鉴于我们的项目看起来像this，我应该在哪里添加消毒剂？

我真的不明白大型下拉数据（树结构中的所有文本）如何难以序列化。 4.5mb 也算大吗？我从任务管理器中看到，当启用 Redux Dev 工具时，它使用了 1-2 GB 的内存。所以也许这是我不知道的其他问题？谢谢。

编辑 1：

尝试了第一个答案并将状态和动作缩减器添加到 StoreDevToolsModule.instrument({}) 部分。但性能仍然很差。 MaxAge 设置为 4。我现在可以看到整棵树。但它仍然导致 chrome 崩溃。

Answer 1

这些可以通过 StoreDevtoolsModule.instrument 配置进行配置。

有关详细信息，请参阅 docs

由于过度使用内存和 CPU，NgRx 和 redux 开发工具出现性能问题

NgRx and redux dev tool performance issue due to Excessive use of memory and CPU

redux

redux-devtools

ngrx

redux-devtools-extension

angular