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 をよろしくお願いいたします。

以下もご興味があるかもしれません: