スタティックjsonデータをReactアプリケーションに組み込み、ロード時間を最小限に抑えるにはどうすればいいですか？

Question

私は非常に大きな（約1または2 MB）jsonファイルを必要とするReactアプリケーションを作成しています。ユーザーの読み込み時間を最小限に抑える方法でデータを含める方法を理解しようとしています。静的ファイルのディレクトリにJSONを入れて、中にそれをフェッチ

• リアクトソースにデータを追加し、JSX
• にインポート：私はWebPACKのではかなり新しいですが、今のところ私は2つのオプションが表示さjsx

もう1つの制約は、複数のページが同じデータを読み込むということです。ユーザーが最初の読み込み後にjsonをキャッシュするので、読み込みが改善される可能性があります。

私はまだかなり新しいです。私は大きなものを見逃しているかもしれないので、私はあなたが与えることができる情報を感謝します。

Answer 1

JSONファイルをビルド時に読み込んでコードにバンドルすることは可能です。しかし、私はJSONを別のファイルとして保存し、AJAXでそれを取得すると言うでしょう。いくつかの理由：あなたのJSファイルとの同梱あれば、いつでもあなたがあなたのコードに増分変更を行い、キャッシングで

1. は、あなたのユーザーにを引き起こし、あなたのコードと JSON再バンドルする必要がありますJSONの部分が変更されていなくても、コードの更新を取得するためだけに、1-2 MBのファイルを不必要に再ダウンロードしてください。ファイルが別々の場合、ブラウザはそれぞれ独立してキャッシュすることができ、変更があった場合にのみ再ダウンロードすることができます。
2. ユーザーがJSONを必要としない場合はどうなりますか？すべてのユースケースで100％必要ですか？ JSONを分離しておくことは、プリエンプティブに使用するのではなく、実際に必要なときにロードすることができることを意味します。
3. JSONが複数のページに必要であると述べましたが、キャッシュされていると理論的には複数のページにまたがって必要な場合でも1回だけダウンロードされます。

how to leverage cachingを読んで、ブラウザがキャッシュを有効に活用するための適切なヘッダーをサーバに提供したい場合があります。