前端性能优化之Gzip

Gzip是若干种文件压缩程序的简称，它是性能优化的解决方案之一，通过减少文件大小、节省带宽来提高网站的访问速度。

HTTP 上的 Gzip 优化

在线上环境中，调用接口时可以看到 Content-Encoding: gzip

客户端需要支持该压缩算法，Request Header 中的 Accept-Encoding 属性可以看到是否支持 gzip

操作

data 表示传输的参数数据，如果有数据长度等限制，可以使用函数来进行处理，将 gzipArr 作为函数返回值。

const gzipArr = gzip(encodeURIComponent(data))
this.axios = Axios.create({
    baseURL: Config.baseUrl,
    timeout: 1000 * 60,
    headers: {
      'Content-Type': 'application/json',
      'Content-Encoding': 'gzip'
    },
    transformRequest: [gzipArr],
});

效果

打包结果：

优化前：

优化后：

js 、css 等文件的优化速度会更明显一些。

其它方式

动态生成

还可以对服务器进行处理，使用这种方式，前端不需要进行相关的配置。

Nginx 在默认的配置下不会开启 gzip，需要进行如下设置：

打开 nginx.conf 文件：

开启 gzip,并在 http 中根据需要增加如下配置：

• gzip on; // 开启gzip，关闭为 off
• gzip_buffers 4 16k; // 设置缓冲区大小
• gzip_comp_level 6; // 压缩级别（压缩参数值的范围是从1到9）
  • 1的压缩程度最低，效率最高，9的压缩程度最高，但是效率最低（时间）。
• gzip_types // 压缩的类型，根据页面的MIME类型来对应开启Gzip。（比如：application/javascript、text/css，*代表所有）
• gzip_vary // 是否通过携带响应头Vary:Accept-Encoding通知接收方数据已进行了 Gzip 压缩，默认值为 off
• gzip_http_version // 针对不同的HTTP协议版本，选择是否开启 Gzip
• gzip_proxied // 是否对服务端返回的数据进行 Gzip 压缩，默认值为 off
• ...

http { 
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/json;
    gzip_vary on;
}

前端预生成 gzip

http 中配置 gzip_static on; ，即可开启静态加载本地 .gz 文件

使用插件

比如 vue 中可以进行打包压缩的 compression-webpack-plugin 插件