HTTP压缩可以大大提高浏览网站的速度，它的原理是，在客户端请求服务器对应资源后，从服务端将资源文件压缩，再输出到客户端，由客户端的浏览器负责解压缩并浏览。即：通过减小HTTP响应大小来减少响应时间。
GZIP是一种网络流式压缩算法。

作为一般规则，始终使用 gzip 之类的东西压缩你的 assets 。但是不要在图像和其他二进制文件上使用压缩 —— 你应该在源头提前优化这些文件。压缩实际上最终会使它们更大。并且，如果可以，请避免压缩 1500 字节或更小的文件。最小的 TCP 包大小为 1500 字节，因此通过压缩到 800 字节。但是它仍然在相同的字节数据包中传输，浪费了服务器上的一些压缩 CPU 时间和客户端上的解压缩 CPU 时间。

  • 对文本进行压缩（HTML/CSS/JS）
  • 而对非文本不压缩（jpg/gif/png）
  • 压缩比约50% - 70%

配置方法

启用 gzip 需要客户端和服务端的支持。

服务端的配置

  • Nginx 配置：nginx.conf 文件的 http{…} 之间增加
    • gzip on
    • gzip_min_length 1k：设置允许压缩的页面最小字节数，页面字节数从 header 头中的 Content-Length 中进行获取。默认值是 0 ，不管页面多大都压缩。建议设置成大于 1k 的字节数，小于 1k 可能会越压越大
    • gzip_buffers 4 16k：获取多少内存用于缓存压缩结果， ‘4 16k’ 表示以 16k*4 为单位获得
    • gzip_comp_level 5：gzip 压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值
    • gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php ：对特定的 MIME 类型生效，其中 ‘text/html’ 被系统强制启用
    • gzip_http_version 1.1：识别 http 协议的版本，早期浏览器可能不支持 gzip 自解压，用户会看到乱码
    • gzip_vary on：启用应答头 “Vary: Accept-Encoding”
  • Apache 配置：AddOutputFilterByType 和 AddOutputFilter
  • node：只要加上 compress 模块即可 ```javascript var compressing = require(‘compression’) var app = express();

// 尽量在其它中间件前使用 compression app.use(compression());

  2. - webpack的配置
  4. 安装 `npm i -D compression-webpack-plugin` 。
  5. ```javascript
  6. const CompressionWebpackPlugin = require('compression-webpack-plugin');
  7. plugins.push(
  8.   new CompressionWebpackPlugin({
  9.     asset: '[path].gz[query]', // 目标文件名
  10.     algorithm: 'gzip', // 使用 gzip 压缩
  11.     test: new RegExp(
  12.       '\\.(js|css)$' //压缩 js 与 css
  13.       ),
  14.     threshold: 10240, // 资源文件大于 10240B = 10KB 才会被压缩
  15.     minRatio: 0.8 // 最小压缩比达到 0.8 时才会被压缩

  • tomcat 的配置：找到 tomcat 的 server.xml 文件，找到其中 Connector 节点然后进行配置修改，具体配置如下

    1. <Connector port="8080" 
    2.          protocol="HTTP/1.1" 
    3.          connectionTimeout="20000"
    4.          redirectPort="8443" URIEncoding="utf-8"
    5.          useSendfile="false"
    6.          compression="on"
    7.          compressionMinSize="2048"
    8.          noCompressionUserAgents="gozilla,traviata"
    9.          compressableMimeType="text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain"
    10.          />

    注意端口 port 要与项目端口保持一致。
    参数说明：

  • compression=”on”：打开压缩功能

  • compressionMinSize=”50”：启用压缩的输出内容，当被压缩对象的而大小大于等于该值时才会被压缩，这里面默认为 2KB
  • noCompressionUserAgents=”gozilla,traviata”：对于以下的浏览器，不启用压缩
  • compressableMimeType=”text/html,text/xml,text/javascript,application/x-javascript,application/javascript,text/css,text/plain”：压缩类型

    生效检测

    response header 查看是否有 Content-Encoding: gzip ，代表服务端已开启 gzip 。