概要このプロジェクトの目的は、ピボット テーブルと 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux システムで Centos7 を使って ElasticSearch ミドルウェアと共通インターフェースを構築するデモ
>>: リクエスト IP の最後のセグメントに基づいてトラフィックを分割するように Nginx を構成する方法
目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...
1. MySQL に接続してログインしたら、まず MySQL でイベント機能が有効になっているかどう...
プログラムサービスがgitlab ci/cdと統合されたk8sを使用してデプロイされている場合、gi...
ファイル内の文字列の数を数えることは、実際には砂の中の石を探すようなものです。ある人は、石を見た後に...
序文JavaScriptはWebフロントエンドで広く使われている言語の一つであり、Webアプリケーシ...
フラットなウェブサイト構造の本質はシンプルさです。コンテンツの重要なポイントを強調し、ページの装飾効...
最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...
今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...
1. 新サイトホームページのリンクレイアウト1. リンク配置の位置:リンク配置の位置によって、リンク...
「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...
目次1. ダウンロード2. 展開1.Nginxのデプロイメント2. ModSecurityの展開3....
この記事は主にインターネット上の他のチュートリアルを参考にしています。実際に操作した上でのまとめです...
序文ページを共有するときに、ブラウザの戻るボタンをクリックしてプロジェクトのホームページに戻り、訪問...
Linux での MySQL データベースのマスター/スレーブ同期構成の利点は、この方法をバックアッ...
目次マウスジョイント マウスジョイント距離ジョイント距離ジョイントモータージョイント直動ジョイント変...