vue最適化(パッケージング、コンパイル)
vueパッケージとコンパイル速度については、小型プロジェクトでは明らかではないかもしれませんが、中大型プロジェクトでは、開発速度を大幅に低下させる硬傷です.今日暇を得て、私の以前の開発の過程の中で総括した経験を分かち合って、実は自分で前人のいくつかの経験を結びつけて総括したのです.
パッケージの最適化
1.config/index.js
sourceMapをマスクし、プロジェクトコードのJS/CSS/SVG(*.ico)ファイルをgzip圧縮する
圧縮機能を有効にするには、webpackのサポートが必要であることを前提に、圧縮プラグインをインストールします:npm install--save-dev compression-webpack-plugin
1).gzipはjs、cssファイルを圧縮処理し、svg、icoファイル、bmpファイルの圧縮効果は50%に達します.
2).画像を圧縮する問題に対して、png、jpg、jpegは圧縮効果がありません
3).プロジェクトファイルを圧縮した後、ブラウザクライアントがgzipをサポートし、バックエンドがgzipをサポートする必要があります.
2.ルーティングコンポーネントのリロード:
プロジェクトが大きく、ロードされたリソースが多い場合、ホワイトスクリーンが初めてロードされます.そのため、ルーティングやコンポーネントを怠惰にロードする必要があります.彼らが使用すると、すべてをロードするのではなく、ロードする必要があります.
3.最適化コード:
1).データリストレンダリング時にkey値を定義することを常に覚えて、vue内部diffアルゴリズムが正確に位置決めできるようにします.
2).v-showとv-ifの合理的な使用は,スイッチング周波数の高いデータに対してv-show,その他のv-ifを用いて,システムのスイッチングオーバーヘッドを低減する
3).できるだけコンポーネントを細分化し、プロジェクト開発の過程で、第1版はすべてのコンポーネントのレイアウトを1つのコンポーネントに書き、データが変更されると、コンポーネントコードが膨大であるため、vuejsのデータ駆動ビューの更新が遅く、レンダリングが遅い.比較的悪い体験効果をもたらす.したがって、コンポーネントを1つのコンポーネントのように細分化し、コンポーネント全体をマルチキャストコンポーネント、リストコンポーネント、ページングコンポーネントなどに細分化することができます.
4).watchのデータを減らし、
コンポーネントのあるデータが変更された後に対応するstateを変更する必要がある場合は、別のコンポーネントに対してstateを変更する必要がある.watchを使用して、対応するデータ変更を傍受し、イベントをバインドできます.watchのデータが比較的小さい場合、性能消費は明らかではありません.データが大きくなると、システムにカートンが現れるので、watchのデータを減らします.他の異なるコンポーネントのstate双方向バインドは、イベント中央バスまたはvuexを用いてデータの変更操作を行うことができる.
5).ピクチャリロード、コンテンツクラスシステムのピクチャオンデマンドロード、ピクチャロードが比較的多い場合は、v-lazyなどのリロードライブラリやマウスをバインドするscrollイベントを使用して、可視領域にスクロールしてからデータをロード表示し、システムロードのデータを減らすことができます.
6).サービス側レンダリング(公式サイトvue ssrガイドを参照できます)
4.ユーザーエクスペリエンスの最適化
1).keep-alive使用、ルーティングの最適化、リクエスト回数の削減
2).better-clickはiphoneのクリック遅延を防止し、指が触れると300 msの遅延効果が現れ、better-clickによるiponeシリーズの互換性の最適化が可能
コンパイル最適化
プロジェクト開発では、コンポーネントの内容が変更され、ビューがリアルタイムでコンパイルレンダリング(ホットリロード)され、大規模なプロジェクト開発では、コンパイルに1回に数十秒以上の時間がかかる場合があり、開発効率が大幅に低下します.次に、最適化の方法をコンパイルします.
パッケージの最適化
1.config/index.js
sourceMapをマスクし、プロジェクトコードのJS/CSS/SVG(*.ico)ファイルをgzip圧縮する
build: {
...
productionSourceMap: false, // sourceMap
productionGzip: true,//
productionGzipExtensions: ['js', 'css','svg'],//
...
}圧縮機能を有効にするには、webpackのサポートが必要であることを前提に、圧縮プラグインをインストールします:npm install--save-dev compression-webpack-plugin
1).gzipはjs、cssファイルを圧縮処理し、svg、icoファイル、bmpファイルの圧縮効果は50%に達します.
2).画像を圧縮する問題に対して、png、jpg、jpegは圧縮効果がありません
3).プロジェクトファイルを圧縮した後、ブラウザクライアントがgzipをサポートし、バックエンドがgzipをサポートする必要があります.
2.ルーティングコンポーネントのリロード:
プロジェクトが大きく、ロードされたリソースが多い場合、ホワイトスクリーンが初めてロードされます.そのため、ルーティングやコンポーネントを怠惰にロードする必要があります.彼らが使用すると、すべてをロードするのではなく、ロードする必要があります.
{
path: "/home",
component: resolve=>require(["@/home"],resolve)
},3.最適化コード:
1).データリストレンダリング時にkey値を定義することを常に覚えて、vue内部diffアルゴリズムが正確に位置決めできるようにします.
2).v-showとv-ifの合理的な使用は,スイッチング周波数の高いデータに対してv-show,その他のv-ifを用いて,システムのスイッチングオーバーヘッドを低減する
3).できるだけコンポーネントを細分化し、プロジェクト開発の過程で、第1版はすべてのコンポーネントのレイアウトを1つのコンポーネントに書き、データが変更されると、コンポーネントコードが膨大であるため、vuejsのデータ駆動ビューの更新が遅く、レンダリングが遅い.比較的悪い体験効果をもたらす.したがって、コンポーネントを1つのコンポーネントのように細分化し、コンポーネント全体をマルチキャストコンポーネント、リストコンポーネント、ページングコンポーネントなどに細分化することができます.
4).watchのデータを減らし、
コンポーネントのあるデータが変更された後に対応するstateを変更する必要がある場合は、別のコンポーネントに対してstateを変更する必要がある.watchを使用して、対応するデータ変更を傍受し、イベントをバインドできます.watchのデータが比較的小さい場合、性能消費は明らかではありません.データが大きくなると、システムにカートンが現れるので、watchのデータを減らします.他の異なるコンポーネントのstate双方向バインドは、イベント中央バスまたはvuexを用いてデータの変更操作を行うことができる.
5).ピクチャリロード、コンテンツクラスシステムのピクチャオンデマンドロード、ピクチャロードが比較的多い場合は、v-lazyなどのリロードライブラリやマウスをバインドするscrollイベントを使用して、可視領域にスクロールしてからデータをロード表示し、システムロードのデータを減らすことができます.
6).サービス側レンダリング(公式サイトvue ssrガイドを参照できます)
4.ユーザーエクスペリエンスの最適化
1).keep-alive使用、ルーティングの最適化、リクエスト回数の削減
2).better-clickはiphoneのクリック遅延を防止し、指が触れると300 msの遅延効果が現れ、better-clickによるiponeシリーズの互換性の最適化が可能
コンパイル最適化
プロジェクト開発では、コンポーネントの内容が変更され、ビューがリアルタイムでコンパイルレンダリング(ホットリロード)され、大規模なプロジェクト開発では、コンパイルに1回に数十秒以上の時間がかかる場合があり、開発効率が大幅に低下します.次に、最適化の方法をコンパイルします.