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

Question

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

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

然后我看到了关于"过度使用内存和CPU"的警告，以及github文档的链接：https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive-内存和cpu 的使用

启用reduxDev工具会使应用程序崩溃，没有按钮或选项卡可点击。即使我将maxAge调整为2，它仍然非常慢。如果未启用ReduxDev工具，则不会出现性能问题。

由于文档上写着"这是由于一些大型对象的序列化。"然后我开始浏览应用程序，看看可能是什么。我的应用程序没有图片或视频。唯一可以被认为是大型的API是一个返回4.5MB下拉内容的端点。我认为它是由以前的开发者存储的，因为这个下拉内容在应用程序的多个选项卡中使用。

现在尝试根据文档部分对上述端点进行消毒：

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
}));

我发现我们的应用程序基于ngrx的这个示例项目，根本没有createStore()。

问题：1。考虑到我们的项目是这样的，我应该在哪里添加消毒剂？

2. 我真的不明白为什么一个大的下拉数据(所有文本都在树结构中(很难序列化。450亿美元也被认为是大的吗？我从任务管理器中看到，当启用Redux Dev工具时，它使用了1-2GB的内存。所以，也许是我不知道的其他问题？谢谢

Edit1:

尝试了第一个答案，并将状态和操作缩减器添加到StoreDevToolsModule.interface(｛｝(部分。但是性能仍然相当差。MaxAge设置为4。我现在可以看到整棵树了。但它仍然导致chrome崩溃。

Answer 1

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

有关更多信息，请参阅文档