快捷導(dǎo)航

NGINX啟用Gzip壓縮的實現(xiàn)(優(yōu)化前端資源加載速度)

更新時間：2026年05月27日 08:49:30 作者：瘋癲的老碼農(nóng)

本文分享了通過啟用NGINX的Gzip壓縮功能來優(yōu)化前端資源加載速度的實踐方案,該方案能有效減少網(wǎng)絡(luò)傳輸數(shù)據(jù)量,是提升Web性能的常用高效手段,感興趣的可以了解一下

一、背景

在系統(tǒng)開發(fā)中，當(dāng)瀏覽器訪問頁面的時候，經(jīng)常會遇到頁面加載比較慢的情況。一般加載頁面會涉及到j(luò)s、css、html、image等資源，當(dāng)網(wǎng)絡(luò)速度也不快，資源也不小的情況下，首次打開系統(tǒng)頁面往往會比較慢，尤其是給別人演示的時候或者客戶使用的時候，就顯得比較尷尬了。

我做的系統(tǒng)一般都是基于前后端分離的架構(gòu)，前端使用的是vue，后端是springboot，前后臺配合使用的。當(dāng)然也是面臨了打包好的vue資源加載比較慢的問題。我這里采用了前端資源進行g(shù)z壓縮，nginx開啟了gzip配置，使得在瀏覽器加載前端資源的時候，直接選擇gz文件進行加載，大大提升了速度。

這里記錄下并且為了分享給各位小伙伴~，不喜勿噴，多謝~。

二、概述

本文介紹了一種通過啟用NGINX的Gzip壓縮功能來顯著提升加載速度的方案。該方法通過兩步實現(xiàn)：首先，確保前端構(gòu)建工具能生成 .gz 壓縮文件；其次，在NGINX服務(wù)器上進行相應(yīng)配置，使其在響應(yīng)瀏覽器請求時優(yōu)先返回壓縮后的資源。配置生效后，通過瀏覽器開發(fā)者工具驗證響應(yīng)頭的 Content-Encoding 字段或直觀感受加載速度的提升，即可確認優(yōu)化成功。此方案能有效減少網(wǎng)絡(luò)傳輸數(shù)據(jù)量，是優(yōu)化Web性能的常用且高效的手段。

三、正文

1、前端資源能夠打出來gz的文件

2、在NGINX上啟用gzip

 gzip on; #開啟壓縮
 gzip_vary on; #設(shè)置為on會在Header里增加 "Vary: Accept-Encoding"
 gzip_proxied any; #代理結(jié)果數(shù)據(jù)的壓縮
 gzip_comp_level 3; #gzip壓縮比（1~9），越小壓縮效果越差，但是越大處理越慢，所以一般取中間值
 gzip_buffers 4 128k; #獲取多少內(nèi)存用于緩存壓縮結(jié)果,拿出 4 個 128K 用來緩存壓縮的文件，是指：
 gzip_http_version 1.1; #識別http協(xié)議的版本
 gzip_min_length 1k; #設(shè)置允許壓縮的頁面最小字節(jié)數(shù)，超過1k的文件會被壓縮 
 gzip_types text/plain text/css application/javascript application/json;