Nginx开启gzip压缩演示

一、介绍

Nginx对静态资源的压缩就是在服务端进行压缩传输到浏览器端进行解压，这个压缩和解压的过程中减少中间网络传输的消耗。就是减少服务端带宽资源的消耗还有减少传输的文件大小从而实现传输的实时性。
对于压缩我们可以启用Nginx的gizp压缩设置。

---

二、gizp配置

#开启gzip
gzip on; 
# gzip 压缩级别
gzip_comp_level 2;
# 启用gzip压缩的最小文件
gzip_min_length 1k;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;        

更多设置参考:Nginx文档gzip相关参数设置

三、演示

首先我在服务器准备好了演示使用的图片demo.jpg

接下来我们前往/etc/nginx/conf.d/新建test.conf进行设置

server {
    listen       80;
    server_name  localhost;

    sendfile on;
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;

    location ~ .*\.(jpg|gif|png)$ {
        gzip off;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        root /opt/app/demo/images;
    }
#error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504 404 /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

此时设置gzip off 我们访问该图片:

该图片资源大小为749KB
接下来我们开启gzip

location ~ .*\.(jpg|gif|png)$ {
        gzip on;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        root /opt/app/demo/images;
    }

reload nginx:
nginx -s reload -c /etc/nginx/nginx.conf
再次访问该图片:

现在该图片传输资源大小被压缩为747KB
可以看到确实有压缩了但是似乎压缩的比并不理想
事实上gzip对文本的压缩更为显著,对图片的压缩比率并不是很理想
我们同样对文本文件压缩设置来测试一下压缩的比例:
我们在text.conf中增加这一段

location ~ .*\.(txt|xml)$ {
        gzip off;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        root /opt/app/demo/doc;
    }

然后在/opt/app/demo/doc 中准备好文本文件
reload Nginx后在gzip off时访问该文本文件:

此时传输资源大小为1.3MB
我们将gzip打开后reload Nginx再次访问该文本:

可见此时传输资源大小为12.4KB
说明gzip对文本的压缩是非常理想的
对比两次结果从Time第一次为9.09s到第二次50ms可以看出Nginx开启gzip压缩大大提高了网页响应的速度。