当前位置: 首页 > news >正文

Nginx(资源压缩)

建立在动静分离的基础之上,如果一个静态资源的Size越小,那么自然传输速度会更快,同时也会更节省带宽,因此我们在部署项目时,也可以通过Nginx对于静态资源实现压缩传输,一方面可以节省带宽资源,第二方面也可以加快响应速度并提升系统整体吞吐。

Nginx也提供了三个支持资源压缩的模块ngx_http_gzip_module、ngx_http_gzip_static_module、ngx_http_gunzip_module,其中ngx_http_gzip_module属于内置模块,代表着可以直接使用该模块下的一些压缩指令,后续的资源压缩操作都基于该模块,先来看看压缩配置的一些参数/指令:

参数项释义参数值
gzip开启或关闭压缩机制on/off
gzip_types根据文件类型选择性开启压缩机制image/png、text/css ...
gzip_comp_level用于设置压缩机别,级别越高越耗时1~9(越高压缩效果越好)
gzip_vary设置是否携带Vary:Accept-Encoding头域的相应头部on/off
gzip_buffers设置处理压缩请求的缓冲区数量和大小数量大小,如16 8k
gzip_disable针对不同客户端的请求来设置是否开启压缩如.*Chrome.*
gzip_http_version指定压缩相应所需要的最低HTTP请求版本如1.1
gzip_min_length设置触发压缩的文件最低大小如512k
gzip_proxied对于后端服务器的相应结果是否开启压缩off、expired、no-cache

了解了Nginx中的基本压缩配置后,接下来可以在Nginx中简单配置一下:

vi /usr/local/nginx/conf/nginx.conf

http{# 开启压缩机制gzip on;# 指定会被压缩的文件类型(也可自己配置其他类型)gzip_types text/plain application/javascript text/css application/xml text/javascript image/jpeg image/gif image/png;# 设置压缩级别,越高资源消耗越大,但压缩效果越好gzip_comp_level 5;# 在头部中添加Vary: Accept-Encoding(建议开启)gzip_vary on;# 处理压缩请求的缓冲区数量和大小gzip_buffers 16 8k;# 对于不支持压缩功能的客户端请求不开启压缩机制gzip_disable "MSIE [1-6]\."; # 低版本的IE浏览器不支持压缩# 设置压缩响应所支持的HTTP最低版本gzip_http_version 1.1;# 设置触发压缩的最小阈值gzip_min_length 2k;# 关闭对后端服务器的响应结果进行压缩gzip_proxied off;
}

在上述的压缩配置中,最后一个gzip_proxied选项,可以根据系统的实际情况决定,总共存在多种选项:

  • off:关闭Nginx对后台服务器的响应结果进行压缩。

  • 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:无条件对后端的响应结果开启压缩机制。

分别来对比下压缩前后的区别:

从图中可以很明显看出,未开启压缩机制前访问时,color.html文件的响应时间为8ms,当配置好压缩后再重启Nginx,会发现文件大小从8ms→4ms,效果立竿见影!

注意点:①对于图片、视频类型的数据,会默认开启压缩机制,因此一般无需再次开启压缩。②对于.js文件而言,需要指定压缩类型为application/javascript,而并非text/javascript、application/x-javascript

相关文章:

  • 人工智能 -- 神经网络
  • 【React】打包优化-配置CDN
  • echart一键生成迁徙图
  • 了解FastSam:一个通用分割模型(草记)
  • Qt5.15.2静态编译 VS2017 with static OpenSSL
  • 存算一体还是存算分离?谈谈数据库基础设施的架构选择
  • 2023.11.22 数据仓库2-维度建模
  • Centos 7 离线安装(tar) NodeJS 16 和 Vue
  • docker启动容器失败,然后查看日志,docker logs查看容器出现报错:
  • 面试问题--智能指针
  • U盘报错无法访问文件或目录损坏且无法读取的解决办法
  • Proteus仿真--高仿真数码管电子钟
  • 了解JSX
  • vue升级题
  • 电子学会C/C++编程等级考试2021年09月(三级)真题解析
  • 【108天】Java——《Head First Java》笔记(第1-4章)
  • E-HPC支持多队列管理和自动伸缩
  • Flex布局到底解决了什么问题
  • KMP算法及优化
  • PHP的Ev教程三(Periodic watcher)
  • Promise面试题,控制异步流程
  • Python语法速览与机器学习开发环境搭建
  • React系列之 Redux 架构模式
  • SOFAMosn配置模型
  • spring cloud gateway 源码解析(4)跨域问题处理
  • Traffic-Sign Detection and Classification in the Wild 论文笔记
  • 百度贴吧爬虫node+vue baidu_tieba_crawler
  • 翻译 | 老司机带你秒懂内存管理 - 第一部(共三部)
  • 基于 Babel 的 npm 包最小化设置
  • 基于 Ueditor 的现代化编辑器 Neditor 1.5.4 发布
  • 基于webpack 的 vue 多页架构
  • ------- 计算机网络基础
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 如何胜任知名企业的商业数据分析师?
  • 三分钟教你同步 Visual Studio Code 设置
  • 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
  • 微信小程序设置上一页数据
  • 温故知新之javascript面向对象
  • 无服务器化是企业 IT 架构的未来吗?
  • 一个普通的 5 年iOS开发者的自我总结,以及5年开发经历和感想!
  • 最简单的无缝轮播
  • 【运维趟坑回忆录 开篇】初入初创, 一脸懵
  • 京东物流联手山西图灵打造智能供应链,让阅读更有趣 ...
  • 通过调用文摘列表API获取文摘
  • ​【已解决】npm install​卡主不动的情况
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • $var=htmlencode(“‘);alert(‘2“); 的个人理解
  • (C++17) optional的使用
  • (附源码)ssm高校社团管理系统 毕业设计 234162
  • (全注解开发)学习Spring-MVC的第三天
  • (十五)使用Nexus创建Maven私服
  • (十一)c52学习之旅-动态数码管
  • (十一)手动添加用户和文件的特殊权限
  • (原創) 物件導向與老子思想 (OO)
  • (转)从零实现3D图像引擎:(8)参数化直线与3D平面函数库