Nginx 入门：打开 gzip 压缩

9。启用gzip压缩

gzip是一种常用的网页压缩技术。经过gzip压缩后，传输的网页大小通常可以缩小一半甚至更小（官网原文），更小的网页大小意味着节省带宽并提高传输速度。特别是对于高流量的大型网站，静态资源大小的任何减少都会导致流量和带宽的显着减少。节省。

百度可以找到很多检测站点来检查目标网页是否启用了gzip压缩。刚刚找到一个，输入nuggetsjuejin.im看看nuggets是否开启。 gzip。

这里可以看到掘金开启了gzip，压缩效果相当不错，达到了52%。原始网页大小34kb压缩后只需要16kb。 ，可以想象，网页传输速度提升了很多。 ？它受支持并且是现代浏览器中的默认设置）。通常，在请求 html 和 css 等静态资源时，支持的浏览器会添加 Accept-Encoding: gzip 标头，以表明它们支持 gzip 压缩方法。 Nginx 收到此请求时，如果有相应的配置，则将 gzip 压缩的文件返回给浏览器，并且响应中附加 content-encoding: gzip 告诉浏览器本身使用的压缩方式（因为通常浏览器向服务器传输时，是告诉服务器自己支持多种压缩方式）。浏览器收到压缩文件后，根据其解压方式进行解析。

我们先看看Nginx是如何配置gzip的。这与之前的配置相同。为了方便管理，在/etc/nginx/conf.d/文件夹中创建一个新的配置文件gzip。 .conf：

# /etc/nginx/conf.d/gzip.conf

gzip on; # 默认off，是否开启gzip
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# 上面两个开启基本就能跑起了，下面的愿意折腾就了解一下
gzip_static on;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
# gzip_min_length 1k;
gzip_http_version 1.1;
复制代码

小说明：

1. gzip_types：使用gzip压缩的MIME文件类型，其中text/html被系统强制允许；
2. gzip_static：默认关闭。启用该模块后，Nginx 首先检查是否存在需要静态文件的 gz 结尾的文件。如果是，则直接返回.gz的内容；
3. gzip_proxyed：默认关闭，使用nginx作为反向代理时启用，用于启用或禁用从代理接收的相应内容的gzip压缩；
4. gzip_vary：用于将Vary：Accept-Encoding添加到响应消息头中，允许代理根据ac代码❙ en‷ ❀aco检测是否启用了gzip压缩。请求头中的； † 建议为-6；
5. gzip_buffers：获取多少内存来缓存压缩结果，16 8k表示以8k*16为单位获取；
6. gzip_min_length：允许压缩页面的最小字节数。页面的字节数从标头中的 Content-Length 部分获取。默认值为 0，无论页面大小如何都会压缩页面。建议设置为大于1k的字节数。如果低于1k，压缩可能会增加；
7. gzip_http_version：默认1.1，启用gzip所需的最低HTTP版本； † 使用。当然，如果我们像上面这样写的话，就会被添加到http模块中。 。

   完整的配置信息可以参考。配置前，如下：

   配置后，响应头多了一个内容编码：gzip。返回信息已压缩：

   注。一般的gzip配置建议是添加gzip_min_length 1k，如果没有：

   因为文件太小优化了-48%。经过gzip压缩和压缩后。之后体积比压缩前大了，所以最好将文件大小设置为小于1kb而不进行gzip压缩？

   9.2 Webpack gzip 配置

   当前结束的项目是使用 Webpack 打包的。此时也可以开启gzip压缩：

   // vue-cli3 的 vue.config.js 文件
   const CompressionWebpackPlugin = require('compression-webpack-plugin')
   
   module.exports = {
     // gzip 配置
     configureWebpack: config => {
       if (process.env.NODE_ENV === 'production') {
         // 生产环境
         return {
           plugins: [new CompressionWebpackPlugin({
             test: /\.js$|\.html$|\.css/,    // 匹配文件名
             threshold: 10240,               // 文件压缩阈值，对超过10k的进行压缩
             deleteOriginalAssets: false     // 是否删除源文件
           })]
         }
       }
     },
     ...
   }
   复制代码

   压缩文件如下： 这里在一些压缩文件下，gzip之后对应的压缩文件为.gz。这是因为文件超过10kb。某些文件不超过 10 kb，并且未使用 gzip 进行压缩。如果您希望压缩文件的大小阈值更小，可以在配置compression-webpack-plugin中进行相应配置。

   为什么Nginx这里已经有gzip压缩而Webpack这里有gzip？因为Nginx在压缩文件时会消耗服务器计算资源。如果服务器的 gzip_comp_level 配置比较高的话，会增加服务器的开销，客户端的请求时间也会相应增加，得不偿失。

   如果前端压缩时进行了压缩操作，并且压缩后的高压缩文件作为静态资源放在服务器上，Nginx会优先搜索那些压缩文件并返回给客户端，相当于压缩。文件操作是Nginx预先打包为Webpack时完成的，这样可以节省服务器资源。因此，一般建议在生产环境中使用Webpack配置gzip压缩。

   作者：SHERlocked93
链接：https://juejin.im/post/6844904144235413512
来源：掘金
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。