Vue プロジェクトの最適化方法のまとめ-jsチュートリアル-php.cn

Vue プロジェクトの最適化方法のまとめ

php中世界最好的语言

リリース： 2018-05-12 14:45:05

オリジナル

2060 人が閲覧しました

今回は、vue プロジェクトの最適化方法についてまとめました。vue プロジェクトの最適化に関する注意事項について、実際の事例を見てみましょう。

画像の最適化

1.画像サイズの最適化、一部の画像はWebPを使用します(WebPの互換性を考慮する必要があります)

Zhitu、Youpaiyun
gulp生成、gulp-webpまたはgulpなど-imageisux
キャンバス生成

2. 画像リクエストを減らし、スプライト画像を使用します

オンライン生成: スプライトジェネレーター、Tencent の gopng、spriteme
コード生成: gulp.spritesmith または sass compass

ページパフォーマンスの最適化

画像またはコンポーネントの遅延読み込み

vue-lazyload コンポーネントまたはその他のコンポーネントを使用する

vue-lazyload アドレス: https://www.npmjs.com/package /vue -lazyload

画像の遅延読み込み: v-lazy または画像グループを含めるには v-lazy-container を使用します

// 引入一张图片 
<img v-lazy="//domain.com/img1.jpg"> 
// 引入一组图片
<p v-lazy-container="{ selector: &#39;img&#39;, error: &#39;xxx.jpg&#39;, loading: &#39;xxx.jpg&#39; }">
 <img src="//domain.com/img1.jpg">
 <img src="//domain.com/img2.jpg">
 <img src="//domain.com/img3.jpg"> 
</p>

ログイン後にコピー

コンポーネントの遅延読み込み

Vue.use(VueLazyload, {
 lazyComponent: true
});
<lazy-component>
 <img class="mini-cover" :src="img.src" width="100%" height="400">
</lazy-component>

ログイン後にコピー

画像のプリロード

画像を素早く表示

使用シナリオ: 特定の A次のページで画像を閲覧する場合、サーバーからデータを取得してから画像を表示すると、新しいデータを表示するときに画像の読み込みが遅くなります。画像が読み込まれたら、対応する位置に画像を埋め込みます

スリーパーティプラグインの遅延読み込み (オンデマンド読み込み)

js ファイルは通常同期的に読み込まれ、ページに配置するとメインの読み込みがブロックされますjsファイルの読み込み中。

使用シナリオ: 一部のプロジェクトで jquery などのファイルを導入する必要がある場合、これらのファイルをコンポーネント内に導入すると、ページのレンダリングがある程度ブロックされるため、特定のイベント (クリックまたはポップ) による jquery などの JS ファイルの動的読み込みが行われます。アップウィンドウ）ホームページを作成することができますページが素早く表示されます。

ページの非同期ロード、コンポーネントの重なりを防ぐ方法

複数の vue コンポーネントがロードされ、コンポーネントがサーバー側データを通じて同時にレンダリングされる場合、複数のコンポーネントは最初に重なり、その後分離されます

3 つの解決策

ページに表示されるセクションが固定されており、コンテンツの高さを変更するのが難しい場合、事前にコンポーネントの外側に固定の高さを設定しておくと、フレーム内にコンテンツを追加するように表示されます。ページの内容が固定されていない場合、非同期読み込み時にコンポーネントが重なる問題を軽減するために、特定のコンポーネントのデータが読み込まれたときに最初の画面に他のコンポーネントが表示され、v-を介して表示されるように設定できます。見せる。
ページ全体が固定されたら、ページにスケルトンを追加して、ページのちらつきを防ぐことができます。具体的な実装については、http://www.jb51.net/article/130505.htm
サーバー側レンダリングのページを参照してください。データが固定され、変更がほとんどない一部のページについては、サーバー側レンダリングを検討できます。これは短時間で完了し、ユーザーエクスペリエンスが向上します。

インポートされた外部ファイルのサイズを削減します

プロジェクトでいくつかの ElementUI コンテンツが導入される場合、一部のコンポーネントを導入できるように、babel-plugin-component を導入して .babelrc ファイルを構成し、それによってファイルのサイズを削減します。コンポーネント。

ルートの遅延読み込み

しかし、vue-router を使用する場合、webpack はすべてのコンポーネントを js ファイルにパッケージ化するため、ファイルが非常に大きくなり、ホームページの読み込みに影響します。他のルートは別のjsファイルにパッケージ化されており、ルート切り替え時に対応するjsファイルが読み込まれます。

resolve => require([URL],solve)、good support

() => system.import(URL)、webpack2公式サイトでは段階的に廃止する旨が記載されており、

( ) は推奨されません => import(URL)、webpack2 公式 Web サイトで推奨されています。これは es7 カテゴリに属し、babel の syntax-dynamic-import プラグインで使用する必要があります

この記事の事例を読んで、さらにエキサイティングな内容については、他の php 中国語 Web サイト関連の記事に注目してください。

推奨読書:

JSファイルを動的にロードする3つの方法のまとめ

jsがポストリクエストをサポートするクロスドメインメソッドのまとめ

以上がVue プロジェクトの最適化方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。