Angular 由于过度使用内存和CPU,NgRx和redux开发工具出现性能问题
最近加入了一个使用Angular和Redux的新项目。但它没有启用chrome redux开发工具。我注意到它在app.module.ts部分被注释掉了。所以我取消了对这一部分的评论Angular 由于过度使用内存和CPU,NgRx和redux开发工具出现性能问题,angular,redux,ngrx,redux-devtools,redux-devtools-extension,Angular,Redux,Ngrx,Redux Devtools,Redux Devtools Extension,最近加入了一个使用Angular和Redux的新项目。但它没有启用chrome redux开发工具。我注意到它在app.module.ts部分被注释掉了。所以我取消了对这一部分的评论 StoreDevToolsModule.instrument({ name: 'AppName Dev Tools", logOnly: environment.production, maxAge: 10 }) 然后我看到了关于“过度使用内存和CPU”的警告以及指向github文档的
StoreDevToolsModule.instrument({
name: 'AppName Dev Tools",
logOnly: environment.production,
maxAge: 10
})
然后我看到了关于“过度使用内存和CPU”的警告以及指向github文档的链接:
启用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
}));
const actionSanitizer=(action)=>(
action.type==='FILE\u DOWNLOAD\u SUCCESS'&&action.data?
{…操作,数据:'}:操作
);
const store=createStore(rootReducer,window.\uuu REDUX\u DEVTOOLS\u扩展名\uuuu&&window.\uuuu REDUX\u DEVTOOLS\u扩展名__({
消毒剂,
stateSanitizer:(state)=>state.data?{…state,data:''}:state
}));
我发现基于此的应用程序根本没有createStore()
问题:1。鉴于我们的项目看起来像这样,我应该在哪里添加消毒剂
尝试了第一个答案,并将状态和操作还原程序添加到StoreDevToolsModule.instrument({})部分。但是性能仍然很差。最大年龄设置为4。我现在可以想象整棵树了。但它仍然会导致chrome崩溃 这些可通过
StoreDevtoolsModule.instrument
配置进行配置
有关更多信息,请参阅