vue项目第一次加载时因chunk-vendors.js文件过大导致加载太慢的解决办法

借鉴博客：https://blog.csdn.net/qq_31677507/article/details/102742196     （亲测有用）

使用浏览器第一次打开vue项目时，加载时间慢到用了28秒，查看网络加载文件，chunk-verdors.js这个文件2M用了28秒。

解决办法：使用webpack的插件压缩打包，然后配置nginx的gzip压缩配置

　　第一步：安装压缩插件：（新版本的可能运行会报错出问题，这里用的5.0.1版本）

npm i compression-webpack-plugin@5.0.1

 　　第二步：package.json手动指定一下版本，（我用jenkins自动打包，报错没找到此插件手动指定一下，自动打包的时候自动下载）

 　　第三步：vue.config.js中配置compression-webpack-plugin的压缩文件配置代码：

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 = {
    productionSourceMap: false, //去除vue打包后js目录下生成的.map文件，用于加速生产环境构建

　　//压缩配置
    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
            })
        ]
    },

    //跨域处理，可忽略
    devServer: {
            proxy: {
            '/api': {
                // 此处的写法，目的是为了 将 /api 替换成 https://www.baidu.com/
                // target: 'xxx/xxx',
                target: 'http://xxx/xxx',
                // 允许跨域
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

 　　第四步：服务器上的nginx配置gzip压缩：

gzip on;
gzip_min_length 1k;
gzip_buffers 16 64k;
gzip_http_version 1.1;
gzip_comp_level 6;   #1-9,为9的话最大消耗服务器内存以提高访问速度
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;

　　测试成功：第一次打开速度在2秒内，没什么延迟感可以接受

谷歌浏览器：

IE浏览器：

。