React で遅延読み込みを使用して最初の画面の読み込み時間を短縮する方法

最近、中間およびバックエンドプロジェクトを迅速に起動するための react-ant-admin 統合フレームワークを作成しています。多くの問題が発生しますが、最も重要なのはアクセス速度です。 React が Vue のようなルートの遅延読み込みを使用して、ホームページのレンダリングにかかる時間を短縮できるかどうか疑問に思います。

そこで、とても便利なホイールを見つけました: @loadable/component

使用

インストール

npm インストール @loadable/component -D
# または糸を使う
糸を追加 @loadable/component -D

ルーティングでどのように使用しますか?

src/router/index.js ファイルに次のように記述します。

「react」からReactをインポートします。
「react-router-dom」から Route、Switch をインポートします。
「./routes」から routerList をインポートします。

const ルーター = () => {
  戻る （
    <スイッチ>
      {ルーターリスト.map((項目) => {
        const { コンポーネント: コンポーネント、キー、パス、...itemProps } = item;
        戻る （
          <ルート
            正確={true}
            キー={キー}
            パス={パス}
            render={(allProps) => <コンポーネント {...allProps} {...itemProps} />}}
          />
        );
      })}
    </スイッチ>
  );
};

デフォルトルーターをエクスポートします。

src/router/routes.jsファイルに次のように記述します。

「@loadable/component」から loadable をインポートします。

const Error404 = loadable(() => import("@/pages/err/404")); // 対応するファイル src/pages/err/404.js
const Home = loadable(() => import("@/pages/home"));
const Demo = loadable(() => import("@/pages/demo"));

const ルーターリスト = [
  {
    パス： "/"、
    キー: "ホーム"、
    コンポーネント: ホーム、
  },
  {
    パス: "/demo",
    キー: "デモ",
    コンポーネント: デモ、
  },
  {
    パス： "*"、
    キー: "404",
    コンポーネント: Error404、
  },
];

デフォルトの routerList をエクスポートします。

src/App.jsファイルに次のように記述します。

「react」からReactをインポートします。
「react-router-dom」から { BrowserRouter を Router としてインポートします };
「./router」からルートをインポートします。
デフォルト関数App()をエクスポートする{
  戻る （
    <ルーター>
      <ルート />
    </ルーター>
  );
}

この時点で、ルートを切り替えるときに js ファイルが動的にロードされるかどうかを確認するページに移動できます。ルートを切り替えた後に js ファイルが読み込まれると、遅延読み込みルートが成功したことを意味します。