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;