Nginx启用Gzip压缩js无效的原因

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Nginx启用Gzip压缩js无效的原因相关的知识,希望对你有一定的参考价值。

     nginx启用gzip很简单,只需要设置一下配置文件即可完成,可以参考文章Nginx如何配置Gzip压缩功能。不过,在群里常有人提到,他们的网站Gzip压缩虽然成功了,但检测到JS仍然没有压缩成功,这是为什么呢?经过我的检查发现,原来是他们的gzip_types设置不对造成的,本文就为遇到同样情况的人解决这一问题。

      Nginx启用Gzip压缩js无效

      某群友在群里提到,他启用了网站的Gzip压缩,通过站长工具Gzip压缩检测检测到启用成功了,想着其他文件如CSS、JS等也都压缩成功了,但是通过进一步检测各种类型的压缩情况,发现JS文件并没有启用Gzip压缩,这令他非常纳闷,不知何故。

技术分享

图1:Nginx启用Gzip压缩js无效

      根据经验,我认为可能原因是他的配置文件里gzip_types的内容没有写对,于是问他gzip_types的内容是什么,他说是这样设置的:

技术分享

图2:gzip_types的配置

      我仔细看了他的gzip_types的内容,再看图1中的Header信息,发现Content-Type项的“application/javascript”并没有出现在他的gzip_types内容里,于是我叫他把“application/javascript”写到他的gzip_types里,他按照我的要求做了后,再检测一下,js文件的gzip压缩终于启用成功了。

技术分享

图3:Nginx启用Gzip压缩js成功

      经验

      上述案例是该群友没有在gzip_types里加入“application/javascript”而导致其JS文件没有压缩成功,但是经发现,某些群友即使加入了“application/javascript”也同样出现JS文件没有压缩成功的状况,这是为什么呢?原来,各网站的JS类型“content-type”内容不尽相同,Nginx配置gzip是要把各种类型文件的“content-type”内容加进去才行,不加进去就不能被压缩。

      所以,当发现Nginx压缩JS没有成功时,可先查看网站JS的Header信息,如图1那样检测(地址:http://pagespeed.webkaka.com/youhua/gzip/),便可获得js文件的“content-type”内容。获得其“content-type”内容,再看看配置文件的gzip_types里有没有此项内容,如果没有,加入去即可解决问题。

      一键检测网站各类型文件是否启用gzip

      值得注意的问题是,网站启用了Gzip压缩并不等于各类型文件都启用了Gzip压缩,这与设置是否得当有关。不过如果需要你一个个文件的输入去检测,那未免有点繁琐。为此,卡卡网可以帮助你解决这一烦恼,一键检测网站各类型文件是否启用gzip压缩。检测地址是http://pagespeed.webkaka.com/,检测结果看下图:

技术分享

图4:一键检测网站各类型文件是否启用gzip

以上是关于Nginx启用Gzip压缩js无效的原因的主要内容,如果未能解决你的问题,请参考以下文章

nginx/express 开启gzip压缩

nginx开启gzip压缩和静态缓存

iis7 压缩js文件和启用gzip压缩

nginx gzip

vue项目打包gzip压缩

Nginx gzip配置