欢迎光临
我们一直在努力

《Nginx 压缩优化实战:从 14MB 到 3.3MB,网站提速明显》

正文 一、问题:网站总感觉“卡卡的” 我的工具箱网站上线后,功能丰富、安全稳定,但访问体验总差那么一口气:首页加载要好几秒,点击工具切换有延迟,手机访问更是“卡的动不了”。 在这里插入图片描述

起初我以为服务器配置低(2核2G),或者是代码写得烂。但电脑上打开开发者工具一看,一个 index-xxx.js 文件居然有 14 MB(解压后),即使压缩传输也有 3.3 MB。这么大的 JS 文件,手机下载慢、解析更慢,不卡才怪。

二、排查:到底有没有开启压缩? 我检查了 Nginx 配置,明明已经写了 gzip on;,为什么浏览器还是下载这么大的文件?用命令验证:

curl -I -H "Accept-Encoding: gzip" https://www.hight.xin/assets/index-67b47052.js | grep Content-Encoding

结果竟然没有输出。说明 Nginx 根本没有对代理请求(proxy_pass)进行压缩。

三、解决方案:加入 gzip_proxied any 我当前的 Nginx 是反向代理到 Docker 容器,gzip on; 默认只压缩静态文件,对于代理请求需要显式开启。在配置文件的 server 块中添加一行:

gzip_proxied any;

同时完善了 Gzip 相关参数:

gzip on;
gzip_comp_level 6; # 压缩级别 6,平衡性能与体积
gzip_min_length 1000; # 小于 1KB 不压缩
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
gzip_proxied any; # 关键:对代理请求也压缩

重载 Nginx:

sudo nginx -t && sudo systemctl reload nginx

再次验证,输出 Content-Encoding: gzip,压缩生效!

四、效果:速度提升肉眼可见 传输体积:主 JS 文件从 14 MB → 3.3 MB(压缩后),减少约 76%。

电脑端:首页加载从“卡一下”变成“秒开”,工具切换流畅多了。

手机端:虽然 3.3 MB 仍然偏大,但下载时间缩短,卡顿感明显减轻。

对于个人站长来说,这已经是性价比很高的优化了。

五、反思与总结 不要想当然:gzip on; 不代表对所有请求都压缩,代理场景必须用 gzip_proxied。

工具验证:用 curl 查看响应头,比猜更靠谱。

量力而行:进一步优化需要代码分割、CDN 等,投入大、收益有限,暂时不做。

如果你也遇到类似问题,不妨检查一下 Nginx 的 gzip_proxied 配置。

IT-Tools 地址:https://www.hight.xin

赞(0)
未经允许不得转载:171主机测评 » 《Nginx 压缩优化实战:从 14MB 到 3.3MB,网站提速明显》
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址