ホームページ >ウェブフロントエンド >jsチュートリアル >Vue プロジェクトの包括的な最適化戦略
Vue プロジェクトの包括的な最適化戦略
- php中世界最好的语言オリジナル
- 2018-05-23 15:03:581753ブラウズ
今回は、Vue プロジェクトの包括的な最適化戦略について説明します。以下は、Vue プロジェクトの包括的な最適化に関する 注意事項 について説明します。
画像最適化
1. 画像サイズの最適化、一部の画像は WebP を使用します (WebP の互換性を考慮する必要があります)
Zhitu、Youpaiyun などのオンライン生成
gulp 生成、gulp-webpまたは gulp-imageisux
キャンバス生成
2. 画像リクエストを減らし、スプライト グラフィックス
を使用してオンラインで生成します: スプライト ジェネレーター、Tencent の gopng、spriteme
コード生成: gulp.spritesmith または Compass Sass の
ページ パフォーマンスの最適化
画像またはコンポーネントの遅延読み込み
vue-lazyload コンポーネントまたはその他のコンポーネントを使用する
vue-lazyload アドレス: https://www.npmjs.com /package/vue-lazyload
画像の遅延読み込み: v-lazy または画像グループを含めるには v-lazy-container を使用します
// 引入一张图片 d8a37813200e90cb882202e6600ac9aa // 引入一组图片 e198a21d55b046d321bc2258229981dd c3a42a5ff0bd0ce8a74aabf3cd201f44 9cadc3f16046274831d7f42c6f542623 888c1accf71027863634595a3ce6aeb1 94b3e26ee717c64999d7867364b1b4a3
コンポーネントの遅延読み込み
Vue.use(VueLazyload, {
lazyComponent: true
});
e08d5153eab072a80cbb84375c868756
ce0e6eae7172f2af23edab08bb2e6a83
92e1bf758431b4438818079f228c09bb
画像の事前読み込み
画像を素早く表示します
使用シナリオ:画像を表示するコンポーネントで、次のページの画像を頻繁にめくると、サーバーからデータを取得して画像を表示すると、画像の読み込みが遅くなります。この場合、新しいデータを表示する前に画像を事前に読み込むことができます。つまり、対応する位置に画像を埋め込みます
スリーパーティプラグインの遅延読み込み (オンデマンド読み込み)
js ファイルは通常同期的に読み込まれ、ページに配置するとメインの js の読み込みがブロックされますファイル。
使用シナリオ: 一部のプロジェクトで jquery などのファイルを導入する必要がある場合、これらのファイルをコンポーネント内に導入すると、ページのレンダリングがある程度ブロックされるため、特定の イベント (クリックまたはポップ) を介した jquery などの JS ファイルの動的読み込みが行われます。アップウィンドウ）ホームページを作成することができます。 ページが素早く表示されます。
ページの非同期ロード、コンポーネントの重なりを防ぐ方法
複数の vue コンポーネントがロードされ、コンポーネントがサーバー側データを通じて同時にレンダリングされる場合、複数のコンポーネントは最初に重なり、その後分離されます
3 つの解決策
ページに表示されるセクションが固定されており、コンテンツの高さを変更するのが難しい場合、事前にコンポーネントの外側に固定の高さを設定しておくと、フレーム内にコンテンツを追加するように表示されます。ページコンテンツが固定されていない場合、非同期読み込み時にコンポーネントが重なる問題を軽減するために、特定のコンポーネントのデータが読み込まれたときに最初の画面に他のコンポーネントが表示され、v-show を通じて表示されるように設定できます。
ページ全体が固定されたら、ページにスケルトンを追加して、ページのちらつきを防ぐことができます。具体的な実装については、http://www.jb51.net/article/130505.htm
サーバー側レンダリングのページを参照してください。データが固定され、変更がほとんどない一部のページについては、サーバー側レンダリングを検討できます。これは短時間で完了し、ユーザー エクスペリエンスが向上します。
インポートされた外部ファイルのサイズを削減します
プロジェクトでいくつかの ElementUI コンテンツが導入される場合、一部のコンポーネントを導入できるように、babel-plugin-component を導入して .babelrc ファイルを構成し、それによってファイルのサイズを削減します。コンポーネント。
ルートの遅延読み込み
しかし、vue-router を使用する場合、webpack はすべてのコンポーネントを js ファイルにパッケージ化するため、ファイルが非常に大きくなり、ホームページの読み込みに影響します。他のルートは別のjsファイルにパッケージ化されており、ルート切り替え時に対応するjsファイルが読み込まれます。
resolve => require([URL], resolve), 支持性好 () => system.import(URL) , webpack2官网上已经声明将逐渐废除, 不推荐使用 () => import(URL), webpack2官网推荐使用, 属于es7范畴, 需要配合babel的syntax-dynamic-import插件使用
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がVue プロジェクトの包括的な最適化戦略の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。