より速く、軽くVueのアプリケーションを構築する方法

この記事では、Vueのパフォーマンスの最適化の一部にポイントを終え、オンラインプロジェクトで遭遇彼らの最近の問題のいくつかに焦点を当てた、といくつかの記事を参照して説明します。

コードの最適化

V-ショーとV-IFのを使用して

使用するv-if値がfalseの場合、そのページはこのHTMLタグの生成を持っていないだろう、と、時間のv-show使用の頻繁な切り替えを必要とし、関係なく、真または偽の値を、HTML要素のみを表示または非表示にするCSSの表示に存在していますV-ショー。

Object.freeze（）

Object.freeze（）メソッドは、オブジェクトを凍結します。凍結されたオブジェクトはもはや既存のプロパティを削除することはできません、あなたがオブジェクトの列挙可能なプロパティを変更することはできません、あなたがこのオブジェクトに新しい属性を追加することはできませんオブジェクトを凍結し、していない変更することができ、コンフィギュラ、書き込み可能セックス、そしてあなたは、プロパティの既存の値を変更することはできません。また、対象物の凍結オブジェクトのプロトタイプの後に変更することはできません。VUEでは、データまたはvuex凍結凍結されたオブジェクトで使用するために、VUEゲッターとセッターを使用すると、巨大な配列やオブジェクトを持っているので、もし、変換を行い、それが変更されることはありません確信している、（Object.freezeを使用することはありません）は、パフォーマンスの向上を可能にします。

注意深い時計を使用します

血と涙の私のレッスンによると、またはあなたが深い時計の配列巨大なオブジェクトを使用する場合、コストパフォーマンスは、あなたが痛みを想像することはできませんということです。

見て、計算され、更新や複雑なロジックを避けるのBeforeUpdate

複雑なロジックは、追加のコンポーネントのレンダリングを引き起こす可能性、さらには循環問題のレンダリングにつながる可能性があります。次のようにいくつかの一般的な状況は次のとおりです。

データセットへのプロパティの計算では。
データを設定するためのBeforeUpdateは、それが再レンダリングコンポーネントを作成することができます。
見て、いくつかの値を変更しようと、それは時計を再トリガすることと信じています。

パッケージングの最適化

解析パッケージサイズ

我々はWebPACKのバンドル・アナライザによるファイルの後に私たちは、パッケージの構成や大きさを分析することができます。

インストール

npm install webpack-bundle-analyzer --save-dev

使用

コンフィギュレーション

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

configureWebpack: {
  ...,
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled',
      generateStatsFile: true,
      statsOptions: { source: false }
    })
  ]
}

package.json追加したスクリプト

"bundle-report": "webpack-bundle-analyzer --port 8888 dist/stats.json"

パッケージの実行後

npm run bundle-report

：ブラウザが自動的に解析ページが開きますhttp://127.0.0.1:8888を

慎重な使用のサードパーティ製のライブラリ

上記の分析から、それが数字を見つけることは難しいことではありません、私のプロジェクト参照サードパーティのライブラリがcodemirrorその大きな割合、lodash、瞬間を取る、エレメント（L） UI ライブラリと他のライブラリは、比較的一般的です。しかし、これらのライブラリのために、我々は、我々は、実際には、私のコードのように、だけでも、非常に小さいかもしれ方法のほんの一部であるlodashの唯一cloneDeepメソッドを使用する場合がありますコンポーネントや機能のすべてを、それらを使用していませんでした。
上記のために、私たちは次の措置をとることができます。

cloneDeepを達成するために、完全なlodash、自分自身のメソッドを削除します。
軽量な代替codemirrorとVueCodeMirrorLite
ロケールが来る取り除く瞬間を取得するには、プラグインを使用します

plugins: [
  new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]

または、代わりに軽量日付FNSの。

プロジェクトコンポーネントライブラリの独自の実装は、依存要素を取り除くために。

ここでは、お勧めバンドル恐怖症を参照ライブラリのサイズを確認します。

遅延ロードをルーティング

この中で、公式サイトももはや開始され、ここで説明されていません。

概要

これらは、個人的なポイントの概要やアイデアあり、当然のことながら、これが唯一の氷山のVUEのパフォーマンスの最適化の先端である、を考える価値があるウェブ最適化の実施に関連する多くのネットワーク、画像、キャッシュなどがあります。