中间件-Nginx-静态资源js/css压缩

1、应用场景

随着前后端分离的方式越来越盛行，但是我们提升网站加载速度的方式万变不离其中。针对高并发的H5站点，我们在使用npm构建之后完全将所有静态资源存储在CDN上，但是此种方式部署相对麻烦。大多数站点的访问量，可以部署在ECS上，在加上一层Nginx/Openresty做静态资源的访问入口，通过开启gzip压缩可以大大提升访问速度。

2、使用方式

2.1 代码配置

以下代码可以直接配置在server模块下，则其下的站点将会开启压缩。
注意加上 application/javascript ，否则不生效。

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/javascript text/javascript application/x-javascript text/css application/xml;
gzip_vary off;

2.2 查看效果

以淘宝的js文件加载示例：响应头的 content-encoding:gzip 说明已经开启压缩。

3、配置指令说明

详细配置可参考官方文档：gzip配置文档

开启gzip压缩响应数据

语法：gzip on | off;
默认：gzip off;
可配置上下文：http, server, location, if in location

设置压缩的缓冲区大小
默认值是一个内存页的大小，根据不同的平台是4k或8k。

语法：gzip_buffers number size;
默认：gzip_buffers 32 4k|16 8k;
可配置上下文：http, server, location

设置压缩等级

语法：gzip_comp_level level;
默认：gzip_comp_level 1;
可配置上下文：http, server, location

压缩效果级别可设置1~9，数值越大压缩效果越好，同时也越消耗CPU时间片。

根据请求头匹配不压缩

语法：gzip_disable regex ...;
默认：—
可配置上下文：http, server, location

可以根据请求头的User-Agent字段，如果匹配上了该regex 表达式，则不开启压缩。

设置压缩的HTTP最低版本

语法：gzip_http_version 1.0 | 1.1;
默认：gzip_http_version 1.1;
可配置上下文：http, server, location

设置压缩的最小响应包的大小

语法：gzip_min_length length;
默认：gzip_min_length 20;
可配置上下文：http, server, location

这个值仅仅由响应头的“Content-Length”字段所决定。

设置作为代理的时候是否压缩

语法：	gzip_proxied off | expired | no-cache | no-store | private | no_last_modified | no_etag | auth | any ...;
默认：gzip_proxied off;
可配置上下文：http, server, location

• off：关闭所有代理请求的压缩，忽略其他的选项。
• expired：如果响应头包含“Expires字段关闭缓存，则启用压缩。
• no-cache：如果响应头的字段Cache-Control包含“no-cache””，则开启压缩。
• no-store：如果响应头的“Cache-Control”字段包含no-store，则开启压缩。
• private：如果响应头的“Cache-Control”字段包含private，则开启压缩。
• no_last_modified： 如果响应头的不包含“Last-Modified”，则开启压缩。
• no_etag：如果响应头的不包含“ETag”，则开启压缩。
• auth：如果请求头包含“Authorization”，则开启压缩。
• any：为所有的代理开启压缩

设置压缩类型

语法：gzip_types mime-type ...;
默认：gzip_types text/html;
可配置上下文：http, server, location

可以设置成 * ，表示压缩所有的类型。建议之压缩静态文本资源。图片、视频等效果不好而且耗费资源，可以采用阿里云OSS、华为云OBS、腾讯云COS存储，这些产品可支持配置参数进行图片的压缩裁剪等。

插入Vary: Accept-Encoding响应头

语法：gzip_vary on | off;
默认：gzip_vary off;
可配置上下文：http, server, location

根据gzip指令是否激活，可以在响应头插入Vary: Accept-Encoding。