ランディング ページに 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 に基づいてアプリを小さなバンドルに分割しました
最初、バンドラー ポスト npm run ビルドは次のように 4 つのバンドルを示していました:-
最適化された製品ビルドを作成しています... 正常にコンパイルされました。
File sizes after gzip: 47.81 KB build/static/js/2.19e3299d.chunk.js 1.13 KB build/static/js/main.7da2e471.chunk.js 787 B build/static/js/runtime-main.07a021b3.js 746 B build/static/css/main.870850a4.chunk.css最適化後:- 最適化されたプロダクション ビルドを作成しています... 正常にコンパイルされました。
File sizes after gzip: 47.81 KB (+2 B) build/static/js/2.55b47d25.chunk.js 1.21 KB (+91 B) build/static/js/main.53ee5ec1.chunk.js 1.2 KB (+442 B) build/static/js/runtime-main.eace4f45.js 746 B build/static/css/main.870850a4.chunk.css 290 B build/static/js/4.9c560333.chunk.js 288 B build/static/js/3.cba0f305.chunk.js 256 B build/static/js/5.7e6af1ad.chunk.js