4

私はcreate-react-appを使用しています。ルーターの基本コード分割に反応したいが、ユーザーがブラウザーで開いた最初のチャンクを取得し、バックグラウンドで非同期に他のチャンクを取得したい

ルート

const HomeModule  = React.lazy(() => import('./modules/ft_home_module/src/main'));
const AuthModule  = React.lazy(() => import('./modules/ft_auth_module/src/main'));
const ProfileModule  = React.lazy(() => import('./modules/ft_profile_module/src/main'));
const MerchantModule  = React.lazy(() => import('./modules/ft_merchant_module/src/main'));

<Route path="/home" component={HomeModule} />
<Route path="/auth" component={AuthModule} />
<Route path="/profile" component={ProfileModule} />
<Route path="/merchant" component={MerchantModule} />

ユーザーがブラウザで /home を開いた場合、最初のチャンクをロードした後、最初にホーム チャンクがロードされ、バックグラウンドで非同期に他のチャンクを呼び出します。

必要な出力

  1. /homeブラウザで開く
  2. 最初にホーム チャンクを取得する
  3. その後、バックグラウンドで非同期に他の 3 つのチャンク

実際には、lighthouse chrome extensionを使用してパフォーマンスをテストしています。ルーターベースのコード分割により、最初のページのパフォーマンスは良好ですが、2番目のページを開くと時間がかかりますが、時間はかかりません. 最初のチャンクをロードした後、バックグラウンドで他のチャンクを非同期にすれば可能だと思います

4

2 に答える 2