問題タブ [react-lazy-load]

ランディング ページに Entrance1 と Entrance2 という 2 つのセクションがあるアプリがあります。ユーザーが Entrance1 をクリックしたときに、Entrance1 に関連するルートと、Entrance1 内で必要なコンポーネントのみがバンドルに読み込まれるように、approute と遅延読み込みを設計したいと考えています (React-lazy とサスペンス。ここでは webpack を使用しません)。エントランス 1 とエントランス 2 内のルートとコンポーネントの 50% が重複しています。

私は、Entrance1 と Entrance2 に属するすべてのルートが 1 つの Approute にあるサンドボックスを持っています。簡潔にするために、サンドボックスに最小限のルートとコンポーネントを追加しました。しかし、私のアプリには Entrance1 に属する 25 のルートがあり、同じルートのほとんどが Entrance2 に使用されています (URL は /entrance1/comp1 ではなく /entrance2/comp1 を指しています)。これは良い設計ではないと感じています。また、バンドルの読み込みが不必要に重くなります。

これを機能させる方法は？

アプリを作成する最適化されていない方法

React.lazy を使用して、Routing Link に基づいてアプリを小さなバンドルに分割しました

最適化されたルーティングとバンドル

1. 最初、バンドラー ポスト npm run ビルドは次のように 4 つのバンドルを示していました:-

   最適化された製品ビルドを作成しています... 正常にコンパイルされました。

2. 最適化後:- 最適化されたプロダクション ビルドを作成しています... 正常にコンパイルされました。

私は反応するのが初めてです。の値に基づいて、「darkMode.css」または「lightMode.css」を (クラスベースのコンポーネントに) インポートしたいと考えていますprops。

以下の関数があるとします(クラスベースのコンポーネント内):

この関数を使用して「darkMode.css」または「lightMode.css」をインポートする方法はありますか?

助けてくれてありがとう！

React ルーターを使用して、特定の URL に従ってさまざまなページをレンダリングしています。いいえ、React.lazyを使用してすべてのページ コンポーネントを遅延読み込みしたかったのです。

これは非常にうまく機能しますが、に行くと/page、すべてHomeが消え、フォールバックLoading page...コンポーネントしか表示されません (ページが消えて、別のページがすぐに表示され、ユーザーにとって邪魔になります)。

これはのデフォルトの動作ですReact.Suspenseが、この場合、実際のホームページを画面に表示し、Loading page...メッセージを上部に表示し、Pageコンポーネントがロードされたら、それをレンダリングしてホームページを置き換える方法はありますか?

以下に示すものに対して、React Lazy と Supense を使用する利点はどれかを知りたいです。最初の例は useState と Onload Prop を使用しており、2 番目の例は React Lazy と Suspense を使用しています。

VSこれ

ImageComponent.js

React アプリケーションを動的に遅延読み込みコンポーネントに変換して、Lighthouse のパフォーマンス スコアを上げようとしています。そのためにReact コード分割のドキュメントに従っています。

ドキュメントに従って、以下に示すように、コンポーネントが App.js ファイルに読み込まれる方法を切り替えようとしました。

ただし、これを行うと、サーバーが http://localhost:3000/App.js を取得しようとすると、サイトで 404 エラーが発生するため、Componentを使用した App.js のルートが読み込まれません。遅延ロードする各コンポーネントを返すために、サーバーにルートを追加する必要がありますか? これについてのドキュメントには何もありません...

App.jsルートをやり直す方法ではなく、なぜこれが起こっているのかを探しています。