前端性能优化之gzip

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情

前言

HTTP 可以对传输的内容进行压缩，减少网络实际传输数据的大小。服务器会将资源进行压缩后传输到客户端，浏览器收到文件后进行解析。对于纯文本文件可以压缩到之前大小的30%-40%，大大提高了传输效率。

什么是gzip

gzip是一种数据的压缩格式，也可以说是文件格式。linux系统该文件后缀为.gz 。使用gzip需要web容器，浏览器的支持。

配置 js、text、json、css 这种纯文本进行压缩，效率极高
压缩需要消化CPU，对于大文件（音乐/视频/图片）的压缩，会增加服务器压力。

Nginx配置gzip

进入nginx配置文件(betpw.conf是我自己项目的nginx配置文件)

cd /etc/nginx/conf.d
vi /betpw.conf

# 开启gzip，关闭用off
gzip on;

# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，推荐6
gzip_comp_level 6;

# 设置压缩所需要的缓冲区大小 
gzip_buffers 16 8k;

# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;

# 选择压缩的文件类型，其值可以在 mime.types 文件中找到。
gzip_types text/plain text/css application/json application/javascript

# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;

config.js配置

安装compression-webpack-plugin

npm i compression-webpack-plugin --save-dev

引入

var CompressionWebpackPlugin  = require('compression-webpack-plugin')

配置(chainWebpack/configureWebpack两种方式)

 // gzip需要nginx进行配合
chainWebpack(config) {
   config
     .plugin('compression')
     .use(CompressionWebpackPlugin)
     .tap(() => [
          {
            new CompressionPlugin({ 
                    //此插件不能使用太高的版本，否则报错：TypeError: Cannot read property 'tapPromise' of undefined
                    // filename: "[path][base].gz", // 这种方式是默认的，多个文件压缩就有多个.gz文件，建议使用下方的写法
                    filename: '[path].gz[query]', //  使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，建议使用
                    algorithm: 'gzip', // 官方默认压缩算法也是gzip
                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
                    threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧
                    minRatio: 0.8, // 最小压缩比率，官方默认0.8
                    //是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
                    // 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障
                    deleteOriginalAssets: false
          }
     ])
  }

    configureWebpack: config => {
        // 开发环境不配置
        if (process.env.NODE_ENV !== 'production') return
        // 生产环境才去配置
        return {
            plugins: [
                new CompressionPlugin({ 
                    filename: '[path].gz[query]', 
                    algorithm: 'gzip', 
                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, 
                    threshold: 10240, 
                    minRatio: 0.8,
                    deleteOriginalAssets: false
                })
            ]
        }
    },

附nginx中gzip配置参数

gzip：决定是否开启gzip模块 param:on | off
gzip_proxied：Nginx做为反向代理的时候启用 param：off | expired | no-cache | no-sotre | private | no_last_modified | no_etag | auth | any
- off：关闭所有的代理结果数据压缩
- expired：header中包含”Expires”头信息时启用压缩
- no-cache：header中包含”Cache-Control:no-cache”头信息时启用压缩
- no-store：header中包含”Cache-Control:no-store”头信息时启用压缩
- private：header中包含”Cache-Control:private”头信息时启用压缩
- no_last_modified：header中包含”Last_Modified”头信息时启用压缩
- no_etag：header中包含“ETag”头信息时启用压缩
- auth：header中包含“Authorization”头信息
- any：无条件压缩所有结果数据
gzip_buffers：处理请求压缩的缓冲区数量和大小，其中number:指定Nginx服务器向系统申请缓存空间个数，size指的是每个缓存空间的大小。主要实现的是申请number个每个大小为size的内存空间。这个值的设定一般会和服务器的操作系统有关，所以建议此项不设置，使用默认值即可。 param1:int 增加的倍数，param2:int(k) 后面单位是k，example：gzip_buffers 4 16K;
gzip_comp_level：设置gzip压缩等级，等级越底压缩速度越快文件压缩比越小，反之速度越慢文件压缩比越大，默认值为1
gzip_min_length：当返回内容大于此值时才会使用gzip进行压缩,以K为单位,当值为0时，所有页面都进行压缩。进行压缩响应页面的最小长度,content-length gzip压缩功能对大数据的压缩效果明显，但是如果要压缩的数据比较小的化，可能出现越压缩数据量越大的情况，因此我们需要根据响应内容的大小来决定是否使用Gzip功能，响应页面的大小可以通过头信息中的Content-Length来获取。但是如何使用了Chunk编码动态压缩，该指令将被忽略。建议设置为1K或以上，默认为20
gzip_http_version：用于识别http协议的版本，早期的浏览器不支持gzip压缩，用户会看到乱码，所以为了支持前期版本加了此选项,目前此项基本可以忽略 param: 1.0|1.1
gzip_types：设置需要压缩的MIME类型,非设置值不进行压缩 param:text/html | application/x-javascript | text/css | application/xml
gzip_vary on：该指令用于设置使用gzip进行压缩发送是否携带“Vary:Accept-Encoding”头域的响应头部。主要是告诉接收方，所发送的数据经过了Gzip压缩处理 param:on | off