Vue.js アプリケーションのパフォーマンス最適化分析 + ソリューション

Vue.js アプリケーション全体の開発に一生懸命取り組んでいるとします。しかし、パフォーマンスは優先事項ではありませんでした。現在、アプリの読み込み、移動、送信、またはユーザーアクションの実行には時間がかかります。ユーザーはこのような遅延したエクスペリエンスを望んでいると想定すべきでしょうか、それとも Vue js アプリケーションに長く留まることを好むでしょうか?

残念ながら、答えはノーです。統計によると、読み込みに 3 秒以上かかるアプリには 53% のユーザーが時間を費やさないことが証明されています。パフォーマンスが最適化されたアプリケーションを構築すると、ユーザーエクスペリエンスがスムーズになり、ユーザーとのやり取りが徐々に増加します。

残念ながら、ほとんどの開発者はパフォーマンスの重要性を理解しておらず、パフォーマンスの問題を抱えた大規模なアプリケーションを構築することになります。あなたはこれらの開発者の一人になりたくないと思います。アプリケーションの開発は困難ですが、最適化されたパフォーマンスのアプリケーションの開発はさらに困難です。あなたの課題を軽減するために、私は Vuejs パフォーマンスの最適化に関するこのブログを作成しました。これは、 Vue.jsアプリケーションの構造を最適化する方法と、Vue js パフォーマンスを管理する方法を理解するのに役立ちます。

1. はじめに

VueJS は、Web サイトを開発するための最も人気があり安定したJavaScriptフレームワークですが、他のフレームワークと同様に、無視するとパフォーマンスが低下します。

確実な Vue js パフォーマンス最適化のヒントを探している場合、または大規模なアプリケーション向けの Vue のベストプラクティスを知りたいだけの場合は、このブログが最適です。あまり詳細には立ち入らずに、Vue js アプリケーションのパフォーマンスを最適化する方法について詳しく説明しましょう。

まず Vue js アプリケーションアーキテクチャを理解することが重要です。その重要性を理解することで、私たちはそれがいかに重要であるかを認識し、より真剣に受け止め始めるでしょう。それでは、大規模なアプリケーションを最適化する必要がある理由を見てみましょう。あらゆるアプリケーションの最適化は不可欠ですが、このブログでは Vue のパフォーマンス最適化に焦点を当てて説明します。

2. Vue JS のパフォーマンス最適化が必要な理由は何ですか?

何千行ものコードを書いた後でも、ユーザーアクションの実行に時間がかかるために、ユーザーがアプリケーションに時間を費やしたくないと思うような状況は、プログラマーなら誰も望んでいません。

世界中の製品オーナーは、スムーズなインタラクションを第一に考えるユーザーのために製品を開発しています。プログラマーが Vue js のパフォーマンス、速度、効率に満足していない場合、それはエンドユーザーが Vue JS アプリケーションアーキテクチャにどれだけの労力を費やしたかとは関係ありません。

そうです、それが、エンドユーザーのニーズを最終的に満たすパフォーマンスを最適化するための必須標準となった理由です。

3. Vueのパフォーマンスが低い主な理由

Vue js がどのように動作するか、そして Vue js のパフォーマンスが低い重要な理由を見てみましょう。

Vue のパフォーマンスが低下する理由は、Vue js アプリケーションの構造によって異なります。

たとえば、 Vue jS シングルページアプリケーション (SAS) のパフォーマンスが低下する重要な理由の 1 つは、サーバー側レンダリング (SSR) を処理する VueJS プロジェクトとは異なる可能性があります。

開発者がアプリケーションが SPA であるか SSR を備えているかを検討できる主な理由は、バンドルサイズです。バンドルサイズが大きくなるほど、Vue js のパフォーマンスは低下します。したがって、バンドルサイズはアプリケーションのパフォーマンスに反比例すると結論付けることができます。

大規模なVue jsアプリケーションの背後にある一般的な理由 -

サードパーティライブラリの不適切な使用
コード分割と遅延読み込みを無視する
API リクエストの不要なヒット
JSファイルとCSSファイルが正しく構築されていない

バンドルサイズを縮小する方法について説明する前に、Vue js と Vue js エンタープライズアプリケーションのバンドルサイズを確認する方法を見てみましょう。

VueJS アプリのサイズを確認するにはどうすればいいですか?
Vue js アプリケーションのサイズを確認する 2 つの方法を紹介します。

1. レポートを生成する

使用されているさまざまなパッケージのサイズを視覚的に示すレポートを生成します。さらに、予想よりも多くのスペースを占めるパッケージを置き換える方法も確認できます。「レポートの生成」コマンドを使用してアプリケーションレポートを生成できます。このコマンドは、webpack-bundle-analyzer がインストールされているアプリケーションのレポートを作成することに注意してください。

上記のコマンドを実行した後、packages.jsonファイルを開き、次の内容を追加します。

「ビルドレポート」: 「vue-cli-service ビルド --report」

次にこれを実行します。

npm ビルドレポートを実行します

これをすべて実行すると、dist フォルダーに「report.html」という名前のファイルが作成されます。
ファイルを開くと、これが表示されます

Vue.js アプリケーションのパフォーマンス最適化により、専門的な分析とソリューションが提供されます#yyds干货盘点# _vue

2. コマンドを実行し、npm run buildを実行します。

次のような画像が表示されます。

Vue.js アプリケーションのパフォーマンス最適化により、専門的な分析とソリューションが提供されます #yyds干货盘点# _vue_02

さて、バンドルのサイズを見つけた後、それを縮小することが課題となります。これ以上の説明は省略して、Vue.js アプリケーションのパフォーマンスを最適化する方法の検討に移りましょう。

4. Vue js アプリケーションのパフォーマンスを最適化するにはどうすればいいですか?

ここでは、Vue.js アプリケーションのパフォーマンスを最適化するために実装できる VueJS パフォーマンスのヒントをいくつか紹介します。

1. Vue js での遅延読み込み

名前の通り、 Vue jsの遅延読み込みは、ユーザーが実際にそのモジュールを必要とするときにアプリケーション内のモジュールを遅延読み込みする方法です。ほとんどの場合、ユーザーが Web サイトにアクセスするたびにJavaScriptバンドル内のすべてのモジュールをロードする必要はありません。

一部のコンポーネントには、必要に応じて読み込むことができるパターンとツールヒントがあります。 2 つまたは 3 つのモーダルまたはツールチップを扱っている場合、結果は表示されませんが、多数のモーダルとツールチップを含む大規模な Vue アプリがある場合、それらをすべて一度に読み込むとパフォーマンスが低下します。

ページが読み込まれるたびにバンドル全体を読み込むのは、単純に意味がありません。そのため、バンドルを分割して使用時にロードするのに役立ちます。この方法では、不要なコードをダウンロードして解析しないため、時間が節約されます。

ウェブサイトで使用されている実際のJavaScriptコードを検査するには

Click devtools
cmd + shift + p
Type coverage
Click record

赤いハイライトのメッシュは使用されず、遅延ロードできます。遅延読み込みを利用することで、バンドルサイズを 60% 削減できます。

以上が、大規模にコンポーネントとモジュールを遅延ロードする必要がある理由と内容のすべてです。その方法を探ってみましょう。

通常のインポートの代わりにWebpack動的インポートを使用して、遅延ロードする必要があるモジュールを分離できます。

これは JavaScript ファイルをインポートする方法ですよね?

// デモ.js
constデモ = {
  テストデモ: 関数 () {
    console.log("これは単なるデモです!")
  }
}
デフォルトのエクスポートデモ

// アプリ.js
'./demo.js' からデモをインポートします。
デモ.testDemo()

この方法でインポートすると、demo.js ファイルがアプリケーションの node.js として依存関係グラフに追加され、バンドルされます。したがって、バンドルがロードされるたびに、demo.js は必要な場所にロードされます。

しかし、何らかのユーザーアクションに応じてのみ demo.js をロードしたい場合はどうすればよいでしょうか。この場合、動的インポートを実装し、必要な場合にのみこのモジュールをダウンロードするようにアプリケーションに指示します。

以下は、Vue.jsアプリケーションをテストするための動的インポートを実行するための上記コードの変更です。

// アプリ.js
const getDemo = () => import('./demo.js')

// 後で、ユーザーアクションタスクがルートをヒットする位置に配置されます
getDemo()
  .then({ testDemo } => testDemo())

したがって、デモモジュールを直接インポートするのではなく、インポート関数を返す関数を宣言していることがわかります。これは動的インポートと呼ばれるもので、 Webpackこのモジュールを別のファイルに保持する必要があることを認識します。動的インポートを含む関数 getDemo Demo（）， 、Promise を返します。基本的には、依存関係グラフからノード (ここで示したもの) を切り取り、必要に応じて (ルートの変更やクリックなど) ダウンロードします。デモでインポートされたモジュール .js もバンドルから分離されることに注意してください。

Vue js での遅延読み込みは、バンドルサイズを削減し、パフォーマンスを最適化するためのベストプラクティスの 1 つです。明示的なユーザーアクションがない限りどのモジュールが必要ないかを把握し、パフォーマンスを向上させるためにそれらを遅延ダウンロードすることを習慣にしてください。

2. ルートベースのコード分割

ダッシュボードと連絡先の 2 つの Web ページを含む小さなVueJS Web サイトを開発する必要があるとします。これら 2 つのページの場合でも、プロジェクトに vue-router を実装する必要があります。

ルートファイルは次のようになります -

// ルーティング.js
'./Dashboard.vue' からダッシュボードをインポートします。
'./Contact.vue' から Contact をインポートします。

定数ルート = [
  { パス: '/'、コンポーネント: ダッシュボード }
  { パス: '/contact, コンポーネント: Contact }
]

この標準的なコーディング手法により、ユーザーが別のページにアクセスした場合でも (ダッシュボードも連絡先もダウンロードしたくない)、コンポーネント ( DashboardとContact (lodash を使用)) がダウンロードされます。これは、同じbundle内に 2 つのルートがあるためです。 2 ページ追加でダウンロードするのは大したことではないと思うかもしれません。ただし、多数のパッケージを含む大規模なアプリケーションで作業する場合は重要です。

不要なコンポーネントのダウンロードを避けるために、コード分割を使用します。

この目的のために、異なるパスに異なるパッケージを使用し、動的インポートの手法に従います。

コンポーネントは直接ではなく、動的ルーティングを通じてインポートされるようになりました。これを実現する方法を見てみましょう。

// ルーティング.js 
定数ルート = [
  { パス: '/'、コンポーネント: () => import('./Dashboard.vue') }
  { パス: '/contact, コンポーネント: () => import('./Contact.vue') }
]

この方法に従うことで、バンドルのサイズを半分に減らすことができます。ただし、そのためには、どのコンポーネントが動的インポートに使用できるかを決定する必要があります。信じてください。このようなvue js演習は、アプリケーションのパフォーマンスを向上させるのに役立ちます。

3.Vue js プリロードコンポーネント

Vue js のプリロードコンポーネントについてさらに詳しく見ていきましょう。これは、ユーザーがページを要求する前にリソースをダウンロードする手法です。たとえば、ほとんどのユーザーがカテゴリページから製品ページにアクセスすると判断した場合は、製品ページのプリフェッチを検討できます。プリフェッチは最初のレンダリング後にのみ実行されることを覚えておく必要があります。プリフェッチのもう 1 つの利点は、パフォーマンスに影響を与えずに遅延読み込みの望ましくない結果を排除できることです。

実装するには、<link rel="pre-insert" href="url" /> タグを追加するだけです。とても簡単ですよね？ただし、Webpack ではモジュールの順序に基づいてバンドル名が生成されるため、これは当てはまりません。幸いなことに、 webpackパッケージにはプリロードを簡単にするmagic commentsがあります。 magic commentsビルドプロセスに影響を与えるコメントです。モジュールをプリフェッチするには、 - /* webpackPrefetch: true */を使用する必要があります。以下に示すように、動的インポートで保持するだけです。

コンポーネント:
  ModalView: () => import(/* webpackPrefetch: true */ './ModalView.vue')
}

コードの実行中に、Webpack はマジックコメントを検索し、ヘッダーセクションに <link rel="pre-insert" url="resource-url" /> を追加します。

< link rel="prefetch" href="modal-view 付きチャンクへのパス" rel="external nofollow" />

ユーザーがModalViewモジュールを要求すると、事前に処理され、すぐにアクセスできるようになります。

4. サードパーティライブラリを最適化する

バンドルサイズを確認し、それが理想的な数値を超えていて驚いた場合、それは必ずしもコードが原因というわけではありません。多くの場合、原因はロードされたサードパーティライブラリの使用にあります。はい、私たちは皆、サードパーティのライブラリを、それがアプリケーションのパフォーマンスにどのような影響を与えるかを知らずに使用しています。私たちのコードはおそらくバンドルサイズの一部になるでしょう。

bundlephobia を使用すると、さまざまなライブラリがパフォーマンスにどのように影響するかを理解できます。この素晴らしい Web サイトに Vuejs ライブラリ名を追加するだけで、Web サイトのデータに関連する多くの知識が得られます。たとえば、私はlodashライブラリを使用しました。ここに情報があります。

ライブラリとそれがパフォーマンスにどのように影響するかについて詳しく知ることができたら素晴らしいと思いませんか?

どの Vue js ライブラリが VueJS アプリケーションに大きな影響を与えるかを知りたい場合は、ここをクリックしてパッケージをスキャンできます。それ以外にも、バンドルサイズを分析するさまざまな方法を特定しました。

ライブラリを選択する前に、次の質問を自問してください。

なぜライブラリを使用する必要があるのでしょうか?
目的を達成するにはライブラリ全体が必要ですか?
ライブラリの選択はどのような影響を与えますか?
ライブラリを使用するのにパフォーマンスに優しい方法はありますか?

Vue ライブラリを選択した場合にこれをどのように処理するかを見てみましょう。

プログラムに何らかの機能が必要な場合は、lodash ライブラリをインストールします。

しかし、lodashがパフォーマンスにどれほど影響を与えるかを知っているので、ライブラリ全体をインポートするのではなく、次のように関数のみをインポートします。

'lodash/isEmpty` から isEmpty をインポートします

信じてください。さまざまなライブラリでこのような小さな変更を加えると、より重大で顕著な影響が生じます。

これまで、大規模アプリケーションの VueJS bundleサイズとそれに関連する VueJS パフォーマンスのヒントについて説明しました。パフォーマンスを最適化するには、 bundleサイズを縮小することが唯一の解決策ではありません。ユーザーが待たなくて済むように、一部のアセットを再利用する必要があります。次のステップでは、ブラウザキャッシュを再利用する方法を見てみましょう。

5. ブラウザキャッシュを使用する

バンドルサイズについてはすでに十分に説明しました。この最後のステップでは、データのキャッシュに焦点を当てます。

キャッシュは、要求されたときにすぐにアクセスできるように、選択したデータを保存する技術です。

ブラウザは閉じられるまでデータをメモリキャッシュに保持します。

観察できます。

開発者ツールを開き、「ネットワーク」タブを選択します。任意の Web サイトにアクセスし、数回リロードします。 CSS、画像、 javascript 、 HTMLなどの一部の静的ファイルには、以下に示すようにメモリキャッシュがあることに気付くでしょう。つまり、そのようなファイルはメモリキャッシュから提供されることになります。

ブラウザはキャッシュを独自にうまく処理します。何を追加できるのかと考えているかもしれません。したがって、VueJS アプリ構造のどの部分が他の部分に比べてほとんど変更されないかを把握し、その部分をキャッシュできるようにする必要があります。

プロジェクト構造が次のようになっていると仮定します。

Main.[hash].js - プロジェクトのルートコンポーネント
共通 .[hash].js - プロジェクトの共通コンポーネント
Dashboard.[hash].js - ダッシュボード固有のコンポーネント
Contact.[hash].js - 連絡先固有のコンポーネント

私たちが気にするのは共通の部分です。すべての依存関係をここに保存できます。依存関係は頻繁に変更される可能性は低く、さらにこれを使用してデータをキャッシュすることもできます。これらのコンポーネントを分離することで、ユーザーの時間を節約できます。依存関係をさまざまな部分に分割する方法の詳細については、こちらをご覧ください。

6. 画像を最適化して圧縮する

画像はアプリのバンドルサイズに大きな影響を与えます。アプリケーションが比較的大きな画像をレンダリングすると、実際にはアプリケーションの読み込み時間が長くなる可能性があります。できることは、画像の提供方法を最適化することです。このためには、画像をローカルで圧縮するか、CDN を使用します。これを達成する方法を見てみましょう -

• ローカルイメージを圧縮する

アプリケーションが 6 ～ 7 枚の画像で構成されている場合は、ローカルで提供できます。画像はファイルサイズに影響するため、ファイルサイズを縮小するには画像を圧縮する必要があります。画像を圧縮するための無料オンラインツールトップ5をご紹介します。

アドビフォトショップ
シュリンクオマティック
画像圧縮ツール
圧縮ナウ
小さなPNG

• CDNイメージを最適化する

大量のメディアを使用するアプリケーションを扱う場合は、CDN で画像を最適化することをお勧めします。 CDN は、ピクセル化や UI への影響なしに画像サイズを最大 70% まで縮小できる変換機能を提供します。この手法は、アプリケーションに 12 ～ 15 個の画像がある場合に最適です。以下のプラットフォームを通じてメディアを管理できます -

イメージキット
雲の上の

以上が、 VueJSアプリケーションのパフォーマンスを最適化する方法についての説明です。このブログを通じて、皆さんの質問や疑問がすべて解決されることを願っています。

結論は：
どれだけ大規模なアプリケーションを開発する場合でも、ある時点で最適化する必要があります。

これで、Vue.js アプリケーションのパフォーマンス最適化分析 + ソリューションに関するこの記事は終了です。Vue.js アプリケーションのパフォーマンス最適化分析に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: