gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度，对于用户量多的网站，开启gizp压缩会大大降低服务器压力，提高加载速度，降低服务器流量成本

安装compression-webpack-plugin

cnpm install compression-webpack-plugin --save-dev

vue.config.js配置Gzip压缩

// 导入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']

module.exports = {
     //统一配置打包插件
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                threshold: 10240,//对10K以上的数据进行压缩
                minRatio: 0.8,
                deleteOriginalAssets:false,//是否删除源文件
            })
        ]
    },
}

npm run build 之后，对比之前的文件，平均压缩了5到5倍左右

nginx配置gizp

	gzip on; #开启或关闭gzip on off
	gzip_min_length 5k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
	gzip_buffers 4 16k; #buffer 不用修改
	gzip_comp_level 8; #压缩级别:1-10，数字越大压缩的越好，时间也越长
	gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 
	gzip_vary on; # 和http头有关系，加个vary头，给代理服务器用的，有的浏览器支持压缩，有的不支持，所以避免浪费不支持的也压缩，所以根据客户端的HTTP头来判断，是否需要压缩

修改后记得执行 nginx -s reload 

一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip