如何在React应用程序中包含静态json数据并最小化加载时间？

Question

我正在制作一个需要相当大（约1或2 MB）json文件的React应用程序，并且我试图弄清楚如何以最小化加载时间的方式包含数据用户。我在webpack上很新，但到目前为止我看到两个选项：

• 将数据添加到React源并将其导入jsx
• 将json放在静态文件目录中，并在jsx
中获取它

另一个限制是多个页面将加载相同的数据，所以我认为可能更好，因为用户在第一次加载后会缓存json。

我还是很陌生，我可能会遗漏一些重要信息，所以我感谢您提供的任何信息。

Answer 1

在构建时导入JSON文件以将其与代码捆绑在一起当然是可能的。但是我会说将JSON保存为单独的文件并使用AJAX获取它。原因如下：

1. 使用缓存，如果将其与JS文件捆绑在一起，那么每次对代码进行增量更改时，都需要重新捆绑代码和 JSON，从而导致用户不必要地重新访问下载1-2 MB文件只是为了获取代码更新，即使JSON部分没有改变。如果文件是独立的，浏览器可以独立缓存每个文件，只有在发生更改时才重新下载。
2. 如果用户不需要JSON怎么办？每个用例都是100％必需的吗？保持JSON独立意味着您只能在需要使用的实际时间加载它而不是先发制人。
3. 您提到在多个页面上需要JSON - 如果它被缓存，理论上他们只会下载一次，即使它需要跨多个页面。

您可能需要阅读how to leverage caching，以便您的服务器为浏览器提供正确的标头，以便有效地利用缓存。