Проблема производительности инструмента NgRx и redux dev из-за чрезмерного использования памяти и процессора - PullRequest
Новая
       131

Проблема производительности инструмента NgRx и redux dev из-за чрезмерного использования памяти и процессора

2 голосов
/ 04 мая 2020

Недавно присоединился к новому проекту, который использует Angular и Redux. но он не включил инструмент chrome redux dev. Я заметил, что это закомментировано в разделе app.module.ts. Поэтому я не прокомментировал этот раздел. 

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

Затем я увидел предупреждения о "Чрезмерном использовании памяти и процессора", и эта ссылка на github do c: https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/Troubleshooting.md#excessive -use-of-memory-and-cpu

Включение инструмента reduxDev приведет к созданию приложения sh, при этом кнопки и вкладки не будут активными. Даже если я настроил maxAge на 2, это все еще очень медленно. Нет проблем с производительностью, если инструмент ReduxDev не включен.

Поскольку в документе говорится «это связано с сериализацией некоторых огромных объектов». Затем я начал просматривать приложение, чтобы увидеть, что это может быть. В моем приложении нет изображений или видео. И единственным API, который можно считать большим, является конечная точка, которая возвращает выпадающий контент размером 4,5 МБ. И я думаю, что он был сохранен предыдущими разработчиками, потому что этот выпадающий контент используется на нескольких вкладках в приложении.

теперь пытается очистить вышеупомянутую конечную точку в соответствии с разделом документации: 

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. где я должен добавить дезинфицирующее средство, если наш проект выглядит как this ?

Я не очень понимаю, как большие выпадающие данные (весь текст в древовидной структуре) могут быть трудно сериализовать. Также 4,5 Мб считается большим? Из диспетчера задач я увидел, что когда инструменты Redux Dev включены, он использует 1-2 ГБ памяти. Так что, может быть, это какая-то другая проблема, о которой я не знаю? Спасибо.

Edit1:

Попробовал 1-й ответ и добавил редуктор состояний и действий в раздел StoreDevToolsModule.instrument ({}). но производительность все еще довольно плохая. MaxAge установлен на 4. Теперь я могу визуализировать все дерево. но это все еще вызывает chrome к sh.

1 Ответ

0 голосов
/ 04 мая 2020

Они могут быть настроены с помощью конфигурации StoreDevtoolsModule.instrument.

См. документы для получения дополнительной информации

...