Nginx實(shí)現(xiàn)靜態(tài)資源壓縮的方法詳解
1. 概述
1.1 背景
靜態(tài)資源過(guò)大,下載耗時(shí)導(dǎo)致頁(yè)面打開慢,希望通過(guò)壓縮減小文件大小,提升下載速度。
1.2 壓縮方式
Nginx壓縮支持兩種方式,靜態(tài)壓縮和動(dòng)態(tài)壓縮。
● 靜態(tài)壓縮
是先把js、css等文件壓縮為.gz文件,客戶端訪問時(shí)會(huì)自動(dòng)下載.gz文件,并在客戶端自動(dòng)解壓后訪問。
● 動(dòng)態(tài)壓縮
客戶端發(fā)起請(qǐng)求時(shí),nginx動(dòng)態(tài)將js、css文件壓縮后返回給客戶端,客戶端收到后自動(dòng)解壓并訪問。
2. 實(shí)現(xiàn)
Nginx版本:1.24.0
2.1 靜態(tài)壓縮
我們以Vue3為例子來(lái)說(shuō)明整個(gè)實(shí)現(xiàn)過(guò)程。
2.1.1 壓縮Vue3資源文件
● 安裝壓縮插件
npm install vite-plugin-compression
● 插件配置
vite.config.ts/js 中導(dǎo)入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, // 文件容量大于這個(gè)值進(jìn)行壓縮 algorithm: 'gzip', // 壓縮方式 ext: 'gz', // 后綴名 deleteOriginFile: true, // 壓縮后是否刪除壓縮源文件,false不刪除 }) ], // 其他配置省略 }
注意不要壓縮*.html文件,否則訪問時(shí)會(huì)報(bào)403錯(cuò)誤,即使添加如下配置也會(huì)報(bào)錯(cuò):
● 打包
npm run build
輸出文件后,部署到nginx的靜態(tài)資源文件目錄:
2.1.2 Nginx配置
● 啟用靜態(tài)壓縮功能
在http塊或server塊增加如下配置則可:
gzip_static on; # 只需要加這一個(gè)配置
● 配置靜態(tài)資源目錄
壓縮后的文件部署到自定義目錄下:
location / { root /site/static; index index.html index.htm; }
2.2 動(dòng)態(tài)壓縮
在http塊或server塊增加如下配置則可:
# 開啟動(dòng)態(tài)壓縮功能 gzip on; # 壓縮級(jí)別 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. 驗(yàn)證
3.1 壓縮和未壓縮性能對(duì)比
3.1.1 本機(jī)測(cè)試
如下是一個(gè)壓縮和不壓縮對(duì)比的例子:
可以看到,壓縮后的傳輸數(shù)據(jù)變小了,但是加載時(shí)間并沒有減少,說(shuō)明壓縮/解壓縮也需要時(shí)間,至于哪種方式更快,取決于網(wǎng)絡(luò)耗時(shí)和壓縮耗時(shí)的具體大小。
3.1.2 公網(wǎng)測(cè)試
壓縮前:
壓縮后:
可以看到在壓縮后體積減小,加載時(shí)間也變短了。
3.2 識(shí)別靜態(tài)壓縮和動(dòng)態(tài)壓縮
● 靜態(tài)壓縮
● 動(dòng)態(tài)壓縮
4. 總結(jié)
● 壓縮后未必一定能提升頁(yè)面打開速度,需要比較網(wǎng)絡(luò)耗時(shí)和壓縮耗時(shí)時(shí)間,哪個(gè)更省時(shí)。
● 動(dòng)態(tài)壓縮會(huì)消耗nginx的處理性能,如果能靜態(tài)壓縮,可以優(yōu)先考慮使用靜態(tài)壓縮。(可以參考自行實(shí)測(cè)結(jié)果)
● 動(dòng)態(tài)壓縮和靜態(tài)壓縮可以同時(shí)使用,有靜態(tài)壓縮文件就使用,沒有則動(dòng)態(tài)壓縮。
以上就是Nginx實(shí)現(xiàn)靜態(tài)資源壓縮的方法詳解的詳細(xì)內(nèi)容,更多關(guān)于Nginx靜態(tài)資源壓縮的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
nginx禁止某個(gè)IP訪問站點(diǎn)的設(shè)置方法
近期發(fā)現(xiàn)博客遭到某些人的惡意灌水,頻繁地利用發(fā)帖機(jī)器人發(fā)表評(píng)論,給博客的管理帶來(lái)諸多不便,搜索了一下資料,可以利用nginx的ngx_http_access_module 模塊設(shè)置允許/禁止哪些ip或ip段訪問站點(diǎn)。2010-12-12Nginx日志中request_time和upstream_response_time區(qū)別
Nginx日志中的request_time和upstream_response_time是關(guān)鍵的性能指標(biāo),本文就來(lái)介紹一下Nginx日志中request_time和upstream_response_time區(qū)別,具有一定的參考價(jià)值,感興趣的可以了解一下2024-11-11Linux Nginx下SSL證書安裝方法及WordPress CDN配置
這篇文章主要介紹了Linux Nginx下SSL證書安裝方法及WordPress CDN配置,需要的朋友可以參考下2017-08-08解決systemctl reload nginx重啟Nginx服務(wù)報(bào)錯(cuò):Job for&n
文章描述了通過(guò)`systemctl status nginx.service`發(fā)現(xiàn)Nginx服務(wù)未啟動(dòng),啟動(dòng)失敗的原因可能是端口號(hào)被占用,使用`netstat -ntlp | grep 80`命令找到了占用80端口的進(jìn)程(PID為7008),通過(guò)`kill 7008`停止了該進(jìn)程,然后重新啟動(dòng)Nginx2025-01-01Ubuntu環(huán)境下安裝部署Nginx詳細(xì)步驟(有網(wǎng))
Nginx是一個(gè)開源的?HTTP?網(wǎng)絡(luò)服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于Ubuntu環(huán)境下安裝部署Nginx(有網(wǎng))的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01Nginx中try_files指令的實(shí)現(xiàn)示例
try_files是Nginx配置中的一個(gè)指令,用于檢查文件是否存在,并根據(jù)存在情況處理請(qǐng)求,本文就來(lái)介紹一下Nginx中try_files指令的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-10-10Nginx開啟Brotli壓縮算法實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了Nginx開啟Brotli壓縮算法實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11