一、序文

运用Nginx作为web应用服务时，会代理如下常见文件：js、css、JSON、图片等，本文提供根据Nginx内置的紧缩技能，提供网络恳求呼应速度的解决方案。

1、网络紧缩原理

网络紧缩的原理是消耗CPU资源，削减文件在公网传输的巨细，进步呼应速度。比较于CPU的核算资源，网络带宽通常较为贵重，因此经过CPU资源置换网络带宽资源在实际生产中是可行的操作方案。

二、网络紧缩

此部分所有的紧缩内容在浏览器端都会复原，特别需要指出的是图片，图片在网络间是紧缩状况传输的，抵达浏览器后是会被复原的。

技能实现依托gzip紧缩，仅仅在服务器与客户端网络传输时对静态资源进程紧缩，文件的巨细在紧缩前与复原后坚持不变。

（一）Web资源

1、静态资源

前端项目中js/css文件越来越大，对其履行紧缩处理越来越有必要。

gzip on; gzip_comp_level 5; gzip_min_length 10K; gzip_types application/javascript text/css;

2、动态资源

经过代理后端服务返回的JSON数据归于动态资源的一种。对于一些较大的JSON呼应体，为加快呼应速度，通常也需要做紧缩处理。

gzip on; gzip_comp_level 5; gzip_min_length 50K; gzip_types application/json;

（二）图片资源

1、图片文件

常见的图片文件格局有PNG、JPG、JPEG。

gzip on; gzip_comp_level 5; gzip_min_length 50K; gzip_types image/jpeg image/gif image/png;

三、图片紧缩

Nginx能够动态实现常见格局图片的紧缩与裁剪，动态减小网络传输的文件巨细。图片紧缩分为两类：一是等比紧缩；二是固定宽高紧缩。根据应用场景的不同也分为两类：一是固定参数；二是动态参数。

此部分图片紧缩后抵达浏览器不会被复原。

（一）等比紧缩

运用关键词resize实现等比紧缩，指定宽度或许高度即可在原尺寸图片的基础上等比率紧缩图片。假如同时指定宽度和高度，只有一个参数生效。

1、静态参数

固定宽度，高度自适应

location / { image_filter resize 320 -; }

固定高度，宽度自适应

location / { image_filter resize - 320; }

2、动态参数

资源uri途径与静态资源存储途径坚持一致。

动态指定宽度，高度自适应

location ~* /(.+)\.(jpg|jpeg|gif|png)!(\d+)$ { image_filter resize  $3 -; image_filter_buffer 10M; try_files /$1.$2  /default.png; root html; }

（二）固定宽高紧缩

运用关键词crop实现等宽等高裁剪。

1、静态参数

固定裁剪

location / { image_filter crop 1080 1080; }

2、动态参数

location ~* /(.+)\.(jpg|jpeg|gif|png)!(\d+)x(\d+)$ { image_filter crop  $3 $4; image_filter_buffer 10M; try_files /$1.$2  /default.png; root html; }

（三）默认图片

try_files指令设置默认图片资源，假如找不到对应资源，则运用默认图片。

location ~* /(.+)\.(jpg|jpeg|gif|png)$ { try_files /$1.$2  /default.png; root html; }