VuePress 部落格優化之開啟 Gzip 壓縮

冴羽發表於2022-01-20
Vue優化

前言

在 《一篇帶你用 VuePress + Github Pages 搭建部落格》中，我們使用 VuePress 搭建了一個部落格，在 《一篇從購買伺服器到部署部落格程式碼的詳細教程》中，我們將程式碼部署到伺服器上，最終的效果檢視：TypeScript 中文文件。今天我們來學習如何開啟伺服器的 Gzip 壓縮。

Gzip 壓縮

關於 Gzip 壓縮，引用 MDN 的介紹：

Gzip 是一種用於檔案壓縮與解壓縮的檔案格式。它基於 Deflate 演算法，可將檔案壓縮地更小，從而實現更快的網路傳輸。 Web伺服器與現代瀏覽器普遍地支援 Gzip，這意味著伺服器可以在傳送檔案之前自動使用 Gzip 壓縮檔案，而瀏覽器可以在接收檔案時自行解壓縮檔案。

而對於我們而言，開啟 Gzip，不僅能提高網站開啟速度，還能節約網站流量，像我購買的伺服器是按照使用流量付費，開啟 Gzip 就是在為自己省錢。

Nginx 與 Gzip

Nginx 內建了 ngx_http_gzip_module 模組，該模組會攔截請求，並對需要做 Gzip 壓縮的檔案做壓縮。因為是內部整合，所以我們只用修改 Nginx 的配置，就可以直接開啟。

# 登陸伺服器
ssh -v root@8.147.xxx.xxx

# 進入 Nginx 目錄
cd /etc/nginx

# 修改 Nginx 配置
vim nginx.conf

在 server 中新增 Gzip 壓縮相關配置：

server {
        listen 443 ssl;
        server_name ts.yayujs.com;
        ssl_certificate cert/6982037_ts.yayujs.com.pem;
        ssl_certificate_key cert/6982037_ts.yayujs.com.key;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_prefer_server_ciphers on;
        location ^~ /learn-typescript/ {
                alias /home/www/website/ts/;
        }
        location / {
                alias /home/www/website/ts/;
                index index.html;
        }
              # 這裡是新增的 gzip 配置
              gzip on;
              gzip_min_length 1k;
              gzip_comp_level 6;
              gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml;
}

這裡簡要介紹一下涉及到的配置項含義，更具體的可以檢視 Nginx 官方文件裡的解釋：

  1. gzip ：是否開啟 gzip 模組 on 表示開啟 off 表示關閉，預設是 off
  2. gzip_min_length： 設定壓縮的最小檔案大小，小於該設定值的檔案將不會壓縮
  3. gzip_comp_level： 壓縮級別，從 1 到 9，預設 1，數字越大壓縮效果越好，但也會越佔用 CPU 時間，這裡選了一個常見的折中值
  4. gzip_types：進行壓縮的檔案型別

修改完後，不要忘記重新載入一次 Nginx 配置：

systemctl reload nginx

驗證

第一種方式是直接檢視網路請求，開啟瀏覽器的除錯工具，檢視 Network 請求，如果請求響應頭的 Content-Encoding 欄位為 gzip，就表示成功開啟了 Gzip：

image.png

第二種方式是通過站長工具驗證，開啟網頁GZIP壓縮檢測，輸入網站，進行查詢：

image.png

效果

我們以「基礎」章節頁面為例，這是開啟 Gzip 壓縮前的截圖：

image.png

我們可以看到傳輸大小為 2.2M，用時 14.53s。

這是開啟 Gzip 壓縮後的截圖：

image.png

我們可以看到傳輸大小為 526 K，用時 1.27s，可以看到資源大小、載入速度都得到了大幅的提升。

系列文章

部落格搭建系列是我至今寫的唯一一個偏實戰的系列教程，講解如何使用 VuePress 搭建部落格，並部署到 GitHub、Gitee、個人伺服器等平臺。

  1. 一篇帶你用 VuePress + GitHub Pages 搭建部落格
  2. 一篇教你程式碼同步 GitHub 和 Gitee
  3. 還不會用 GitHub Actions ？看看這篇
  4. Gitee 如何自動部署 Pages？還是用 GitHub Actions!
  5. 一份前端夠用的 Linux 命令
  6. 一份簡單夠用的 Nginx Location 配置講解
  7. 一篇從購買伺服器到部署部落格程式碼的詳細教程
  8. 一篇域名從購買到備案到解析的詳細教程
  9. VuePress 部落格優化之 last updated 最後更新時間如何設定
  10. VuePress 部落格優化之新增資料統計功能
  11. VuePress 部落格優化之開啟 HTTPS

微信：「mqyqingfeng」，加我進冴羽唯一的讀者群。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者 有所啟發，歡迎 star，對作者也是一種鼓勵。

相關文章