vue專案打包上線chunk-vendors.js檔案過大導致頁面載入緩慢解決方案

最近做一個vue專案遇到了一個問題，專案打包上線發現chunk-vendors.js檔案也太大了點，第一次載入頁面需要將近30s，這肯定是無法容忍的，於是‘調研’了一番，記錄下解決方法

在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 = {
    devServer: {
        disableHostCheck: true
    },
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
                '@i': path.resolve(__dirname, './src/assets'),
            }
        },
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

            // 下面是下載的外掛的配置
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }),
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 5,
                minChunkSize: 100
            })
        ]
    }
}

然後需要在nginx中設定
找到nginx資料夾，編輯conf/nginx.conf檔案

在server{}中新增下列程式碼
server{
	```
	
	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]\.";
    
    ```
}

重新啟動專案就可以看到chunk-vendors.js檔案已經被壓縮，頁面載入速度會提升很多
本人新手一枚，如果有更好的方法歡迎大佬在評論區留言，我會努力學習的