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 をインストールするための詳細な手順 (推奨)

推薦する

Nginx+tomcat ロードバランシングクラスタの実装方法

実験環境は以下のとおりですここでは、4 台のサーバー (1 台の nginx、負荷用の 2 台の t...

URL を入力すると、バックグラウンドでは具体的に何が起こるのでしょうか?

ソフトウェア開発者は、ネットワーク アプリケーションがどのように動作するかを階層的に完全に理解してい...

ウェブフロントエンド開発の細部

1 選択タグは閉じられている必要があります <select></select>...

MySQLインデックスを追加する3つの原則を簡単に理解する

1. インデックスの重要性インデックスは、列に特定の値を持つ行をすばやく見つけるために使用されます。...

html2canvas で破線境界線を実装する例

html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されるキャンバ...

WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し

今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。ページからコンポーネントにデー...

hr 水平線スタイルの例コード

コードをコピーコードは次のとおりです。 <hr style="width:490px...

MySQL シリーズ 4 SQL 構文

目次チュートリアルシリーズ1. SQL言語の紹介と仕様2. データベース操作1. ライブラリを作成す...

CSS仕様 BEM CSSとOOCSSサンプルコード詳細説明

序文プロジェクト開発中、各人のコーディング習慣が異なるため、記述された CSS コードは十分に構造化...

MySQLが2つのテーブルを関連付ける際のエンコードの問題と解決策

Mysqlが2つのテーブルを関連付けると、次のエラーメッセージが生成されます:照合順序の不正な組み合...

Reactは動的ポップアップウィンドウコンポーネントを実装します

UI コンポーネントを作成するときに、アニメーションを考慮しなければ、アニメーションを実現するのは非...

MySQL パーティションテーブルの制限と制約の詳細な説明

ビルドを無効にするパーティション式では、次の構成はサポートされません。ストアドプロシージャ、ストアド...

Dockerの急速な拡張の高度な方法

1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...

Dockerコンテナの状態変換の実装

Dockerコンテナの状態遷移図2度目の実戦 [root@localhost ~]# docker ...

Vue3 Reactivityの実装方法を教えます

目次序文始めるちょっとした考えコードの実装真似する実装トラックトリガーの実装観察の実装計算の実装序文...