前端效能最佳化——gzip壓縮，壓縮率 65%

什麼是Gzip壓縮

gzip是一種檔案壓縮格式，它可以將檔案壓縮為較小的大小，以便更快地在網路上傳輸或儲存在磁碟上。

gzip壓縮演算法適用於文字型別的資料，通常用於壓縮Web伺服器上的靜態資原始檔，例如HTML，CSS，JavaScript檔案和其他文字檔案。當客戶端請求這些檔案時，Web伺服器會將它們壓縮為gzip格式並將其傳送到客戶端，這可以顯著提高網站的載入速度和效能。

gzip壓縮是一種有失真壓縮，這意味著壓縮後的檔案可能會損失一些細節和精度，但通常不會對檔案的實用性造成太大影響。

優點

減少檔案大小，gzip壓縮比率在3到10倍左右，可以大大節省伺服器網路頻寬。

1. 減少儲存空間

2. 透過網路傳輸檔案時，減少傳輸時間

缺點

1. 開啟gzip後會額外增加很多cpu開銷，無論是伺服器壓縮還是前端解壓縮都需要消耗cpu。

2. 對圖片壓縮支援不太好，會出現體積變大或圖片失真問題。

如何開啟 Gzip

兩個先行條件

• 伺服器支援並開啟gzip壓縮服務（nginx、IIS、Apache、tomcat伺服器都支援）

• 客戶端（瀏覽器）支援Gzip解壓服務，目前主流瀏覽器都支援Gzip解壓服務，除了IE（可透過Nginx配置 disabled）

判斷是否已開啟Gzip服務

1. 伺服器開啟了 Gzip 壓縮，http響應頭出現：Content-Encoding: gzip

2. 客戶端支援 Gzip 壓縮，http請求頭出現：Accept-Encoding: gzip

伺服器支援 gzip 壓縮的方式

1. 打包的時候生成對應的 .gz 檔案，瀏覽器請求xxx.js資源時，伺服器返回對應的xxx.js.gz檔案。

2. 瀏覽器請求xx.js時，伺服器對xx.js進行壓縮後傳輸給瀏覽器

webpack 搭配 nginx 配置的作用

減少伺服器壓縮檔案的壓力

即：webpack 打包的時候生成資源對應的 .gz 檔案，瀏覽器請求xxx.js（或xxx.css）資源時，伺服器直接返回對應的xxx.js.gz（或xxx.css.gz）檔案

webpack 配置

構建過程中為每個資原始檔生成一個 .gz 字尾的壓縮檔案，然後可以配置 web 伺服器（nginx），使其優先提供這些 gzip 壓縮檔案。

• @vue/cli 5.0.8

• compression-webpack-plugin 4.0.1

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin'); // 4.0.1

module.exports = {
    ...
    configureWebpack: {
        new BundleAnalyzerPlugin(),
        plugins: [
            new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip', //壓縮演算法
                test: /\.js$|\.css$|\.html$/,
                threshold: 10240, // //壓縮超過此大小的檔案,以位元組為單位
                minRatio: 0.8,
                deleteOriginalAssets: false, //刪除原始檔案只保留壓縮後的檔案
            }),
        ],
}

打包

pnpm build:test

打包產物大小對比

打包後資源大小超過 10 KB 的會生成對應的 .gz 檔案

bundle 分析

• 原資源大小，總 2MB

• Gzip 壓縮後的資源大小，總 713.55 KB，壓縮率 65%

713.55 KB = 0.7 MB

2MB * （1 - x）= 0.7MB

x = 65%

原資源大小

Gzip 壓縮後的大小

nginx配置

確保在 nginx 中配置：gzip_static: on; 指令。

告訴 nginx 在提供檔案時優先查詢對應的 .gz 版本，如果找到，nginx 會提供 .gz 檔案而不是原始檔案，並且還會自動設定正確的 Content-Encoding 響應頭。

當瀏覽器支援 gzip 壓縮且請求特定資源時，如果對應的 .gz 檔案存在，nginx 就會直接提供該壓縮檔案，從而減少數據傳輸量，加快網頁載入速度。

gzip on; # 開啟Gzip壓縮

gzip_disable "msie6"; # IE 對 Gzip 壓縮不友好，禁掉

gzip_buffers 4 16k; # 獲取多少記憶體用於快取壓縮結果，4 16k表示以16k*4為單位獲得，預設 4 8k

gzip_comp_level 6; # 壓縮比{1 - 9}，1處理壓縮速度最快，9最慢（傳輸快但消耗CPU）

gzip_static: on; # 告訴 nginx 在提供檔案時優先查詢對應的 .gz 版本

gzip_http_version 1.1; # 識別http協議的版本,早期瀏覽器可能不支援gzip自解壓,使用者會看到亂碼，預設1.1

gzip_min_length 10k; // 超過 10Kb才壓縮

gzip_types text/plain text/plain application/javascript application/x-javascript text/css application/xml text/javascript

Lighthouse 效能最佳化分析

參考

• www.cnblogs.com/Nicander/p/…

• blog.csdn.net/guzhao593/a…

• blog.csdn.net/Rainy_X/art…