开启成长之旅！这是我参加「日新方案 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