ページコードを分割してオンデマンドでロードする方法

今回はページコードを分割してオンデマンドでロードする方法を紹介します。 ページコードを分割してオンデマンドでロードする際に注意すべき注意点は何ですか? 以下は実際的なケースです。見てください。

構成の変更

開発環境: webpack@v3、react-router@v4

インストール依存関係:

$ yarn add babel-plugin-syntax-dynamic-import -dev

.babelrcファイルの変更: プラグインに「syntax-dynamic-import」を追加

変換プロジェクトコード

インストールの依存関係:

$ yarn add react-loadable

react-loadableのドキュメントによると、新しいページをロードするときにLoadingコンポーネントを提供する必要があり、また、ロードステータスとタイムアウトステータスを区別する必要がありますヒント:

import React from 'react';
import { Icon } from 'antd';
const Loading = ({ pastDelay, timedOut, error }) => {
 if (pastDelay) {
 return <p><Icon type="loading" /></p>;
 } else if (timedOut) {
 return <p>Taking a long time...</p>;
 } else if (error) {
 return <p>Error!</p>;
 }
 return null;
};

ページコンポーネントのインポート方法を変更する:

import React from 'react';
import Loadable from 'react-loadable';
import { Route, Switch } from 'react-router-dom';
const Home = Loadable({
 loader: () => import('../Home'),
 loading: Loading,
 timeout: 10000
});
const EditArticle = Loadable({
 loader: () => import('../EditArticle'),
 loading: Loading,
 timeout: 10000
});
...
<Switch>
 <Route exact path="/home" component={Home} />
 <Route path="/editarticle" component={EditArticle} />
</Switch>

その後、パッケージ化の結果によって各ページのコードが分離されます:

このページでは、

エントリ ファイル app.js をロードするだけで済み、他のスクリプトは、このファイルにアクセスするときにロードされます。対応するページ。

検証結果

staticリソースをcdnにアップロードした後、ページ内にapp.cssとapp.jsをロードします。実行後、各ページにアクセスすると、対応するスクリプトが順番にロードされます。図:

最初のページにアクセスしたときにロードされるページ スクリプトは、gzip 圧縮後ではわずか 21.8 KB であることがわかります。 ！ ！もちろん、これはページの複雑さも関係しますが、すべてのスクリプトをロードする場合と比較して、この最適化は特に、ターゲットを絞ったアクセスを行うユーザーにとって顕著に現れます。

これを行うことのもう 1 つの利点は、プロジェクト内の一部のページのビジネス コードを変更するだけで、他のページのコードは変更されないため、この時点で他のページはクライアント キャッシュを使用し、別のレベルから最適化が行われることです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueコンポーネントでのスロットソケットの使用の詳細な説明

JSオリジンポリシーとクロスドメインアクセスを実装する手順の詳細な説明

以上がページコードを分割してオンデマンドでロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。