如何开启nginx gzip压缩

nginx 压缩功能，可以减少文件的网络传输时间、同时也节省了所需要的带宽。比如高压缩比的html、js、json、css等，有时可以高达70%~90%，优化效果明显。

gzip压缩需要前端服务器同时配置这里使用vue为例

  // 首先安装插件 npm install --save-dev compression-webpack-plugin
  // vue.config.js中配置
  const CompressionWebpackPlugin = require('compression-webpack-plugin');
  const productionGzipExtensions = ['js', 'css', 'html'];
  module.export = {
    configureWebpack: {
      plugins: [
        new CompressionWebpackPlugin({
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp(
            '\\.(' + productionGzipExtensions.join('|') + ')$'
          ),
          threshold: 10240, // 只有大小大于该值才会被处理
          minRatio: 0.8, // 压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: false, // 删除原文件
        })
      ]
    },
  }

环境检查
- 首先，检查 nginx 的编译参数:
  nginx -V
  ...
  --with-http_gunzip_module --with-http_gzip_static_module
  ...
  上面的 with-http_gunzip_module、with-http_gzip_static_module 表示系统所安装的 nginx 版本支持通过 gzip 来压缩文件。
  
  压缩功能非常普通，nginx 也比较早支持 gzip 压缩，所以一般安装的版本都包含了，如果你访问网页得到的响应不支持，那么应该检查服务器的版本与编译参数。
开启压缩
默认情况下，nginx 只对 text/html 类型的文件请求开启压缩。
nginx 配置
配置文件位置：/etc/nginx/nginx.conf

http {
    ##
    # Gzip Settings
    ##
    # 开启gzip
    # gzip on;

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

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

    # gzip_proxied any;

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

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

    # 设置gzip的版本
    # gzip_http_version 1.1;

    # 进行压缩的文件类型。javascript有多种形式，后面的图片压缩不需要的可以自行删除
    # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

配置完后启动检查看下是否开启成功

输入命令 nginx -s reload 重启nginx服务器
如果后端nginx开启了gzip，可以在network中的Content-Encoding中看到gzip

如何配置使 `nginx` 支持 `json/js/css` 类型文件的压缩呢？

直接去掉上面 gzip_types 的#号后保存，重启或重载配置文件后全站将启用压缩功能。

其它级别的配置

nginx 的压缩可以配置在 http、server、location 三种级别下。

上面的示例中的压缩功能覆盖整个 nginx 。

如果只是想针对某个站点、或者路径，那么到相应的配置中添加 gzip_types。

下面为本站配置，配置文件位置：/etc/nginx/site-available/xxx.conf

server {
    ...
    # compress

    gzip  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types
        # text/html is always compressed by HttpGzipModule
        text/css
        text/javascript
        text/xml
        text/plain
        text/x-component
        application/javascript
        application/json
        application/xml
        application/rss+xml
        font/truetype
        font/opentype
        application/vnd.ms-fontobject
        image/svg+xml;

    gzip_static on;
    gzip_proxied expired no-cache no-store private auth;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;
    ...

在http模块中配置类似，同样是设置 gzip on、gzip_types，以及其它相关参数。根据实际需求来配置，建议别写上多余的、不清楚会产生什么作用的参数，以免产生奇怪的现象。一般 gzip on、gzip_types这两个就够，或者参考官方文档中的参数说明、逐个设置。
除 gzip on、gzip_types外，还有几个比较常用修改的项：
- gzip_min_length: 最小值，即当文件大小小于该数时，不压缩。本身很小的文件压缩没什么意义
- gzip_comp_level: 压缩级别，1_{9，数字越高，压缩比越大，文件越小，同时开销也越大。如果2}4已经压缩比很多，就没必要设置到9。自己可以在电脑上拿个7z测试一下。而且还有更好压缩效果的算法。

需要注意的问题

优化是对资源分配的平衡，压缩需要cpu来参与计算，所以开启压缩是需要与cpu开销问题一起来综合考虑。不能一味追求高压缩比。比如当文件很大时，压缩文件会带来明显延迟，系统CPU也会产生瞬间冲上去。
html、js、json、css等，开启压缩，会给网站带来明显的优化效果。而针对大文件的情况，要么事先手工压缩好，要通过其它方式提供服务，不建议在nginx中开启对大文件的压缩。