深入浅出 -- 系统架构之负载均衡Nginx资源压缩

一、Nginx资源压缩

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

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

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

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

OK~,简单修改好了Nginx的压缩配置后,可以在原本的index页面中引入一个jquery-3.6.0.js文件:

bash 复制代码
<script type="text/javascript" src="jquery-3.6.0.js"></script>

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

从图中可以很明显看出,未开启压缩机制前访问时,js文件的原始大小为230K,当配置好压缩后再重启Nginx,会发现文件大小从230KB→69KB,效果立竿见影!

注意点:

①对于图片、视频类型的数据,会默认开启压缩机制,因此一般无需再次开启压缩。

②对于.js文件而言,需要指定压缩类型为application/javascript,而并非text/javascript、application/x-javascript。

相关推荐
诚心呈意共享外卖配送系统1 小时前
众包配送调度系统选什么?聊聊派单、抢单、合单与结算的技术设计
架构·系统架构·创业创新
天衍四九-2 小时前
【无标题】
前端·spring boot·mysql·nginx·docker
吴声子夜歌6 小时前
Nginx应用与运维——Nginx HTTP模块详解(动态赋值功能模块)
运维·nginx·http
姜鱼问生6 小时前
三层防火墙排查:Nginx 配好了浏览器还打不开
nginx·安全
abigalexy8 小时前
图解AI应用架构设计
人工智能·ai·架构·系统架构·aigc
小白的码BUG之路11 小时前
Docker -- 构建nginx镜像,启动vue项目
vue.js·nginx·docker
yume_sibai11 小时前
04-Nginx部署实战完全指南(前端部署 + 后端代理 + 监控告警 + 故障排查)
运维·前端·nginx
沫璃染墨12 小时前
《从零入门Linux系统篇(五十三):线程篇·六——线程互斥详解:从并发问题到mutex互斥锁》
linux·运维·服务器·开发语言·后端·架构·系统架构
励志不掉头发的内向程序员12 小时前
【从零写一个CAD 04】中键拖动平移:抓住一个点,让它一直待在鼠标底下
开发语言·c++·qt·学习·系统架构·计算机外设
weixin_4241836121 小时前
开放—封闭原则实战(下):基于策略的流程编排与编译期多态
c++·分布式·系统架构