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

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue-router ルーティングの遅延読み込みとそれを実装する 3 つの方法
  • vue-router を遅延ロードする 3 つの方法のまとめ
  • Vueは画像の遅延読み込みを実装します
  • vue-router 遅延読み込み速度が遅い問題と解決策
  • vue-router ルーティングの遅延読み込みの実装 (vue プロジェクトの最初の読み込みが遅い問題を解決)
  • Vue Router の遅延読み込みパスのソリューション
  • vueプロジェクトはGzip圧縮とパフォーマンス最適化操作を可能にします
  • Vue のパフォーマンスを最適化する方法
  • Vueコンポーネントのレンダリングを高速化し、パフォーマンスを最適化します

<<:  Linux システムで Centos7 を使って ElasticSearch ミドルウェアと共通インターフェースを構築するデモ

>>:  リクエスト IP の最後のセグメントに基づいてトラフィックを分割するように Nginx を構成する方法

推薦する

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...

Linux システムに Spring Boot アプリケーションをインストールするための詳細なチュートリアル

Unix/Linux サービスsystemd サービス操作プロセス1. JDKがインストールされたC...

Docker nginxのインストールと設定方法

DockerでNginxイメージをダウンロードする docker プル nginx Docker イ...

ウェブページレイアウトに関する9つのヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案 W...

MySQL無料インストールバージョンの設定チュートリアル

この記事では、参考までにMySQLの無料インストール構成チュートリアルを紹介します。具体的な内容は次...

ネイティブjsはショッピングカートのロジックと機能を実装します

この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...

Nginx での SSL 証明書のインストールと展開手順の概要

目次問題の説明:インストール手順1. 準備2. サーバーにリモート接続する3. 証明書と秘密鍵ファイ...

MySQLでMyISAMストレージエンジンをInnodbに変更した操作記録のまとめ

一般的に、MySQL はデフォルトでさまざまなストレージ エンジンを提供しており、次のように表示され...

Linux で仮想コンソール セッションをロックする方法

共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...

MySQL データベース面接に必須の 3 つのログの紹介

目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...

jQueryでフルスクリーンスクロール効果を実現

この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...

メニューのホバー効果を実現するCSS3

結果: html <nav id="nav-1"> <a cl...

MySQL の null 可能フィールドは NULL に設定する必要がありますか、それとも NOT NULL に設定する必要がありますか?

MySQL を頻繁に使用する人は、次のような状況に遭遇する可能性があります。 1. フィールド タ...

iframeを使用してページを呼び出すとページがキャッシュされるかどうかの簡単な分析

最近、毎日変更されるページを iframe を使用して呼び出す必要があるプロジェクトがあります。その...

JavaScript ベースで年・月・日の 3 階層連携を実現

この記事では、年、月、日の3段階のリンクを実現するためのJavaScriptの具体的なコードを参考ま...