React の遅延読み込み機能をいつ使用する必要がありますか?

Question

かなり大きなアプリケーションがあり、バンドル サイズは現在約 2MB (約 3 チャンク) です。読み込み時間を改善するために、比較的新しい React Lazy を使い始めることにしました。

これは遅延読み込みの例です:

const Wizard = React.lazy(() => import('./components/wizards/Wizard'));

概念の大まかな考え方は理解しましたが、チャンクの読み込みに時間がかかる場合があること以外の欠点を理解するのはまだ困難です。

これまで読んだ限りでは、正規輸入品を使用する理由はありません。

私の質問は次のとおりです。アプリケーション内のすべてのコンポーネントのインポートで遅延読み込みを使用する必要がありますか?なぜ？なぜだめですか？

ぜひご意見をお聞かせください。

Answer 1

まだ使い始めていません。しかし、最も楽観的なアプローチは、ホームページに必要なすべてのコンポーネントを定期的にインポートすることだと思います。ホームページではない他のルートでは、遅延読み込みを使用する必要があります。これが私の一般的な思考の流れです。

Answer 2

いいえ、すべてのコンポーネントに必要なわけではありません。すべてのレイアウトまたはページで使用することのみが意味があります。まずはルーティングから始めるとよいでしょう。 Web 上のほとんどの人は、ページ遷移の読み込みにある程度の時間がかかることに慣れています。また、ページ全体を一度に再レンダリングする傾向があるため、ユーザーがページ上の他の要素を同時に操作する可能性は低くなります。

たとえば、ニュース集約アプリケーションを作成しているとします。アプリケーションは、NewsList と NewsItemPage の 2 つのページで構成されます。各ページには、いくつかの異なるコンポーネントが含まれています。この例では、他のページごとに遅延読み込みコンポーネントを使用するのが合理的です。次に、必要なコンポーネントをロードします。

アプリケーションには、Header と Footer もあります。通常の方法でロードする必要があります。これらはすべてのページで使用されており、非同期で読み込むのは意味がありません。

リーリー