-
エントリ ファイルの量を減らす: 一般的な方法はルートの遅延読み込みです。ルートが解析されるときに対応するコンポーネントのみがロードされ、不必要なファイル リクエストを減らすために現在のコンポーネントに必要な js および css ファイルのみがロードされます。コード: const UserDashboard =
( ) => import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
しかし、エントリ ファイルは依然としてすべての js および css ファイルをインポートします。なぜでしょうか?
その理由は、vue-cli3 はデフォルトでインポートを通じてオンデマンドでロードされるすべての JavaScript ファイルにプリフェッチを追加するため、リンク内の属性 rel="prefetch" を手動でオフにする必要があるためです
。// view.config.js
module.exports = {
chainWebpack: (config) => {
// プリフェッチプラグインを削除します
config.plugins.delete("プリフェッチ");
// また
// オプションを変更します。
config.plugin("プリフェッチ").tap((オプション) => {
オプション[0].fileBlacklist = オプション[0].fileBlacklist || [];
options[0].fileBlacklist.push(/myasyncRoute(.)+?.js$/);
戻りオプション;
});
}、
};
-
静的リソースのローカル キャッシュ: バックエンドによって返されるリソース (http キャッシュを使用)、フロントエンドによるローカル ストレージの合理的な使用、CDN 静的リソース キャッシュ。
-
オンデマンドでロードされる UI フレームワーク
-
コンポーネントの繰り返しの梱包を避ける
-
画像リソースの圧縮: 複数の画像を 1 つの画像に結合し、必要なリソースをダウンロードするのに 1 回のリクエストだけで済むため、接続確立の消費が削減されます。これは、モバイル端末ではより顕著です。例: スプライト画像
-
dom 要素の数を減らします。
-
Cookie のサイズを減らす: ユーザーが応答を得るまでの時間を短縮するには、Cookie のサイズを最小限に抑えることが非常に重要です。
-
http リクエストを減らします。
-
Webpack は gzip 圧縮を有効にします。主に HTML、CSS、JavaScript、その他の静的テキスト条件を圧縮するために、画像を圧縮することはお勧めできません。
コード:const CompressionWebpackPlugin = require("compression-webpack-plugin");
const isProduction = process.env.NODE_ENV === "本番";
module.exports = {
//gzipを有効にする
configureWebpack: (config) => {
if (isProduction) {
// Webpack圧縮を設定する
config.plugins.push(
new CompressionWebpackPlugin({
テスト: /.js$|.html$|.css$/、
// 4kb以上圧縮
しきい値: 4096、
})
);
}
}、
};
-
最初の画面に表示する必要のない大きなサイズの画像の場合は、画像の遅延ロード (vue-lazyload) を使用して、最初に表示領域に画像をロードし、表示領域に入った後に他の部分をロードするとパフォーマンスが向上します。コード
:
main.js「vue-lazyload」から VueLazyLoad をインポートします。
Vue.use(VueLazyLoad, {
プリロード: 1、
error: require("./error.jpg"), //エラー画像
loading:require("./loading.jpg"), //画像を読み込み中
試行: 2、
});
vue ページで使用します: 代わりに v-lazy: src
背景画像は画像の遅延読み込みを使用します -
スケルトン画面を使用: 手書きの dom 要素がその場所を占め、実際のデータが到着すると置き換えられます。プレースホルダー要素の構造がそれほど多くない場合に使用されます。
-
location.reload() の使用を減らす: これによりページが更新され、ページ上のすべてのリソースがサーバーに再リクエストされるため、location.href() を使用する代わりに location.href="現在のページ URL" を使用することをお勧めします。ブラウザはローカル キャッシュ リソースを読み取ります。
-
CDN（コンテンツデリバリネットワーク：コンテンツ配信ネットワーク）の最適化
-
キャッシュの合理的な使用。
-
Promise の最適化: Promise リクエストはすべて非同期リクエストです。ブラウザには、同じイベント内の同じドメインに対するリクエストの数に制限があります。制限を超えるリクエストはブロックされます。Chrome ブラウザは、同じドメインに最大 6 つのリクエストを送信できます。リクエストの送信に Promise を使用する理由は、すべての非同期リクエストが同時にトリガーされた場合、ブラウザーが非同期リクエストに実行優先順位を割り当て、Promise リクエストの使用順序が呼び出した順序になるためです。その場合、ブラウザはページの下部にあるリクエストが最初に実行されるように見えるかもしれません。
-
SSR サーバー側レンダリング: サーバーはすべてのコンテンツを直接まとめて直接出力し、サーバーは一連のテンプレート エンジンを使用します。
利点: SEO に優しく、最初の画面でのパフォーマンスが高い。
欠点: クライアント データ共有コスト、テンプレート メンテナンス コストが高い。