Vue2.x プロジェクトのパフォーマンス最適化のためのコード最適化の実装

ご存知のとおり、Vue プロジェクトは双方向データ バインディングと仮想 DOM を基盤として使用しています。DOM の頻繁なレンダリングの代わりにデータ駆動型を使用すると非常に効率的です。開発者向けにすでに最適化されています。では、なぜ Vue のパフォーマンス最適化というものが存在するのでしょうか。

Vue 2.x は現在、webpack などのサードパーティのパッケージングおよび構築ツールを使用しており、他のサードパーティのプラグインもサポートしているため、プロジェクトでこれらのツールを使用する場合、異なる操作によって実行またはパッケージ化の効率に異なる影響が出る可能性があります。以下では、最適化の方向性について詳しく説明します。

1 v-ifとv-showの使用

• v-if が false の場合、DOM はビューにレンダリングされません。true の場合、DOM はビューにレンダリングされます。
• v-show 要素は初期条件に関係なく常にビューにレンダリングされ、CSS 表示プロパティに基づいて単純に切り替えられます。

ベストプラクティス: 頻繁に切り替える要素には v-show を使用し、あまり変更されない要素には v-if を使用します。

2. 計算と監視を区別する

• computed: 他のプロパティ値に依存する計算プロパティです。計算値はキャッシュされます。依存するプロパティ値が変更された場合にのみ、計算値が次に取得されたときに計算値が再計算されます。
• Watch: これは、特定のデータの監視コールバックに似た「観察」機能です。監視対象データが変更されるたびに、後続の操作のためにコールバックが実行されます。

ベスト プラクティス: 他のデータに依存する数値計算を実行する必要がある場合は、computed を使用する必要があります。computed のキャッシュ プロパティを利用して、値を取得するたびに再計算する必要がなくなるためです。データが変更されたときに非同期またはコストのかかる操作を実行する必要がある場合は、watch を使用する必要があります。watch オプションを使用すると、非同期操作 (API にアクセス) を実行し、操作を実行する頻度を制限し、最終結果を取得する前に中間状態を設定できます。これらは計算プロパティでは実行できないことです。

3 v-for トラバーサルでは、アイテムにキーを追加し、同時に v-if を使用しないようにする必要があります。

キーを追加しないと、通常はエラーが発生します。キーを追加すると、Vue の内部メカニズムがリストデータを正確に見つけやすくなります。更新時に、新しいステータス値と古いステータス値を比較して、差分をより迅速に見つけます。

v-for は v-if よりも優先度が高くなります。毎回配列全体を走査する必要がある場合、特に小さな部分のみをレンダリングする必要がある場合は、速度に影響します。必要に応じて、計算プロパティに置き換える必要があります。

<ul>
 <li v-for="adminUsers 内のユーザー" :key="user.id">
  {{ユーザー名}}
 </li>
</ul>

<スクリプト>
エクスポートデフォルト{
 データ （） {
 { ユーザー: [] } を返します
 },
 計算: {
 管理者ユーザー: 関数(){
 this.users.filter(()=>user.isAdmin) を返します
 }
 }
}
</スクリプト>

4. 長いリストの純粋な表示のパフォーマンス最適化

表示のみに使用されるデータの場合、Vue を使用してデータをハイジャックする必要はなく、オブジェクトをフリーズするだけで済みます。

エクスポートデフォルト{
 データ （） {
 戻る {
 ユーザー: []
 }
 },
 作成された（）{
 axios.get('/api/users').then((res)=>{
 this.users = Object.freeze(res.data.users)
 })
 }
}
 

5. イベントの破壊

Vue コンポーネントが破棄されると、他のインスタンスとの接続が自動的にクリーンアップされ、すべての命令とイベント リスナーがアンバインドされますが、これはコンポーネント自体のイベントに対してのみ行われます。 js で addEventListene やその他のメソッドが使用されている場合、イベントは自動的に破棄されません。メモリ リークを回避するには、コンポーネントが破棄されるときに、次のようなイベントのリスナーを手動で削除する必要があります。

作成された() {
 イベントリスナーを追加します('click'、this.click、false)
},
破棄する前に() {
 イベントリスナーを削除します('click'、this.click、false)
}
 

6. 画像リソースの遅延読み込み

vue-lazyload プラグインを使用します:

インストール

npm をインストール vue-lazyload --save-dev

man.js リファレンス

'vue-lazyload' から VueLazyload をインポートします。
Vue.use(VueLazyload)
// またはカスタマイズ Vue.use(VueLazyload, {
 プリロード: 1.3、
 エラー: 'dist/error.png',
 読み込み中: 'dist/loading.gif',
 試行回数: 1
})

imgタグを変更する

<img v-lazy="/static/img/1.png">

7 ルーティングの遅延読み込み

Vue はシングルページ アプリケーションであり、多くのルートが導入されている可能性があります。そのため、webpcak でパッケージ化されたファイルは非常に大きくなります。ホームページに入ると、読み込まれるリソースが多すぎて、ページに白い画面が表示され、ユーザー エクスペリエンスが向上しません。異なるルートに対応するコンポーネントを異なるコード ブロックに分割し、ルートにアクセスしたときに対応するコンポーネントをロードできれば、より効率的になります。これにより、最初の画面の表示速度は大幅に向上しますが、他のページの速度は低下する可能性があります。

const Foo = () => import('./Foo.vue')
const ルーター = 新しい VueRouter({
 ルート: [
 { パス: '/foo'、コンポーネント: Foo }
 ]
})

8. サードパーティのプラグインをオンデマンドで導入する

サードパーティのライブラリを使用する場合は、グローバルではなくオンデマンドでインポートするのが最適です。サードパーティのライブラリには多くのプラグインがあり、すべてをインポートするとパッケージ化に時間がかかるためです。たとえば、Element UI、Vue の Ant Design、その他の UI ライブラリなどです。

オンデマンドインポート

'vue' から Vue をインポートします。
'ant-design-vue' から DatePicker をインポートします。
Vue.use(DatePicker);
 

グローバル輸入

'ant-design-vue' から Antd をインポートします。
Vue.js で Antd をビルドします。

9 無限リストのパフォーマンスの最適化

無限スクロールのリストをレンダリングする場合は、ウィンドウ化テクノロジを使用してパフォーマンスを最適化する必要があります。コンテンツの小さな領域のみをレンダリングすればよく、コンポーネントの再レンダリングや DOM ノードの作成にかかる時間が短縮されます。 この無限リストのシナリオを最適化するには、次のオープンソース プロジェクト vue-virtual-scroll-list と vue-virtual-scroller を参照できます。
手順を読むには Github にアクセスしてください。

10. サーバーサイドレンダリング（SSR）またはプリレンダリング

一般的に、シングルページ アプリケーションでは、ページのレンダリングはブラウザ側で完了し、リクエストを送信することでバックグラウンドからデータが取得されます。一方、サーバー側レンダリング (SSR) では、ページ要素 (HTML) の構造がサーバー側で既に構築されており、ページ全体が直接クライアントに返されます。
では、SSR の利点と欠点は何でしょうか。

• より優れた SEO: Web クローラーはページ情報を直接クロールできるため、検索エンジンに含まれやすくなります。一方、Ajax 非同期リクエストの内容は含まれないため、SSR によってレンダリングされる完全なページ情報は SEO にさらに役立ちます。
• サポートされているフック関数は beforCreate と created のみであり、サーバーは Node Server 環境にある必要があります。
• より高度なサーバー構成が必要：データ処理やページレンダリングが含まれるため、サーバーコストが大きくなる

最初の画面の読み込み速度や SEO に対する要件が高い場合は、SSR レンダリングを使用できます。

PS: 最適化は単なる提案です。最適化の難易度、影響範囲、適用可能なシナリオ、他のモジュールへの影響の有無、最適化効果が明らかかどうかなど、プロジェクトに適しているかどうかを検討する必要があります。あなたに似合うものが一番です！

これで、Vue2.x プロジェクトのパフォーマンス最適化のためのコード最適化の実装に関するこの記事は終了です。より関連性の高い Vue2.x コード最適化コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。