Nginx實現(xiàn)靜態(tài)資源壓縮的方法詳解
1. 概述
1.1 背景
靜態(tài)資源過大,下載耗時導致頁面打開慢,希望通過壓縮減小文件大小,提升下載速度。
1.2 壓縮方式
Nginx壓縮支持兩種方式,靜態(tài)壓縮和動態(tài)壓縮。
● 靜態(tài)壓縮
是先把js、css等文件壓縮為.gz文件,客戶端訪問時會自動下載.gz文件,并在客戶端自動解壓后訪問。
● 動態(tài)壓縮
客戶端發(fā)起請求時,nginx動態(tài)將js、css文件壓縮后返回給客戶端,客戶端收到后自動解壓并訪問。
2. 實現(xiàn)
Nginx版本:1.24.0
2.1 靜態(tài)壓縮
我們以Vue3為例子來說明整個實現(xiàn)過程。
2.1.1 壓縮Vue3資源文件
● 安裝壓縮插件
npm install vite-plugin-compression
● 插件配置
vite.config.ts/js 中導入vite-plugin-compression插件和配置
import vue from '@vitejs/plugin-vue' import viteCompression from 'vite-plugin-compression' export default { plugins: [ vue(), // 下面是壓縮插件配置 viteCompression({ filter: /\.(js|css|json|txt|ico|svg)(\?.*)?$/i, // 需要壓縮的文件 threshold: 1024, // 文件容量大于這個值進行壓縮 algorithm: 'gzip', // 壓縮方式 ext: 'gz', // 后綴名 deleteOriginFile: true, // 壓縮后是否刪除壓縮源文件,false不刪除 }) ], // 其他配置省略 }
注意不要壓縮*.html文件,否則訪問時會報403錯誤,即使添加如下配置也會報錯:
● 打包
npm run build
輸出文件后,部署到nginx的靜態(tài)資源文件目錄:
2.1.2 Nginx配置
● 啟用靜態(tài)壓縮功能
在http塊或server塊增加如下配置則可:
gzip_static on; # 只需要加這一個配置
● 配置靜態(tài)資源目錄
壓縮后的文件部署到自定義目錄下:
location / { root /site/static; index index.html index.htm; }
2.2 動態(tài)壓縮
在http塊或server塊增加如下配置則可:
# 開啟動態(tài)壓縮功能 gzip on; # 壓縮級別 gzip_comp_level 6; # 哪些類型的文件需要壓縮 gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
3. 驗證
3.1 壓縮和未壓縮性能對比
3.1.1 本機測試
如下是一個壓縮和不壓縮對比的例子:
可以看到,壓縮后的傳輸數(shù)據(jù)變小了,但是加載時間并沒有減少,說明壓縮/解壓縮也需要時間,至于哪種方式更快,取決于網(wǎng)絡耗時和壓縮耗時的具體大小。
3.1.2 公網(wǎng)測試
壓縮前:
壓縮后:
可以看到在壓縮后體積減小,加載時間也變短了。
3.2 識別靜態(tài)壓縮和動態(tài)壓縮
● 靜態(tài)壓縮
● 動態(tài)壓縮
4. 總結(jié)
● 壓縮后未必一定能提升頁面打開速度,需要比較網(wǎng)絡耗時和壓縮耗時時間,哪個更省時。
● 動態(tài)壓縮會消耗nginx的處理性能,如果能靜態(tài)壓縮,可以優(yōu)先考慮使用靜態(tài)壓縮。(可以參考自行實測結(jié)果)
● 動態(tài)壓縮和靜態(tài)壓縮可以同時使用,有靜態(tài)壓縮文件就使用,沒有則動態(tài)壓縮。
以上就是Nginx實現(xiàn)靜態(tài)資源壓縮的方法詳解的詳細內(nèi)容,更多關于Nginx靜態(tài)資源壓縮的資料請關注腳本之家其它相關文章!
相關文章
Nginx日志中request_time和upstream_response_time區(qū)別
Nginx日志中的request_time和upstream_response_time是關鍵的性能指標,本文就來介紹一下Nginx日志中request_time和upstream_response_time區(qū)別,具有一定的參考價值,感興趣的可以了解一下2024-11-11Linux Nginx下SSL證書安裝方法及WordPress CDN配置
這篇文章主要介紹了Linux Nginx下SSL證書安裝方法及WordPress CDN配置,需要的朋友可以參考下2017-08-08解決systemctl reload nginx重啟Nginx服務報錯:Job for&n
文章描述了通過`systemctl status nginx.service`發(fā)現(xiàn)Nginx服務未啟動,啟動失敗的原因可能是端口號被占用,使用`netstat -ntlp | grep 80`命令找到了占用80端口的進程(PID為7008),通過`kill 7008`停止了該進程,然后重新啟動Nginx2025-01-01Ubuntu環(huán)境下安裝部署Nginx詳細步驟(有網(wǎng))
Nginx是一個開源的?HTTP?網(wǎng)絡服務器,下面這篇文章主要給大家介紹了關于Ubuntu環(huán)境下安裝部署Nginx(有網(wǎng))的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-01-01