Vueプロジェクトのパフォーマンスの最適化-実用ガイド

序文

双方向のデータバインディングと仮想DOMテクノロジーにより、Vueフレームワークは、フロントエンド開発におけるDOM操作の最も汚くて最も疲れる部分に対処するのに役立ちます。DOMの操作方法と操作方法について考える必要はもうありません。 DOMが最も効率的ですが、それでもVueプロジェクトにありますプロジェクトの最初の画面の最適化やWebpackコンパイル構成の最適化などの問題があるため、Vueプロジェクトのパフォーマンスの最適化に注意を払う必要があります。プロジェクトのパフォーマンスが向上し、ユーザーエクスペリエンスが向上すること。この記事は、実際のプロジェクトの最適化の実践を通して著者によって要約されています。読者が自分のプロジェクトを最適化するのに役立つように、この記事を読んだ後、いくつかの啓発的な考えを持ってほしいと思います。この記事の内容は、次の3つの部分に分かれています。

Vueコードレベルの最適化。
webpack構成レベルの最適化。
基本的なWebテクノロジーレベルの最適化。

私は長い間整理に一生懸命取り組んできました、そして私は手動で好きで励ますことを望んでいます〜

githubのアドレスは次のとおりです：http ：//github.com/fengshi123/…、すべての著者のブログの要約、そしてフォローしてスターを付けることを歓迎します〜

1.コードレベルでの最適化

1.1、v-ifとv-showは使用シナリオを区別します

V-IF である真、それは条件ブロック内のイベントリスナーとサブコンポーネントが適切にスイッチング処理中に破壊され、再建されていることを保証しますので、条件付きのレンダリング;それもある怠惰：条件は初期レンダリング時に偽であれば、何もしません実行-条件ブロックは、条件が初めて真になるまでレンダリングされません。

v-show は、初期条件に関係なく、はるかに単純であり、要素は常にレンダリングされ、CSSの表示プロパティに基づいて単純に切り替えられます。

したがって、v-ifは、実行時に条件がほとんど変更されず、条件を頻繁に切り替える必要がないシナリオに適しています。v-showは、条件を頻繁に切り替える必要があるシナリオに適しています。

1.2。計算された使用シナリオと監視された使用シナリオの区別

計算済み：他の属性値に依存する計算済み属性であり、計算値がキャッシュされます。依存する属性値が変更された場合にのみ、次に計算値が取得されたときに計算値が再計算されます。

監視：これは 、一部のデータの監視コールバックと同様に、「監視」の機能であり、監視対象のデータが変更されるたびに、後続の操作のためにコールバックが実行されます。

アプリケーションシナリオ：

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

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

（1）V-トラバーサルの場合、アイテムにキーを追加する必要があります

リストデータをトラバースしてレンダリングするときは、Vue.jsの内部メカニズムがリストデータを正確に検出できるように、アイテムごとに一意のキー値を設定する必要があります。状態が更新されると、新しい状態の値が古い状態の値と比較され、差分の位置がより速くなります。

（2）v-トラバーサルの場合、v-ifを同時に使用しないでください

v-forはv-ifよりも優先度が高くなります。毎回配列全体をトラバースする必要がある場合、特に配列の一部をレンダリングする必要がある場合は、速度に影響します。次の場合は、計算されたプロパティに置き換える必要があります。必要。

推奨：

<ul>
 <li
 v-for="user in activeUsers"
 :key="user.id">
 {
   
   { user.name }}
 </li>
</ul>
computed: {
 activeUsers: function () {
 return this.users.filter(function (user) {
	 return user.isActive
 })
 }
}
复制代码

推奨されません：

<ul>
 <li
 v-for="user in users"
 v-if="user.isActive"
 :key="user.id">
 {
   
   { user.name }}
 </li>
</ul>
复制代码

1.4、ロングリストのパフォーマンスの最適化

VueはObject.definePropertyを介してデータをハイジャックし、ビューがデータの変更に応答することを認識します。ただし、コンポーネントが純粋なデータ表示であり、変更がない場合もあります。データをハイジャックするためにVueは必要ありません。データの表示により、コンポーネントの初期化時間を大幅に短縮できます。Vueによるデータの乗っ取りを禁止するにはどうすればよいですか？Object.freezeメソッドを使用してオブジェクトをフリーズできます。オブジェクトがフリーズすると、変更できなくなります。

export default {
 data: () => ({
 users: {}
 }),
 async created() {
 const users = await axios.get("/api/users");
 this.users = Object.freeze(users);
 }
};
复制代码

1.5。イベントの破壊

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

created() {
 addEventListener('click', this.click, false)
},
beforeDestroy() {
 removeEventListener('click', this.click, false)
}
复制代码

1.6、画像リソースの遅延読み込み

画像が多すぎるページの場合、ページの読み込み速度を上げるために、多くの場合、最初にページの表示領域にない画像を読み込み、次に表示領域にスクロールしてから画像を読み込む必要があります。これにより、ページの読み込みパフォーマンスが大幅に向上し、ユーザーエクスペリエンスも向上します。プロジェクトではVueのvue-lazyloadプラグインを使用します。

（1）プラグインをインストールします

npm install vue-lazyload --save-dev
复制代码

（2）エントリファイルman.jsで紹介して使用する

import VueLazyload from 'vue-lazyload'
复制代码

次に、vueで直接使用します

Vue.use(VueLazyload)
复制代码

またはカスタムオプションを追加します

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
复制代码

（3）imgタグのsrc属性をvueファイルのv-lazyに直接変更し、それによって画像表示モードを遅延読み込み表示に変更します。

<img v-lazy="/static/img/1.png">
复制代码

上記はvue-lazyloadプラグインの簡単な使用法です。プラグインのその他のパラメーターオプションを確認したい場合は、vue-lazyloadのgithubアドレスを確認できます。

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

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

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

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
 routes: [
 { path: '/foo', component: Foo }
 ]
})
复制代码

1.8。サードパーティのプラグインのオンデマンド導入

プロジェクトにサードパーティのプラグインを導入する必要があることがよくあります。プラグイン全体を直接導入すると、プロジェクトのサイズが大きくなりすぎます。babel-plugin-componentを使用して、必要なコンポーネントのみを導入できます。プロジェクトのサイズを縮小します。の目標。以下は、element-uiコンポーネントライブラリをプロジェクトに導入する例です。

（1）まず、babel-plugin-componentをインストールします。

npm install babel-plugin-component -D
复制代码

（2）次に、.babelrcを次のように変更します。

{
 "presets": [["es2015", { "modules": false }]],
 "plugins": [
 [
 "component",
 {
 "libraryName": "element-ui",
 "styleLibraryName": "theme-chalk"
 }
 ]
 ]
}
复制代码

（3）main.jsにいくつかのコンポーネントを導入します。

import Vue from 'vue';
import { Button, Select } from 'element-ui';
 Vue.use(Button)
 Vue.use(Select)
复制代码

1.9。無制限リストのパフォーマンスを最適化する

アプリケーションに非常に長いまたは無限のスクロールリストがある場合は、ウィンドウテクノロジーを使用してパフォーマンスを最適化する必要があり、領域のごく一部をレンダリングするだけで、コンポーネントの再レンダリングとdomノードの作成にかかる時間を短縮できます。次のオープンソースプロジェクトvue-virtual-scroll-listおよびvue-virtual-scrollerを参照して、この無限リストシーンを最適化できます。

1.10、サーバー側レンダリングSSRまたは事前レンダリング

サーバー側のレンダリングとは、クライアント側でタグのhtmlフラグメント全体をレンダリングするVueの作業がサーバー側で完了し、サーバー側で形成されたhtmlフラグメントがクライアント側に直接返されることを意味します。このプロセスはサーバーと呼ばれます。 -サイドレンダリング。

（1）サーバー側レンダリングの利点：

より良いSEO：SPAページのコンテンツはAjaxを介して取得され、検索エンジンのクロールツールはAjaxの非同期完了を待たずにページのコンテンツをクロールするため、SPAでページをクロールできません。ページが取得されます。 Ajax Contentを介して;そしてSSRはサーバーからレンダリングされたページを直接返します（データはすでにページに含まれています）ので、検索エンジンのクロールツールはレンダリングされたページをクロールできます。
コンテンツの到着時間の短縮（最初の画面での読み込みの高速化）：SPAは、ページのレンダリングを開始する前に、すべてのVueコンパイル済みjsファイルがダウンロードされるのを待ちます。ファイルのダウンロードには一定の時間がかかるため、最初の画面のレンダリングには一定の期間が必要です。 SSRはサーバーによって直接レンダリングされ、ページはjsファイルのダウンロードとレンダリングを待たずに直接表示に戻されるため、SSRのコンテンツの到着時間は短くなります。

（2）サーバー側レンダリングのデメリット：

開発条件に関するその他の制限：たとえば、サーバー側のレンダリングは、beforeCreateとcreatedの2つのフック関数のみをサポートします。これにより、一部の外部拡張ライブラリは、サーバー側のレンダリングアプリケーションで実行する前に、特別な処理が必要になります。静的ファイルサーバー上の完全に静的なシングルページアプリケーションSPAは異なります。サーバー側のレンダリングアプリケーションは、Node.jsサーバーの実行環境にある必要があります。
サーバー負荷の増加：Node.jsで完全なアプリケーションをレンダリングすると、静的ファイルのみを提供するサーバーよりも明らかに多くのCPUリソースが消費されます。したがって、トラフィックの多い環境で使用する場合は、対応するサーバー負荷を準備してください。キャッシング戦略を賢く使用します。

プロジェクトのSEOと最初の画面のレンダリングがプロジェクトを評価するための重要な指標である場合、最高の初期読み込みパフォーマンスとSEOを達成するために、プロジェクトにはサーバー側のレンダリングが必要です。特定のVue SSRの実装については、作成者の別のファイルを参照してください。記事「VueSSR踏みつけツアー」。Vueプロジェクトでいくつかのマーケティングページ（/、/ about、/ contactなど）のSEOを改善するだけでよい場合は、ビルド時に特定のルートの静的HTMLファイルを事前にレンダリングして単純に生成する必要があります。。利点は、事前レンダリングの設定が簡単で、フロントエンドを完全に静的なサイトとして使用できることです。具体的には、prerender-spa-pluginを使用して、事前レンダリングを簡単に追加できます。

2.Webpackレベルでの最適化

2.1、Webpackは画像を圧縮します

vueプロジェクトでは、webpack.base.conf.jsのurl-loaderで制限サイズを設定して画像を処理できることを除いて、制限よりも小さい画像はbase64形式に変換され、残りは操作されません。したがって、一部の大きな画像リソースでは、リソースをリクエストするときに読み込みが非常に遅くなります。image-webpack-loaderを使用して画像を圧縮できます。

（1）まず、image-webpack-loaderをインストールします。

npm install image-webpack-loader --save-dev
复制代码

（2）次に、webpack.base.conf.jsで構成します。

{
 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 use:[
 {
 loader: 'url-loader',
 options: {
 limit: 10000,
 name: utils.assetsPath('img/[name].[hash:7].[ext]')
 }
 },
 {
 loader: 'image-webpack-loader',
 options: {
 bypassOnDebug: true,
 }
 }
 ]
}
复制代码

2.2、ES6の冗長コードをES5に減らします

Babelプラグインは、ES6コードをES5コードに変換するときに、次のES6コードなどのいくつかの補助関数を挿入します。

class HelloWebpack extends Component{...}
复制代码

このコードを正常に実行できるES5コードに変換する場合、次の2つの補助機能が必要です。

babel-runtime/helpers/createClass // 用于实现 class 语法
babel-runtime/helpers/inherits // 用于实现 extends 语法 
复制代码

デフォルトでは、Babelはこれらの依存ヘルパー関数コードを各出力ファイルに埋め込みます。複数のソースコードファイルがこれらのヘルパー関数に依存している場合、これらのヘルパー関数のコードが何度も表示されるため、コードが冗長になります。これらのヘルパー関数のコードが再表示されないようにするには、それらに依存するときにrequire（ 'babel-runtime / helpers / createClass'）を介してインポートし、1回だけ表示できるようにします。babel-plugin-transform-runtimeプラグインは、関連する補助関数をimportステートメントに置き換えることでこの効果を実現するために使用され、それによってbabelによってコンパイルされたコードのファイルサイズを削減します。

（1）まず、babel-plugin-transform-runtimeをインストールします。

npm install babel-plugin-transform-runtime --save-dev
复制代码

（2）次に、.babelrc構成ファイルを次のように変更します。

"plugins": [
 "transform-runtime"
]
复制代码

プラグインの詳細を確認したい場合は、babel-plugin-transform-runtimeの詳細な紹介を確認できます。

2.3、公開コードを抽出する

各ページのサードパーティライブラリとパブリックモジュールがプロジェクトで抽出されない場合、プロジェクトには次の問題が発生します。

同じリソースが繰り返し読み込まれ、ユーザートラフィックとサーバーコストが無駄になります。
各ページにロードする必要のあるリソースが大きすぎるため、Webページの最初の画面のロードが遅くなり、ユーザーエクスペリエンスに影響を及ぼします。

したがって、上記の問題を最適化するには、複数のページの共通コードを別々のファイルに抽出する必要があります。Webpackには、複数のチャンクの共通部分を抽出するために特別に使用されるCommonsChunkPluginが組み込まれています。プロジェクトでのCommonsChunkPluginの構成は次のとおりです。

// 所有在 package.json 里面依赖的包，都会被打包进 vendor.js 这个文件中。
new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function(module, count) {
 return (
 module.resource &&
 /\.js$/.test(module.resource) &&
 module.resource.indexOf(
 path.join(__dirname, '../node_modules')
 ) === 0
 );
 }
}),
// 抽取出代码模块的映射关系
new webpack.optimize.CommonsChunkPlugin({
 name: 'manifest',
 chunks: ['vendor']
})
复制代码

プラグインの詳細を確認したい場合は、CommonsChunkPluginの詳細な紹介をご覧ください。

2.4、テンプレートの事前コンパイル

DOMのテンプレートまたはJavaScriptの文字列テンプレートを使用する場合、テンプレートは実行時にレンダリング関数にコンパイルされます。通常、このプロセスは十分に高速ですが、パフォーマンスに敏感なアプリケーションではこの使用を避けることをお勧めします。

テンプレートをプリコンパイルする最も簡単な方法は、単一ファイルコンポーネントを使用することです。関連するビルド設定はプリコンパイルを自動的に処理するため、ビルドされたコードには、元のテンプレート文字列ではなく、コンパイルされたレンダリング関数がすでに含まれています。

webpackを使用していて、JavaScriptファイルとテンプレートファイルを分離したい場合は、vue-template-loaderを使用できます。これにより、ビルドプロセス中にテンプレートファイルをJavaScriptレンダリング関数に変換することもできます。

2.5、コンポーネントのCSSを抽出します

単一ファイルコンポーネントを使用する場合、コンポーネント内のCSSは、スタイルタグの形式でJavaScriptを介して動的に挿入されます。これには実行時のオーバーヘッドがわずかにあり、サーバー側のレンダリングを使用すると、「スタイルなしコンテンツ（fouc）のちらつき」が発生します。すべてのコンポーネントのCSSを同じファイルに抽出すると、この問題を回避できます。また、CSSをより適切に圧縮してキャッシュできるようになります。

詳細については、このビルドツールのそれぞれのドキュメントを確認してください。

webpack + vue-loader（vue-cliのwebpackテンプレートは事前設定されています）
Browserify + vueify
ロールアップ+ロールアップ-プラグイン-vue

2.6、SourceMapを最適化する

プロジェクトをパッケージ化した後、開発中の複数のファイルのコードを1つのファイルにパッケージ化し、圧縮して余分なスペースを削除し、babelでコンパイルした後、コンパイルされたコードが最終的にオンライン環境で使用されます。処理されたコードとソースコードの大きな違い。バグがある場合、圧縮されたコードの場所を見つけることはできますが、開発環境でコードを見つけることはできません。開発の位置を調整するのは簡単ではありません。問題、そのため、sourceMapが登場しました。これは、不正なデバッグコードの問題を解決するためのものです。

SourceMapのオプションの値は次のとおりです（+記号が多いほど速度が速くなり、記号が多いほど速度が遅くなり、oは中速を意味します）

推奨される開発環境：cheap-module-eval-source-map

実稼働環境の推奨事項：cheap-module-source-map

その理由は次のとおりです。

cheap：ソースコードの列情報は効果がないため、パッケージ化されたファイルには列関連の情報を含めたくありません。パッケージ化の前後で依存関係を確立できるのは行情報だけです。したがって、開発環境であろうと本番環境であろうと、パッケージ化の前後の列情報を無視するために、基本的なタイプの安価なものを追加したいと思います。
モジュール ：開発環境であろうと正式な環境であろうと、バグのソースコードの特定の場所を見つけることを望んでいます。たとえば、特定のVueファイルがエラーを報告した場合、特定のVueファイルを見つけることを望んでいます。したがって、モジュール構成も必要です。
soure-map ：source-mapは、パッケージ化されたモジュールごとに個別のsoucemapファイルを生成するため、source-map属性を増やす必要があります。
eval-source-map：マップファイルを生成しないため、evalパッケージコードの速度は非常に高速ですが、eval-source-mapをevalと組み合わせて使用できます。マップファイルはパッケージ化されたjsファイルに保存されます。 DataURLの形式で。eval-source-mapは、ファイルのサイズが大きくなるため、正式な環境では使用しないでください。ただし、開発環境では、パッケージ化が迅速であるため、試すことができます。

2.7、建設結果の出力分析

Webpackによって出力されるコードは非常に読みやすく、ファイルが非常に大きいため、頭痛の種になります。出力結果をより簡単かつ直感的に分析するために、多くの視覚分析ツールがコミュニティに登場しました。これらのツールは、結果をより直感的にグラフィカルに表示し、問題をすばやく理解できるようにします。次に、Vueプロジェクトで使用した分析ツールwebpack-bundle-analyzerについて説明します。

プロジェクトでwebpack.prod.conf.jsを構成します。

if (config.build.bundleAnalyzerReport) {
 var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
复制代码

$ npm run build --reportを実行した後、分析レポートは次のように生成されます。

2.8、Vueプロジェクトのコンパイルの最適化

VueプロジェクトがWebpackでコンパイルされており、コーヒーを飲む必要がある場合は、プロジェクトのWebpack構成を最適化して、Webpack構築の効率を向上させる必要があります。VueプロジェクトのWebpack構築を最適化する方法の詳細については、著者による別の記事「Vue Project WebpackOptimizationPractice」を参照してください。

3.基本的なWebテクノロジーの最適化

3.1、gzip圧縮をオンにします

gzipは、UNIXシステムでファイル圧縮に最初に使用されたGNUzipの略語です。HTTPプロトコルのgzipエンコーディングは、Webアプリケーションのパフォーマンスを向上させるために使用されるテクノロジーです。Webサーバーとクライアント（ブラウザー）は、gzipを一緒にサポートする必要があります。現在の主流のブラウザ、Chrome、Firefox、IEなどはすべてこのプロトコルをサポートしています。Apache、Nginx、IISなどの一般的なサーバーもサポートしています。gzip圧縮効率は非常に高く、通常は70％の圧縮率に達します。つまり、Webページの圧縮率が30Kの場合、圧縮後は約9Kになります。。

サーバーサイドエクスプレスを例として取り上げましょう。gzipを開始するのは非常に簡単です。関連する手順は次のとおりです。

インストール：

npm install compression --save
复制代码

コードロジックを追加します。

var compression = require('compression');
var app = express();
app.use(compression())
复制代码

サービスを再起動し、ネットワークパネルの応答ヘッダーを確認します。赤い円の中に次のフィールドが表示されている場合は、gzipが正常に開かれたことを意味します。

3.2、ブラウザキャッシュ

ユーザーのページの読み込み速度を向上させるには、静的リソースをキャッシュする必要があります。分類するサーバーへのリクエストを再開する必要性に応じて、HTTPキャッシングルールは2つのカテゴリに分類されます（必須キャッシングと。キャッシングメカニズムが明確でない場合。HTTPキャッシングに関する著者の記事「HTTPキャッシングメカニズムと原則の詳細な理解」を参照できますが、ここでは繰り返さないことにします。

3.3、CDNの使用

サーバーからCSS、js、画像をダウンロードするときは、ブラウザがサーバーに接続する必要があります。ほとんどのサーバーの帯域幅は制限されています。制限を超えると、Webページは半日応答できなくなります。CDNは、異なるドメイン名を介してファイルをロードできるため、ファイルをダウンロードするための同時接続の数が大幅に増加し、CDNの使いやすさが向上し、ネットワーク遅延とパケット損失率が低下します。

3.4。ChromePerformanceを使用してパフォーマンスのボトルネックを見つける

Chromeのパフォーマンスパネルは、一定期間内のjs実行の詳細と時間を記録できます。Chromeデベロッパーツールを使用してページのパフォーマンスを分析する手順は次のとおりです。

Chromeデベロッパーツールを開き、パフォーマンスパネルに切り替えます
[記録]をクリックして記録を開始します
ページを更新するか、ノードを展開します
記録を停止するには、[停止]をクリックします

パフォーマンスの詳細については、こちらをご覧ください。

総括する

この記事は、Vueコードレベルでの最適化、webpack構成レベルでの最適化、および基本的なWebテクノロジーレベルでの最適化の3つの部分で構成されています。Vueプロジェクトのパフォーマンスを最適化する方法を紹介します。この記事を読んだ後、それがあなたに役立ち、啓発されることを願っています。欠点がある場合は、批判して訂正してください！

Vueプロジェクトのパフォーマンスの最適化-実用ガイド

おすすめ