Какой размер слишком велик для массива, хранящегося в состоянии с помощью ngrx?

Question

У меня есть массив от 4000 до 5000 объектов, с которыми мне нужно работать на протяжении всего жизненного цикла моего углового приложения. Я использую ngrx для управления состоянием в этом приложении и загружаю эти данные, используя эффект с оператором startWith. Мне было интересно, насколько большой размер слишком велик, чтобы массив объектов мог быть загружен и сохранен в состоянии таким образом.

Answer 1

Это действительно зависит от того, что находится в вашем массиве, и что вы планируете с ним делать. Сам массив может содержать много значений, прежде чем он окажет какое-либо влияние на ваше приложение.

Но если у вас есть массив, содержащий огромное количество значений, вот мой совет:

• Не отображайте все элементы одновременно, используйте нумерацию страниц или бесконечные прокрутки, которые вы можете там найти (например, в Material CDK есть универсальный!). Это будет одна из самых больших проблем, с которыми вы можете столкнуться: слишком большое отображение в представлении
• Если вы знаете, что вам придется искать в массиве, попробуйте создать индекс для вашего поиска, как только вы получите массив, а не каждый раз, когда поиск изменяется. Например, если у вас есть массив пользователей, и вы знаете, что ваш пользовательский интерфейс имеет «Показывать только людей в возрасте от +18», то вы можете создать Set, содержащий всех этих людей (только ссылки на них)
• Сохраняйте ваши данные неизменными и используйте основные функции Angular: trackBy в вашем списке с вашим *ngFor, а также changeDetectionStrategy: ChangeDetectionStrategy.OnPush`

Я уже пытался выяснить, может ли приложение обрабатывать элементы по 100 КБ, и ответ - да, хотя иногда он начинал казаться немного не отвечающим. Так что 4 или 5k должны быть хорошими, следуя приведенной выше информации.

Answer 2

Вы можете попробовать создать простой тест, используя stackblitz.com (или аналогичный) и посмотреть, как влияет на производительность 5000 элементов в магазине Ngrx.

Вы можете макетировать большой массив с помощью

Array.from(
  new Array(5000),
  (c, i) => ({ test: `This is test object #${i}` })
)