Где в моем PWA я должен загружать довольно большой JSON файл? - PullRequest
Новая
       67

Где в моем PWA я должен загружать довольно большой JSON файл?

0 голосов
/ 24 февраля 2020

Я разрабатываю PWA, основной функцией которого является отображение списка элементов с окном поиска и кнопками сортировки в верхней части каждого столбца. Список никогда не изменяется (нет разделов CRUD), и поле поиска является единственным, которое изменяет свое состояние.

В рассматриваемом JSON в настоящее время содержится более 1300 элементов, каждая запись содержит 26 столбцов. из которых только 4 взяты для списка, который я упомянул выше (остальные столбцы используются в других частях приложения).

В настоящее время я загружаю файл JSON в моем магазине Vuex с чем-то например: 

actions: {
  async loadData({commit}) 
  {
    const json = await import('data_full.json').then(module => module.default)
    commit('setData', json)
  }
},
mutations: {
  setData(state, payload) {
    state.jsonData = payload
  },
}

, который затем используется в моем приложении. vue: 

mounted() {
  this.$store.dispatch('loadData')
},

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

Я рассмотрел возможность использования IndexedDB, и В настоящее время я тестирую разбиение файла JSON на две части (одна для всего набора элементов, а другая только для 4 полей, необходимых для списка). Моя цель состоит в том, чтобы сократить время «первого рисования», хотя я знаю, что оно ограничено, учитывая размер набора данных, который я использую.

Должен ли я загружать файл JSON в другом месте? Или по-другому загружаться в магазин Vuex?

1 Ответ

1 голос
/ 27 февраля 2020

Я все время так делаю. Типичным примером может быть список почтовых индексов США и городов, около 7 МБ.

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

Я использую localForage в качестве своей библиотеки IDB b / c это глупо просто и мне нравится просто.

localforage.setItem ("почтовые индексы", почтовые индексы) .then (...)

localforage.getItem ("почтовые индексы"). then (...)

Иногда я получаю такие данные и отображаю целые веб-сайты в сервис-работнике. Я написал об этой технике в демонстрационном приложении, которое я сделал для конференции в октябре прошлого года,

https://love2dev.com/pwa/pubcon/

...