チャンクベンダーが大きすぎるため、最初の画面の読み込みが遅すぎるフロントエンド・プロジェクトの最適化

アプリのトップページの読み込みがスムーズにいかないので、トップページのアドオンの時間消費を調べに行ったところ、結局、フロントエンドの読み込み用jsファイルが大きすぎてトップページの読み込みが遅くなっていることがわかったので、最適化のために以下の解決策を選択しました。
I. compression-webpack-pluginプラグインをインストールします。フロントエンドでファイルを .gz ファイルにパッケージし、nginx の設定によりブラウザで直接 .gz ファイルをパースできるようにし、ファイルの読み込み速度を大幅に向上させることができます。
1.npmは以下のコマンドでインストールします。

npm install --save-dev compression-webpack-plugin

2.yarnは以下のコマンドでインストールします。

yarn add compression-webpack-plugin --save-dev

次に、Vue の設定ファイル vue.config.js を修正する必要があります。

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'



module.exports = {
  publicPath:'/appShare/',
  productionSourceMap: false,
  configureWebpack:{
    resolve:{
      alias:{
        '@':path.resolve(__dirname, '. /src'),
        '@i':path.resolve(__dirname, '. /src/assets'),
      } 
    },
    plugins: [
      // Ignore all locale files of moment.js
      IgnorePlugin(/^\. \/locale$/, /moment$/),
      
      // Configure compression-webpack-plugin to compress
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\. (' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]

  },

III. nginx の設定

server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\. ";

    location /appShare {
       client_max_body_size 10m;
       root /home/test/webIndex/appShare;
       try_files $uri $uri/ /appShare/index.html;
       index index.htm index.html;
    }

}

IV. ポストパッケージの比較

[root@localhost js]# ll -h 
Total usage 1.9M
-rw-r--r-- 1 root root 1.3M Oct 25 13:56 answer.1e6b29ba.js
-rw-r--r-- 1 root root 351K Oct 25 13:56 answer.1e6b29ba.js.gz
-rw-r--r-- 1 root root 49K Oct 25 13:56 app.319e43e7.js
-rw-r--r-- 1 root root 18K Oct 25 13:56 app.319e43e7.js.gz
-rw-r--r-- 1 root root 21K Oct 25 13:56 list.898721c9.js
-rw-r--r-- 1 root root 5.0K Oct 25 13:56 list.898721c9.js.gz
-rw-r--r-- 1 root root 45K Oct 25 13:56 qa.d8599e38.js
-rw-r--r-- 1 root root 14K Oct 25 13:56 qa.d8599e38.js.gz
-rw-r--r-- 1 root root 45K Oct 25 13:56 shareBottle2.4ceeca4d.js
-rw-r--r-- 1 root root 14K Oct 25 13:56 shareBottle2.4ceeca4d.js.gz
[root@localhost js]#

結果は明らかで、元の1.3Mのjsファイルは351kに圧縮され、フロントエンドの読み込み速度は大幅に改善されました。