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

Posted 2020-07-02

     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