VUE+webpack开启Gzip压缩方案

一.compression-webpack-plugin 

1.为什么需要压缩

比较庞大的项目在生产环境下会影响加载速度，而Gzip压缩方案可以将打包之后的体积减少30%甚至更小，在生产环境下大大提升加载速度，提高用户的使用体验。

2. 为什么gzip压缩后页面加载速度提升

浏览器向服务器发出请求，并且在请求头中声明可以使用gzip的编码格式，服务器接受到请求之后，读取压缩后的文件，服务器直接返回给浏览器gzip格式的文件，浏览器进行解压缩，这样以来就节省了服务器压缩的时间

二.具体配置

1.webpack配置

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
    configureWebpack: {
        plugins: [
          // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
          new CompressionPlugin({
            cache: false,                   // 不启用文件缓存
            test: /\.(js|css|html)?$/i,     // 压缩文件格式
            filename: '[path].gz[query]',   // 压缩后的文件名
            algorithm: 'gzip',              // 使用gzip压缩
            minRatio: 0.8                   // 压缩率小于1才会压缩
          })
        ],
    }
}

2.nginx配置

server{
        //开启和关闭gzip模式
        gzip on;
        //gizp压缩起点，文件大于2k才进行压缩;设置允许压缩的页面最小字节数，页面字节数从header头            
          得content-length中进行获取。 默认值是0，不管页面多大都压缩。建议设置成大于2k的字节 
          数，小于2k可能会越压越大。
        gzip_min_length 2k;
        // 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
        gzip_buffers 4 16k;
        // 设置gzip压缩针对的HTTP协议版本
        gzip_http_version 1.0;
        // gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
        gzip_comp_level 2;
        //进行压缩的文件类型
        gzip_types text/plain application/javascript text/css application/xml;
        // 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;
}