javascript - 我应该在 PWA 中的哪个位置加载一个较大的 JSON 文件？

Question

我正在开发一个 PWA，其主要功能是显示一个项目列表，并在每列顶部带有搜索框和排序按钮。该列表永远不会改变(没有 CRUD 部分)，并且搜索框是唯一会改变其状态的框。

所讨论的 JSON 目前有 1300 多个项目，每条记录总共有 26 列，其中只有 4 列用于我上面提到的列表(其余列用于应用程序的其他部分)。

我目前正在我的 Vuex 商店中加载 JSON 文件，如下所示:

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
  },
}

然后在我的 App.vue 中使用:

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

这工作得很好，应用程序按照我的预期工作。但是，我想知道我是否将文件加载到正确的位置，或者初始数据是否应该完全以不同的方式处理。 JSON 文件最终会变得更大，并且我已经注意到，当我添加更多记录时，首次打开应用程序时加载时间会增加。

我已经考虑过使用 IndexedDB 的可能性，并且目前正在测试将 JSON 文件分成两部分(一个用于整个项目集，另一个仅包含列表所需的 4 个字段)。我的目标是拥有更快的“首次绘制”时间，尽管我知道考虑到我正在使用的数据集的大小，这是有限的。

我应该在其他地方加载 JSON 文件吗？或者以不同的方式加载到 Vuex 存储中？

Answer 1

我经常做这种事。一个典型的例子可能是美国邮政编码和城市的列表，大约 7MB。

我会在后台从服务工作线程中获取它。我会将其存储或缓存在 IndexedDB 中，因为这是一个非常大的数据库，并且在服务工作人员和客户端中可用。

我使用 localForage 作为我的 IDB 库，因为它太简单了，我喜欢简单。

localforage.setItem("邮政编码", 邮政编码).then(...)

localforage.getItem("邮政编码").then(...)

我有时会获取这样的数据并在服务工作线程中渲染整个网站。我在去年 10 月为一次 session 制作的演示应用程序中介绍了这项技术，

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