锐客网

  1. 首页 > 睿知 > it技术 > >

Nginx网络压缩 CSS压缩 图片压缩 JSON压缩

IT知识网络网络压缩

提兵百万西湖上，立马吴山第一峰！这篇文章主要讲述Nginx网络压缩 CSS压缩 图片压缩 JSON压缩相关的知识，希望能为你提供帮助。
一、序言
使用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_buffer10M; try_files /$1.$2/default.png; roothtml;

（二）固定宽高压缩使用关键词crop实现等宽等高裁剪。
1、静态参数固定裁剪
location / image_filter crop 1080 1080;

2、动态参数
location ~* /(.+)\\.(jpg|jpeg|gif|png)!(\\d+)x(\\d+)$ image_filter crop$3 $4; image_filter_buffer10M; try_files /$1.$2/default.png; roothtml;

（三）默认图片try_files指令设置默认图片资源，如果找不到对应资源，则使用默认图片。
location ~* /(.+)\\.(jpg|jpeg|gif|png)$ try_files /$1.$2/default.png; roothtml;

【Nginx网络压缩 CSS压缩 图片压缩 JSON压缩】
Nginx网络压缩 CSS压缩 图片压缩 JSON压缩

文章图片

原文地址

    推荐阅读


    上一篇：#yyds干货盘点# java实现快速排序

    下一篇：AES和DES密码之间有什么区别（）