如何使用大型page-data.json文件加速Gatsby网站?

时间:2019-08-08 23:13:08

标签: reactjs pagination gatsby react-virtualized react-window

似乎Gatsby 2.9中进行了一些更改,其中涉及page-data.json(described here on Gatsby blog)。这似乎给我带来了麻烦。

我正在为正在开发的网站渲染一堆视频卡,其中包含大约6000行数据,可以通过JSON API访问。

我发现的挑战是,当我想渲染视频的大网格/列表(6000个)时,在移动设备上(或在缓慢的连接上)它的速度慢得要命。我目前正在使用react-window / react-virtualized使卡/图像渲染更快,但是此站点仍然很慢。很多数据。当我使用chrome dev工具尝试找出问题时,page-data.json似乎是罪魁祸首。就像4mb的数据。当我查看实际的gatsby构建文件时,某些page-data.json文件超过了15MB。

所以,也许我做错了。我想,可以肯定的是,使用gatsby + react-virtualized,我可以创建一个快速的站点。我认为它只会加载必要的数据。但是在后端,它似乎正在加载大量JSON并降低了所有速度。

所以...我想我需要通过分页或查询数据库或其他方式来解决这个问题?

0 个答案:

没有答案