快捷導(dǎo)航

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

更新時(shí)間：2024年02月02日 08:20:46 作者：鏗然架構(gòu)

靜態(tài)資源過大,下載耗時(shí)導(dǎo)致頁面打開慢,希望通過壓縮減小文件大小,提升下載速度,所以本文給大家介紹了Nginx實(shí)現(xiàn)靜態(tài)資源壓縮的方法，并通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下

1. 概述

1.1 背景

靜態(tài)資源過大，下載耗時(shí)導(dǎo)致頁面打開慢，希望通過壓縮減小文件大小，提升下載速度。

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為例子來說明整個(gè)實(shí)現(xiàn)過程。

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;