欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Nginx實現(xiàn)靜態(tài)資源壓縮的方法詳解

 更新時間:2024年02月02日 08:20:46   作者:鏗然架構  
靜態(tài)資源過大,下載耗時導致頁面打開慢,希望通過壓縮減小文件大小,提升下載速度,所以本文給大家介紹了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禁止某個IP訪問站點的設置方法

    nginx禁止某個IP訪問站點的設置方法

    近期發(fā)現(xiàn)博客遭到某些人的惡意灌水,頻繁地利用發(fā)帖機器人發(fā)表評論,給博客的管理帶來諸多不便,搜索了一下資料,可以利用nginx的ngx_http_access_module 模塊設置允許/禁止哪些ip或ip段訪問站點。
    2010-12-12
  • Nginx日志中request_time和upstream_response_time區(qū)別

    Nginx日志中request_time和upstream_response_time區(qū)別

    Nginx日志中的request_time和upstream_response_time是關鍵的性能指標,本文就來介紹一下Nginx日志中request_time和upstream_response_time區(qū)別,具有一定的參考價值,感興趣的可以了解一下
    2024-11-11
  • Linux Nginx下SSL證書安裝方法及WordPress CDN配置

    Linux Nginx下SSL證書安裝方法及WordPress CDN配置

    這篇文章主要介紹了Linux Nginx下SSL證書安裝方法及WordPress CDN配置,需要的朋友可以參考下
    2017-08-08
  • Nginx的配置文件結(jié)構和各種配置指令

    Nginx的配置文件結(jié)構和各種配置指令

    Nginx是一款高性能的Web服務器和反向代理服務器,常常被用作Web服務器、負載均衡器、反向代理和緩存服務器等,本文將詳細介紹Nginx的配置文件結(jié)構和各種配置指令,幫助你理解和正確配置Nginx?服務器
    2024-03-03
  • 解決systemctl reload nginx重啟Nginx服務報錯:Job for nginx.service invalid問題

    解決systemctl reload nginx重啟Nginx服務報錯:Job for&n

    文章描述了通過`systemctl status nginx.service`發(fā)現(xiàn)Nginx服務未啟動,啟動失敗的原因可能是端口號被占用,使用`netstat -ntlp | grep 80`命令找到了占用80端口的進程(PID為7008),通過`kill 7008`停止了該進程,然后重新啟動Nginx
    2025-01-01
  • nginx長連接配置小結(jié)

    nginx長連接配置小結(jié)

    Nginx長連接通過保持TCP連接,減少連接建立和關閉的開銷,提高性能和效率,本文就來介紹一下nginx長連接配置,具有一定的參考價值,感興趣的可以了解一下
    2025-02-02
  • Ubuntu環(huán)境下安裝部署Nginx詳細步驟(有網(wǎng))

    Ubuntu環(huán)境下安裝部署Nginx詳細步驟(有網(wǎng))

    Nginx是一個開源的?HTTP?網(wǎng)絡服務器,下面這篇文章主要給大家介紹了關于Ubuntu環(huán)境下安裝部署Nginx(有網(wǎng))的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2024-01-01
  • 使用goaccess分析nginx日志的詳細方法

    使用goaccess分析nginx日志的詳細方法

    goaccess 工具提供快速、多樣的HTTP狀態(tài)統(tǒng)計,可以令管理員不再糾結(jié)于統(tǒng)計各類數(shù)據(jù),和繁雜的指令以及一大堆管道/正則表達式說再見,今天通過本文給大家介紹goaccess 分析nginx 日志的方法,需要的朋友一起看看吧
    2021-07-07
  • Nginx中try_files指令的實現(xiàn)示例

    Nginx中try_files指令的實現(xiàn)示例

    try_files是Nginx配置中的一個指令,用于檢查文件是否存在,并根據(jù)存在情況處理請求,本文就來介紹一下Nginx中try_files指令的實現(xiàn)示例,感興趣的可以了解一下
    2024-10-10
  • Nginx開啟Brotli壓縮算法實現(xiàn)過程詳解

    Nginx開啟Brotli壓縮算法實現(xiàn)過程詳解

    這篇文章主要介紹了Nginx開啟Brotli壓縮算法實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-11-11

最新評論