前端性能优化(3)--使用gzip-优快云博客

本文对比分析了GZIP压缩对不同前端资源的影响，指出对于HTML、JS和CSS文件使用GZIP能有效减小文件体积，而对PNG等图片格式则效果不明显甚至增加服务器负担。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说，直接上两张图对比下
[未启用gzip的Size]

[用了gzip以后]

html文件 5.2/10.5 50.5%
css文件 1，9/5.4 35.2%
png图片 101/102 几乎没有变化
js文件 31.6/99.8 31.7%（代码压缩过） 12.8/54.7 23.4%（代码没压缩过）

附nginx配置

http {
    ...
    gzip  on; // 开启gzip
    gzip_min_length 1k; // 最小1k的文件才使用gzip
    gzip_buffers 4 8k; // 代表以8k为单位，按照原始数据大小以8k为单位的4倍申请内存
    gzip_comp_level 5; // 1 压缩比最小处理速度最快，9 压缩比最大但处理最慢（传输快但比较消耗cpu）
    gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; // 支持的文件类型
    gzip_disable "MSIE [1-6]\."; // IE6一下 Gzip支持的不好，故不实用gzip
    ...
}

搜索了相关的资料，说是图片本身已经是压缩过了的，gzip并没有多大用处，反而增加了服务器的负担，某些情况下，文件的大小还会变大，所以并不推荐使用。之后看了下baidu之类的网站，发现图片之类的文件，确实都是没有启动gzip的。但意外的发现bmp图片(不多见)类型的，压缩效率确实很高，我试了一张图片，3.8M的，用gzip之后，大小为992k，压缩率为25.5%，倒是很高，不知道是因为原图没压缩过的原因还是其他，但我一时找不到压缩bmp的工具，所以没法验证，大家自己实际应用的时候验证下再用。

综上所述，再部署前端资源的时候，建议为html, js, css资源开启即可，不需要为图片资源启用gzip。