vuecli4 配置gzip文件处理

1.第一步安装插件依赖，现在最新版本为7，实测有兼容问题，暂时使用5
npm i compression-webpack-plugin@5.0.1 --save-dev
2.在vue.config.js文件中配置

const CompressionWebpackPlugin = require("compression-webpack-plugin");
//configureWebpack有两种方式，当前举例为对象形式，如设置函数，自行查找配置
configureWebpack: {
        plugins: [            
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(js|css)$'),
                threshold: 10240,
                minRatio: 0.8
            })
        ],
    }
}

3.在nginx服务器上配置

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png multipart/form-data;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";

对应解释
第1行：开启Gzip
第2行：不压缩临界值，大于1K的才压缩，一般不用改
第3行：buffer，就是，嗯，算了不解释了，不用改
第4行：用了反向代理的话，末端通信是HTTP/1.0，有需求的应该也不用看我这科普文了；有这句的话注释了就行了，默认是HTTP/1.1
第5行：压缩级别，1-10，数字越大压缩的越好，时间也越长，看心情随便改吧
第6行：进行压缩的文件类型，缺啥补啥就行了，JavaScript有两种写法，最好都写上吧，总有人抱怨js文件没有压缩，其实多写一种格式就行了
第7行：跟Squid等缓存服务有关，on的话会在Header里增加"Vary: Accept-Encoding"，我不需要这玩意，自己对照情况看着办吧
第8行：IE6对Gzip不怎么友好，不给它Gzip了