VUE项目Gzip压缩方案

一、compression-webpack-plugin 插件

1、为什么要压缩？

打包的时候开启gzip可以很大程度减少包的大小，页面大小可以变为原来的30%甚至更小，非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验

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

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

二、配置流程

1、安装依赖

npm i -D compression-webpack-plugin

2、配置webpack

const CompressionPlugin = require('compression-webpack-plugin');
const isProduction = process.env.NODE_ENV === 'production';

if (isProduction) {
  // 生产环境开启gzip压缩
  vueConfig.configureWebpack.plugins.push(
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.html$|\.css$/, // 压缩文件的正则匹配
      threshold: 10240, // 对超过10k的数据进行压缩
      deleteOriginalAssets: false, // 是否删除原文件
      minRatio: 0.8 // 压缩比例
    })
  );
}

3、npm run build打包情况和分析

原包体大小为 2785k --> 824k，压缩率高达71%！

可以看到文件中有gz的文件

4、配置nginx

服务端 Nginx 需开启 gzip_static 功能

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;
}

5、请求头测试

将资源部署到服务，发送请求后，可以看到返回文件的大小