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

到此这篇关于NGINX启用Gzip压缩的实现(优化前端资源加载速度)的文章就介绍到这了,更多相关NGINX启用Gzip压缩内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！