2022
我们一起努力

nginx配置gzip压缩(nginx配置gzip压缩消息体)

目录:

  • 1、使用gzip优化页面加载遇到的问题
  • 2、nginx配置文件详解
  • 3、主机宝linux+ngnix+wordpress怎么启用Gzip压缩呢?
  • 4、请教Nginx 中对 application/json 格式进行 gzip 压缩无效的问题

使用gzip优化页面加载遇到的问题

我司目前项目已经经过了很多次优化了,期间通过webpack打包实践了很多种方式,包括样式文件通过 gulp 实现命令行级别输出到static目录下,避免了此类css的打包,通过 equire 插件实现了echarts的按需引入,换掉了momentjs替换成了轻量的dayjs,还有一些比较细的优化,在此就不一一列举了。

但是由于多页面配置,每个页面的js都挺大的,导致进入页面不是很流畅。期间曾经尝试了gzip,栽坑里了,由于需求原因又搁置了,近期手头工作比较少,又开始了踩坑的路途。

gzip是一种通用的压缩算法,可以降低网络传输的数据量,从而提高客户端浏览器的访问速度。由于浏览器向服务器发送请求,加载服务器响应的静态资源,当资源文件过大,会导致用户感受的加载时间较长,影响用户体验。

虽然浏览器还需要解压gzip文件,但这速度跟加载一个未压缩的文件相比,简直少得不要不要的了。

当然,我们可以通过采用其他优化方式并用提高页面加载速度,实在无济于事了,也可以加一朵旋转的 小菊花 [狗头],但gzip的使用能大幅降低加载时间,何乐而不为呢?

由于项目是基于vue开发,在 vue.config.js 中添加下列配置即可。(react也大同小异)

然后你就可以通过执行,查看 /dist/ 文件夹下的变化了。

如果你需要比较详细的配置gzip打包,请移步

配置里中有一个 deleteOriginalAssets 属性,意思是删除源文件,一般为 false 即可,同时保留源文件和压缩后的 .gz 后缀文件。

当然这不是本篇文章的重点。重点是什么?当然是 坑 了!

由于现在的浏览器默认支持gzip压缩,你可以在请求头里看到 Accept-Encoding: gzip, deflate 得以确认。

我司服务器使用nginx做请求转发和实现简单的负载均衡。在网上,不乏有如何在nginx上开启gzip配置的博客或文章。其实蛮简单的,类似一下命令键入打开nginx配置文件:

再在 http 模块下添加这么几行配置:

命令行中报错,内容如下显示:

意思是“gzip_static”指令未知,无法被识别。

由于安装nginx时缺少了相应配置,需要添加 with-http_gzip_static_module 配置,在此之前需要先执行以下命令:

再在nginx安装目录下,重新编译和安装nginx,具体方式如下:

然后等待进程执行完,重新启动nginx即可。

通过以上的方式,nginx已经支持了 gzip_static 模块,以便nginx优先匹配 .gz 后缀文件返回。执行以下命令重新nginx:

好吧,正常情况下,是这样的。

但是...

如果你打开浏览器F12,刷新页面查看资源请求,发现静态资源的 Response Headers 属性中却没有 Content-Encoding: gzip 。喔豁...显然配置没有生效啊!

我们现在的问题发生在重启了nginx,新添加的模块却没有生效,浏览器还是获取的源文件。此时,我就开始百度了,百度大法好啊,各种回答都出来了。

nginx没有生效,可能是你的配置有误,语法不合法?检查一下:

结果命令行出现以下信息:

显示语法ok了,测试也通过了,说明正常启动了吧?打开浏览器,又查看了一遍资源加载......

第一种试过了,哭了。

那么nginx重启没生效,会不会是重启没成功啊?软的不行,来硬的呗。键入:

此时,进程中如果没有nginx, kill 命令生效了。此时,我重新在命令行中进入nginx命令行目录,运行 nginx -s reload ,意想不到的问题出来了。

我又重新试了kill命令又报错:

杀掉了主进程,却没有启动成功!

吓得我一个激灵看了一下页面,咦?

正常情况下,刷新页面,页面会由于nginx进程被 kill 导致页面无法访问。但是,页面依然能正常打开,俺不信邪,又试了好几个页面,果不其然都行。(不知道是该开心,还是该难过?)

查看进程列表中是否 nginx 的占用?

果不其然,的确有这个进程,再次通过 kill 命令删除PID进程号,再次执行之前命令,发现列表中nginx进程不复存在了。点此查看 彻底删除nginx进程

此时,我们刷新浏览器页面,地址访问不了了,确定nginx已经被彻底删除,此时执行 nginx重启命令 ,测试 gzip_static 测试是否成功应用。不出意外,nginx应用gzip应该是成功了。此时,你应该能成功看到 Request Headers 中的 Content-Encoding: gzip 了,明显能感到页面加载的速度变快了。

这次记录就到这了,希望对你能有帮助~Skr

nginx配置文件详解

一、安装Nginx

在安装Nginx之前,需确保系统已经安装了gcc、 openssl-devel、 pcre-devel和zlib-devel软件库。

其中, _with-http_stub_status_module 可以用来启用 Nginx 的 NginxStatus 功能,以监控 Nginx 的运行状态。

二、Nginx的配置文件结构

Nginx的配置文件nginx.conf位于其安装目录的conf目录下。

nginx.conf由多个块组成,最外面的块是main,main包含Events和HTTP,HTTP包含upstream和多个Server,Server又包含多个location。

main(全局设置)、server(主机设置)、upstream(负载均衡服务器设置)和 location(URL匹配特定位置的设置)。

1、main块设置的指令将影响其他所有设置。

2、server块的指令主要用于指定主机和端口。

3、upstream指令主要用于负载均衡,设置一系列的后端服务器。

4、location块用于匹配网页位置。

这四者之间的关系式:server继承main,location继承server,upstream既不会继承其他设置也不会被继承。

在这四个部分当中,每个部分都包含若干指令,这些指令主要包含Nginx的主模块指令、事件模块指令、HTTP核心模块指令,同时每个部分还可以使用其他HTTP模块指令,例如Http SSL模块、HttpGzip Static模块和Http Addition模块等。

三、Nginx的全局配置

events事件指令是设定Nginx的工作模式及连接数上限:

use是个事件模块指令,用来指定Nginx的工作模式。Nginx支持的工作模式有select、poll、kqueue、epoll、rtsig和/dev/poll。

其中select和poll都是标准的工作模式,kqueue和epoll是高效的工作模式,不同的是epoll用在Linux平台上,而kqueue用在BSD系统中。对于Linux系统,epoll工作模式是首选worker_connections也是个事件模块指令,用于定义Nginx每个进程的最大连接数,默认是1024。

最大客户端连接数由worker_processes和worker_connections决定,即Max_client=worker_processes*worker_connections。

在作为反向代理时,max_clients变为:max_clients = worker_processes * worker_connections/4。

进程的最大连接数受Linux系统进程的最大打开文件数限制,在执行操作系统命令“ulimit -n 65536”后worker_connections的设置才能生效。

四、下面配置Nginx的HttpGzip模块。这个模块支持在线实时压缩输出数据流。

通过/opt/nginx/sbin/nginx -V命令可以查看安装Nginx时的编译选项,由输出可知,已经安装了HttpGzip模块。

五、负载均衡配置

下面设定负载均衡的服务器列表:

upstream是Nginx的HTTP Upstream模块,这个模块通过一个简单的调度算法来实现客户端IP到后端服务器的负载均衡。

在上面的设定中,通过upstream指令指定了一个负载均衡器的名称cszhi.com。这个名称可以任意指定,在后面需要的地方直接调用即可,Nginx的负载均衡模块目前支持4种调度算法。

六、server虚拟主机配置

下面介绍对虚拟主机的配置。

建议将对虚拟主机进行配置的内容写进另外一个文件,然后通过include指令包含进来,这样更便于维护和管理。

server标志定义虚拟主机开始,listen用于指定虚拟主机的服务端口,server_name用来指定IP地址或者域名,多个域名之间用空格分 开。index用于设定访问的默认首页地址,root指令用于指定虚拟主机的网页根目录,这个目录可以是相对路径,也可以是绝对路径。

Charset用于 设置网页的默认编码格式。access_log用来指定此虚拟主机的访问日志存放路径,最后的main用于指定访问日志的输出格式。

七、location URL匹配配置

URL地址匹配是进行Nginx配置中最灵活的部分。 location支持正则表达式匹配,也支持条件判断匹配,用户可以通过location指令实现Nginx对动、静态网页进行过滤处理。使用location URL匹配配置还可以实现反向代理,用于实现PHP动态解析或者负载负载均衡。

以下这段设置是通过location指令来对网页URL进行分析处理,所有扩展名以.gif、.jpg、.jpeg、.png、.bmp、.swf结尾的静态文件都交给nginx处理,而expires用来指定静态文件的过期时间,这里是30天。

八、StubStatus模块配置

StubStatus模块能够获取Nginx自上次启动以来的工作状态,此模块非核心模块,需要在Nginx编译安装时手工指定才能使用此功能。

stub_status设置为“on”表示启用StubStatus的工作状态统计功能。access_log 用来指定StubStatus模块的访问日志文件。auth_basic是Nginx的一种认证机制。

auth_basic_user_file用来指定认证的密码文件,由于Nginx的auth_basic认证采用的是与Apache兼容的密码文件,因此需要用Apache的htpasswd命令来生成密码文件。

然后输入两次密码后确认之后添加用户成功。

要查看Nginx的运行状态,可以输入,输入创建的用户名和密码就可以看到Nginx的运行状态。

Active connections表示当前活跃的连接数,第三行的三个数字表示 Nginx当前总共处理了34561个连接, 成功创建次握手, 总共处理了354399个请求。

最后一行的Reading表示Nginx读取到客户端Header信息数, Writing表示Nginx返回给客户端的Header信息数,“Waiting”表示Nginx已经处理完,正在等候下一次请求指令时的驻留连接数。

在最后这段设置中,设置了虚拟主机的错误信息返回页面,通过error_page指令可以定制各种错误信息的返回页面。在默认情况下,Nginx会在主目录的html目录中查找指定的返回页面。

特别需要注意的是,这些错误信息的返回页面大小一定要超过512K,否者会被ie浏览器替换为ie默认的错误页面。

主机宝linux+ngnix+wordpress怎么启用Gzip压缩呢?

这个真的简单,我干脆把代码一起复制出来,免得你点链接进去看,

gzip_static on;

gzip_http_version 1.1;

gzip_proxied expired no-cache no-store private auth;

gzip_disable "MSIE [1-6] .";

gzip_vary on;

#找不到预压缩文件,进行动态压缩

gzip on;

gzip_min_length 1000;

gzip_buffers 4 16k;

gzip_comp_level 5;

gzip_types text/plain application/x-javascript text/css application/xml;

#gzip公共配置

gzip_http_version 1.1

gzip_proxied expired no-cache no-store private auth;

nginx静态压缩(ngx_http_gzip_static_module)

;tid=23086fromuid=1

(出处: 蓝芯科技)

请教Nginx 中对 application/json 格式进行 gzip 压缩无效的问题

默认情况下,开启gzip不会对application/json类型的响应做压缩处理,需要通过以下指令使nginx对application/json格式进行gzip压缩:

 gzip         on;

 gzip_types   application/json application/javascript text/css image/svg+xml;

赞(0)
文章名称:《nginx配置gzip压缩(nginx配置gzip压缩消息体)》
文章链接:https://www.fzvps.com/132743.html
本站文章来源于互联网,如有侵权,请联系管理删除,本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
图片版权归属各自创作者所有,图片水印出于防止被无耻之徒盗取劳动成果的目的。

评论 抢沙发

评论前必须登录!