nginx性能优化之Gzip

背景：

项目过程中有个显而易见的性能优化问题，如下图所示：

该项目发布到nginx服务器后，在网络带宽约50M的情况下，在没有缓存的情况下，首次加载速度慢到十几秒时间，加载项目打包后的js文件达到14MB。使用传统的前端性能优化方案，懒加载路由，列表分页加载，压缩图片，首屏懒加载子模块等方案后，网页加载速度仍居高不下。

问题分析

经过排查发现，主要瓶颈在于：

单个JS文件体积过大(15MB)
不同网络环境下加载速度差异显著
传统优化方案对大型资源文件效果有限

解决方案：Gzip压缩

Gzip工作原理

Gzip是一种广泛使用的数据压缩算法，通过以下方式提升性能：

在服务器端压缩静态资源
在客户端浏览器解压资源
显著减少网络传输的数据量

前端配置gzip：

ini 复制代码

安装：npm install compression-webpack-plugin --save-dev;

引入：const CompressionPlugin = require("compression-webpack-plugin");

核心参数说明

test
- 正则表达式 /.(js|css|html)?$/i
- 作用：匹配需要压缩的文件类型（不区分大小写）
- 支持扩展名：.js、.css、.html，?表示这些扩展名可选
filename
- 字符串 "[path].gz[query]"
- 生成规则：
  - 保留原文件路径结构
  - 在文件名后追加 .gz 后缀
  - 保留URL查询参数（如 ?v=1.0）
algorithm
- 字符串 "gzip"
- 指定使用gzip压缩算法（现代浏览器普遍支持）
minRatio
- 默认数值 0.8
- 压缩率阈值：仅当压缩后文件大小小于原始文件的80%时执行压缩
- 数值范围 ‌：minRatio接受一个介于0到1之间的浮点数（默认值为0.8），表示压缩后的文件体积与原始文件体积的最小比例阈值。
- ‌触发逻辑 ‌：只有当实际压缩比（压缩后大小/原始大小）‌小于等于‌该值时，才会生成压缩文件；否则跳过压缩。例如：
- 若设置为0.8，则文件需压缩至原始大小的80%或更小才会生效。
- 若压缩后大小为原始大小的85%（即压缩比为0.85），则不会生成.gz文件。
minRatio 典型应用场景
- ‌避免低效压缩 ‌：对已高度压缩的资源（如已优化的图片、视频）进行Gzip可能反而增大体积，通过minRatio可过滤此类文件。
- ‌性能权衡 ‌：压缩过小的文件（如1KB的JS）节省的带宽有限，但会增加服务器解压开销，可通过调高minRatio（如0.9）

nginx配置gzip：

bash 复制代码

# Nginx Gzip 压缩配置详解

## 完整配置代码
```nginx.conf中：
gzip on;
gzip_min_length 10k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 5;
gzip_types text/plain text/css application/json application/javascript 
           text/xml application/xml application/xml+rss text/javascript 
           application/font-woff2;
gzip_vary on;
gzip_proxied any;
gzip_disable "msie6";

参数说明

配置指令	作用说明	默认值
`gzip on`	启用Gzip压缩功能	必开
`gzip_min_length`	最小压缩文件大小	10k
`gzip_buffers`	压缩缓冲区配置	4 16k
`gzip_http_version`	最低HTTP版本要求	1.1
`gzip_comp_level`	压缩级别(1-9) 1-9压缩率升高，性能消耗变大	5
`gzip_types`	需要压缩的MIME类型	见配置
`gzip_vary`	添加Vary响应头	on
`gzip_proxied`	代理请求压缩策略	any
`gzip_disable`	禁用压缩的UA	msie6