Vueは遅延読み込みによりページの応答速度を向上

概要

このプロジェクトの目的は、ピボット テーブルと Excel の数式を使用して会社の運用データを分析することです。ただし、統合後は開発環境でページがスムーズに実行され、大量のデータが迅速に読み込まれて処理されます。しかし、リリース後は、ユーザーがページを開くたびに、開発段階に比べて読み込み時間が短縮されます。調査の結果、速度低下の原因はリリースパッケージ内の vendor.js のサイズの増加であることがわかりました。このファイルを毎回読み込むのに約 300 ミリ秒かかります。小規模な Vue プロジェクトではモジュール分割が行われていないため、すべてのコードが vendor に直接パッケージ化されています。新しい機能を統合した後、リリースパッケージも大きくなります。

原因がわかったので、最適化を開始します。フロントエンドで大量のリソースをロードする必要がある場合、効率を最適化するために遅延読み込みが一般的に使用されます。

遅延読み込みとは何ですか?

レイジーローディングは遅延ローディングとも呼ばれます。Web ページが応答するときに、リソースはすぐには要求されません。リソースは、ページが読み込まれたとき、またはオンデマンドで応答されたときに読み込まれるため、ページの応答速度が向上し、サーバーのリソースが節約されます。ウェブページで最もよく使われる遅延読み込みは、画像の遅延読み込みです。Taobao のような複数の画像があるページの場合、すべての画像がダウンロードされるまで待ってからリクエストに応答すれば、必ずしもページの読み込みが滞ることはありません。 JS リソースの読み込みについても同様です。大きな JS を読み込むと JS がブロックされ、ページが応答しなくなり、疑似的にデッド状態になります。そのため、オンデマンドで読み込むことで、ページの最初の画面の読み込み速度を向上させることができます。

具体的な最適化手順をまとめたので、最適化を始めましょう。

最適化を開始する

まず、プロジェクト環境: Vue 2.6

開発環境: Vue-cli 4.5 + TypeScript 3.9

ビジネスモジュールを分割する

ルーティングを通じてモジュールを非同期にロードすることで、最初の画面やその他のページのロード速度を高速化できます。 webExcel モジュールは、Vue Router で遅延ロードモードとして構成されています。 構成後、webExcel コンポーネントは、指定された webpackChunkName に従って別のファイルにパッケージ化され、webExcel ルートにアクセスしたときにのみロードされます。この方法では、ホームページやバージョン情報ページにアクセスしたときに、webExcel リソースは読み込まれません。

遅延読み込みルート構成

アクセスページはパッケージ化されて公開されており、最初の画面は数秒で開き、直接アクセスした場合も数秒で開きます。しかし、ネットワーク要求を確認すると、ホームページにアクセスしたときに約および Web Excel リソースが要求されていることがわかりました。調査の結果、vue-cli はページ内で preload および prefetch プリロード メカニズムを使用しており、現在のページの読み込みに影響を与えずに後続のページに必要なリソースをプリロードしてユーザー エクスペリエンスを向上させていることがわかりました。ここでは、わかりやすいように、プリフェッチ リソースはコメント アウトされています。

(プリフェッチプリロードを一時的に無効にする)

ルートの遅延読み込みを有効にすると、about と webExcel がホームページに読み込まれなくなります。

（ホームネットワークリクエスト）

ネットワーク要求レコードをクリアし、Web Excel をクリックして webExcel ページにアクセスします。このとき、webExcel リソースが要求され、コンポーネントが表示されます。

(webExcel ページ ネットワーク リクエスト)

オンライン Excel コンポーネントの遅延読み込み

プラグインを使用してページを開く速度をさらに最適化する

ルートの読み込みを最適化しました。ユーザー エクスペリエンスを向上させるために、webExcel ページをさらに最適化し、コンポーネントの遅延読み込みを有効にし、必要な場合にのみ Designer コンポーネントを読み込みました。

非同期コンポーネントを有効にする方法はルーティングと似ています。インポート コンポーネントを直接構成して、元の静的インポートを置き換えることができます。

(コンポーネントの遅延読み込み)

ここでは、AsyncComponent 構成を 1 つのステップで使用して、コンポーネントの読み込み時にユーザーにプロンプ​​トを表示できるようにします。

(ページテンプレート)

(非同期コンポーネントの遅延読み込み)

displayDesigner プロパティは、ページ上で Designer コンポーネントを表示するかどうかを制御するために使用します。3 秒の setTimeout が経過すると、Designer コンポーネントの読み込みと表示が開始されます。 LoadingComponent は読み込み中に読み込み状態を表示します。

ネットワーク要求から、webExcel が読み込み後 3 秒でデザイナー リソースの要求を開始することがわかります。要求中は LoadingComponent が表示され、要求が完了すると Designer コンポーネントが表示されます。

gzip 圧縮を有効にしてリソース要求を高速化します

リソース要求をさらに高速化するには、サーバーの gizp 圧縮を有効にします。現在、ほとんどのブラウザは gzip をサポートしています。サーバーの gzip 機能を有効にすると、サーバーはリソースを送信する前に圧縮します。

ネットワークリクエストリクエストに次の内容が表示され、gzipがサポートされていることが示されます。

受け入れエンコーディング: gzip、deflate、br

Vue-cli は、パッケージ化時にリソースを事前に gzip パックできるため、サーバーは再度パッケージ化する必要なく、パッケージ化されたリソースを直接返します。 compression-webpack-plugin プラグインを使用すると、バンドル時に gz 圧縮ファイルを直接生成できます。 gzip の構成は、特定の展開状況に応じて設定できます。

要約する

上記の最適化後、最初の画面の読み込みリソースには Vue 基本コンポーネントとホームページ コンポーネントのみが必要になり、最初の画面の読み込み速度は元の 200 ミリ秒に戻ります。 Designerコンポーネントを使用しない他のページでは、リソースをロードする必要はありません。同時に、Designerコンポーネントは一度ロードされ、その後にそのコンポーネントを使用する他のページでは再度ロードする必要はありません。

上記は Vue ルーティングとコンポーネントの遅延読み込みに関する設定ですが、遅延読み込みは万能薬ではありません。実際のニーズに基づいて使用するかどうかを決定する必要があります。

上記は、Vue が遅延読み込みによってページの応答速度を向上させる方法の詳細です。Vue の遅延読み込みが応答速度を向上させる方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。