【NGINX实战】NGINX启用Gzip压缩(优化前端资源加载速度)

一、背景

在系统开发中，当浏览器访问页面的时候，经常会遇到页面加载比较慢的情况。一般加载页面会涉及到js、css、html、image等资源，当网络速度也不快，资源也不小的情况下，首次打开系统页面往往会比较慢，尤其是给别人演示的时候或者客户使用的时候，就显得比较尴尬了。

我做的系统一般都是基于前后端分离的架构，前端使用的是vue，后端是springboot，前后台配合使用的。当然也是面临了打包好的vue资源加载比较慢的问题。我这里采用了前端资源进行gz压缩，nginx开启了gzip配置，使得在浏览器加载前端资源的时候，直接选择gz文件进行加载，大大提升了速度。

这里记录下并且为了分享给各位小伙伴~，不喜勿喷，多谢~。

二、概述

本文介绍了一种通过启用NGINX的Gzip压缩功能来显著提升加载速度的方案。该方法通过两步实现：首先，确保前端构建工具能生成 .gz 压缩文件；其次，在NGINX服务器上进行相应配置，使其在响应浏览器请求时优先返回压缩后的资源。配置生效后，通过浏览器开发者工具验证响应头的 Content-Encoding 字段或直观感受加载速度的提升，即可确认优化成功。此方案能有效减少网络传输数据量，是优化Web性能的常用且高效的手段。

三、正文

1、前端资源能够打出来gz的文件

2、在NGINX上启用gzip

 gzip on; #开启压缩
 gzip_vary on; #设置为on会在Header里增加 "Vary: Accept-Encoding"
 gzip_proxied any; #代理结果数据的压缩
 gzip_comp_level 3; #gzip压缩比（1~9），越小压缩效果越差，但是越大处理越慢，所以一般取中间值
 gzip_buffers 4 128k; #获取多少内存用于缓存压缩结果,拿出 4 个 128K 用来缓存压缩的文件，是指：
 gzip_http_version 1.1; #识别http协议的版本
 gzip_min_length 1k; #设置允许压缩的页面最小字节数，超过1k的文件会被压缩 
 gzip_types text/plain text/css application/javascript application/json; 

3、验证gzip是否生效

方式1：清理掉浏览器缓存，重新访问页面是否速度明显提升了

或者是打开控制台，看看资源加载的时间，会比较明显

方式2：静态资源查看响应报文content-encoding的值是否是gzip