Vue プロジェクトのパッケージ化、マージ、圧縮により、Web ページの応答速度を最適化します。

Vue プロジェクトのパッケージ化、マージ、圧縮により、Web ページの応答速度を最適化します。

序文

Web ページの応答速度に影響を与える要因は多数あります。たとえば、リクエスト コンテンツが大きすぎる、http リクエストの数が多すぎる、サーバー自体がリクエストを処理するのに時間がかかりすぎる、JS スクリプトの実行に時間がかかりすぎる、ブラウザーのリフローと再描画などです。ウェブサイトのページの応答速度はユーザーエクスペリエンスと密接に関連しており、ユーザーがウェブサイトを継続的に訪問するかどうかに直接影響します。 Vue プロジェクトの場合、最も一般的な問題は、バンドルされたファイルが大きすぎるために読み込み時間が長くなることです。サーバー リクエストの処理に時間がかかりすぎ、js スクリプトの実行にも時間がかかりすぎます。これら 2 つは、コードの品質とサーバー構成に密接に関連しており、特定のプロジェクトとコードに応じて最適化する必要があります。今日は、リクエストの数とパッケージ化後の単一ファイルのサイズの大きさという 2 つのレベルからのみ、Web ページの応答速度を最適化します (これはすべてのフロントエンド プロジェクトに適用されます)。

1. リクエスト内容が大きすぎる

プロジェクトをパッケージ化した後、ベンダー ファイルとアプリ ファイルが大きすぎることに気付くことがよくあります。app.js ファイルにはプロジェクト内の各ページのロジック コードが含まれており、vendor.js には各ページとコンポーネントの共通コードが含まれています。プロジェクトの複雑さが増すにつれて、このファイルのサイズも大きくなります。帯域幅が制限されている場合、これら 2 つのファイルのダウンロードに長い時間がかかることがよくあります。

解決:

  • ルーティング遅延読み込み: コードブロックの分割

Vue は非同期コンポーネントをサポートしています。つまり、コンポーネントが使用される場所で Promise を使用でき、Promise は最終的に解決を通じてコン​​ポーネント オブジェクトを返します。 webpack の動的インポート メソッドを使用すると、コードをチャンクにパッケージ化して Promise を返すことができます (これはまさに非同期コンポーネントに必要なものです)。ルーティング構成テーブルでインポートを使用すると、各ページ コンポーネントを異なるコード ブロックに分割し、ルートにアクセスしたときに対応するコンポーネントを読み込むことができます。これにより、すべてのコンテンツを 1 つのチャンクにパッケージ化することが回避され、「オンデマンドで読み込む」ことができ、応答速度が大幅に向上します。次の図に示すようにルーティング コンポーネントを導入します。

CDN の紹介

ビジネス コードは頻繁に更新され、反復されます。ブラウザーが静的ファイルをできるだけ長くキャッシュできるようにするには、クラス ライブラリ コードとビジネス コードを一緒にパッケージ化すると、ビジネス コードが更新されるとクラス ライブラリ コードも更新され、ブラウザーに長期間キャッシュできなくなります。キャッシュを使用してブラウザのトラフィックを削減し、ユーザーのブラウザの読み込み速度を向上させることを期待しているため、キャッシュを分割して個別にパッケージ化します。通常、サードパーティのパッケージにはスクリプトのインポート ソリューションが用意されています。パッケージ化時にサードパーティのパッケージを無視し、対応するインポート リンクをテンプレートに追加するだけです。

まず、プロジェクトのルートディレクトリに作成する必要のあるvue.config.jsはありません。

具体的なコードは次のとおりです。

定数cdn = {
    // パッケージ化されたサードパーティライブラリを無視する externals: {
      vue: 'Vue',
      "要素-ui": "要素",
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      瞬間:「瞬間」、
      echarts: 「echarts」
    },
  
    //cdn経由でjsを使用する: [
      'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
      'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
      'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
      'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
      'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
      'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
      「https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js」、
    ]、
  
    css: ["https://unpkg.com/[email protected]/lib/theme-chalk/index.css"],
  }

モジュール.エクスポート = {
    パブリックパス: '/CRM/dist/',
    // パブリックパス: './',
    チェーンWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            引数を返す
          })
          config.plugins.delete('プリフェッチ')
    },
    //パッケージ化はサードパーティのライブラリを無視します configureWebpack: { 
        外部: cdn.externals
    },
}

次に、それを pulic/index.html テンプレートの対応する位置に追加します (位置は自分で追加します)

//以下はCSS、スクリプトの場合はコメントを変更してください。よく見るとわかりやすいです。config構成はcdn変数を追加し、それをトラバースしてテンプレートに追加します <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="外部nofollow" rel="スタイルシート">
    <!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> --> 
  <% } %>

CDN を使用するもう 1 つの利点は、パッケージ化速度を向上できることです。

リクエストリソースを圧縮する

通常、サーバーにデプロイし、nginx をプロキシ サーバーとして使用し、すべてのリクエストは nginx を介して転送されます。 nginx を設定することで gzip を有効にすることができます。

サーバー{
        gzip オン;
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

上記の構成では、ブラウザがサーバーからリソースを要求するたびに、サーバーはリソースを圧縮してからブラウザに返し、ブラウザはそれを解凍します。これにより、静的リソースのダウンロード速度が大幅に向上します。

しかし、もう 1 つポイントがあります。この場合、ブラウザがサーバーにリクエストするたびに、サーバーは圧縮操作を実行します。リクエスト量が多い場合、圧縮操作はサーバーの応答速度にも影響します。そのため、パッケージ化時にファイルを直接圧縮パッケージにパッケージ化することができます。この方法では、サーバーは頻繁にパッケージ化する必要がなくなります。

インストール依存関係: compression-webpack-plugin

npm インストール圧縮 webpack プラグイン --save-dev

vue.config.js の変更:

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
モジュール.エクスポート = {
    パブリックパス: './',
    プロダクションソースマップ: false、
    Webpack を構成する: {...},
    チェーンWebpack: config => {
        config.resolve.alias.set('@', 'src') を解決します。
        process.env.NODE_ENV === 'production'の場合{
            config.plugin('圧縮プラグイン')
            .use(新しい圧縮プラグイン({
                ファイル名: '[パス].gz[クエリ]',
                アルゴリズム: 'gzip'、
                テスト: productionGzipExtensions、
                閾値: 10240、
                最小比率: 0.8、
                オリジナルアセットの削除: true
            }));
        }
    },
};

nginx の設定

サーバー{
        gzip_static オン;
        gzip オン;
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

1. HTTPリクエストが多すぎる

すべての物事には限界があり、それを「極端は反対の結果をもたらす」と言います。オンデマンドの読み込み、コードの分割、パッケージ化を使用します。プロジェクトがどんどん大きくなり、モジュールの数が増えると、プロジェクトがパッケージ化された後に大量のファイルが生成されることがわかります。フロントエンドのパフォーマンスに関しては、各ファイルは小さくなりますが、ネットワーク接続の確立と切断のオーバーヘッドが大きくなる可能性があります。したがって、フロントエンドの最適化の実践では、通常、ファイル数と 1 つのファイルのサイズのバランスを取る必要があります。ここで、webpack が提供する MinChunkSizePlugin プラグインを使用して、minChunkSize より小さいチャンクをマージすることで、チャンク サイズを指定されたサイズ制限より上に保つことができます。

解決:

vue.config.js の設定

モジュール.エクスポート = {
    パブリックパス: './',
    プロダクションソースマップ: false、
    Webpack を構成する: {
        プラグイン: [
            新しい webpack.optimize.MinChunkSizePlugin({
              minChunkSize: 10000 // 最小文字数
            })
        ]
    },
}

上記の操作により、パッケージ化されたファイルのサイズと量を適切な範囲内で制御できます。ngnix を構成して gzip をオンにすることで、ほとんどの Vue シングルページ アプリケーションの最初の読み込み時に待機時間が長くなるという問題を基本的に解決できます。

要約する

これで、Web ページの応答速度を最適化するための Vue プロジェクトのパッケージ化、マージ、圧縮に関するこの記事は終了です。Vue プロジェクトのパッケージ化、マージ、圧縮に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue プロジェクトのパッケージ化と圧縮の実装 (ページの応答速度を向上)
  • Vue パッケージサイズの最適化の実装 (1.72M から 94K)
  • Vueプロジェクトのパッケージ最適化戦略に関する簡単な説明
  • Vueコード圧縮最適化方法

<<:  SQL文におけるGROUP BYとHAVINGの使用に関する簡単な説明

>>:  Linux クラウド サーバーに JDK と Tomcat をインストールするための詳細な手順 (推奨)

推薦する

Mac 環境での Nginx 構成とローカル静的リソースへのアクセスの実装

ローカル開発では、直接アクセスできない静的ファイル リソースのデバッグが必要になる場合があります。こ...

jQueryをベースにカルーセル効果を実現する

この記事では、カルーセルマップの効果を実現するためのjQueryの具体的なコードを参考までに共有しま...

vueプロジェクトのマルチ環境設定(.env)の実装

目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...

ElementUIはドロップダウンオプションと複数選択ボックスのサンプルコードを実装します

目次ドロップダウン複数選択ボックスアップグレード - すべてのオプションを追加改訂と改善を求める製品...

ARMアーキテクチャにおける関数呼び出しプロセスの簡単な分析

目次1. 背景知識1. ARM64レジスタの紹介2. STP命令の詳しい説明(ARMV8マニュアル)...

Mapper SQL ステートメント フィールドとエンティティ クラス属性名の関係は何ですか?

背景: 1. データベースに通知テーブルがある あなたは見ることができますgmt_create、通知...

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...

MySQL がタイムスタンプを使用するときにタイムゾーンの問題を無視できるのはなぜですか?

私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...

CentOS での samba フォルダ共有サーバー構成の詳細な説明

1. はじめに最近、CentOS での開発には多くの不便があることがわかりました。Windows/M...

MySQL インデックスの知識の要約

MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...

MySQL でスロークエリを有効にする方法の例

序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...

jQueryはすべての選択と逆選択操作ケースを実装します

この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。...

CSS3で実装された読み込みアニメーション

成果を達成する実装コード <h1>123WORDPRESS.COM</h1>...

検証例 MySQL | 同じ値を持つフィールドを更新すると、binlog に記録されます

1. はじめに数日前、開発仲間から、フィールドを同じ値に更新すると binlog が記録されるかどう...

Innodb で MySQL の 2T テーブルをすばやく削除する方法の例

序文この記事は主に、MySQL の Innodb で 2T の大きなテーブルをすばやく削除する方法に...