NodeJS 伺服器實現 gzip 壓縮
概述
在瀏覽器向伺服器請求靜態資源時，伺服器為了減小在網路傳輸過程中消耗的流量和時間，都是將靜態資源經過壓縮後返回給伺服器的，實現壓縮的演算法有 deflate 和 gzip 等，最常用的是 gzip 壓縮。
gzip 簡介
在瀏覽器和伺服器之間通過 gzip 壓縮流實現傳輸的過程可以用下圖表示。
當瀏覽器向伺服器請求靜態資源，伺服器會將靜態資源經過處理轉換為壓縮流，大大減小檔案體積，然後將壓縮流返回給瀏覽器，瀏覽器通過壓縮的型別重新將壓縮流解析成靜態檔案。
zlib 模組的使用
1、壓縮
在 NodeJS 中通過 zlib 模組幫助我們實現不同型別的壓縮，其實壓縮的過程就是建立流的過程，建立的壓縮流是 Transform 型別（轉化流），讀取檔案的內容經過轉化流建立一個新型別的檔案。
// 檔案：gzip.js
const zlib = require("zlib");
const fs = require("fs");
const path = require("path");
// 壓縮
function gzip(source) {
// 處理輸入和輸出的檔案路徑
let sourcePath = path.join(__dirname, source);
let gzipPath = `${sourcePath}.gz`;
// 建立轉化流
let gzip = zlib.createGzip();
// 建立可讀流
let 執行上面程式碼檢視根目路是否出現 index.gz 壓縮包。
2、解壓
壓縮的過程是可逆的，可以壓縮就可以解壓，無論是在瀏覽器還是在伺服器，我們下面實現解壓的方法。
// 檔案：gunzip.js
const zlib = require("zlib");
const fs = require 刪除原來 index.html，執行解壓程式碼，檢視檔案根目錄是否生成 index.html。
伺服器的實現
在瀏覽器與伺服器的互動中，瀏覽器其實會通過請求頭 Accept-Encoding 告訴伺服器當前支援解壓的壓縮格式，值為 gzip, deflate, br，多個壓縮格式用 , 隔開，伺服器在接收到瀏覽器請求後，會按照請求頭的格式壓縮資源，將壓縮後的資源返回，並通過響應頭 Content-Encoding 告訴瀏覽器當前伺服器壓縮的格式。
// 檔案：server.js
// 引入依賴
const http = require("http");
const url = require("url");
const path = require("path");
const fs = require("fs");
const zlib = require("zlib");
// 建立伺服器
const server = http.createServer((req, res) => {
// 處理 pathname，"/" 時預設讀取 "/index.html"
let { pathname } = url.parse(req.url, true);
pathname = pathname !== "/" ? pathname : "/index.html";
// 獲取讀取檔案的絕對路徑
let p = path.join(__dirname, pathname);
// 檢視路徑是否合法
fs.access(p, err => {
// 路徑不合法則直接中斷連線
if (err) return res.end("Not Found");
// 獲取瀏覽器支援的壓縮格式
let encoding = req.headers["accept-encoding"];
// 建立可讀流
let rs = fs.createReadStream(p);
// 支援 gzip 使用 gzip 壓縮，支援 deflate 使用 deflate 壓縮
if (encoding && encoding.match(/\bgzip\b/)) {
let compress = zlib.createGzip();
let compressType = "gzip";
} else if (encoding && encoding.match(/\bdeflate\b/)) {
let compress = zlib.createDeflate();
let compressType = "deflate";
} else {
// 否則直接返回可讀流
return rs.pipe(res);
}
// 將壓縮流返回並設定響應頭
res.setHeader("Content-Encoding", compressType);
rs.pipe(compress).pipe(res);
});
});
server.listen(3000, () => {
console.log("server start 3000");
});
在上面伺服器中如果不通過響應頭通知瀏覽器當前資源的壓縮格式，瀏覽器會不知道該如何解壓，預設會當成檔案下載，如 Chrome，所以在返回壓縮流時必須通過 Content-Encoding 響應頭通知瀏覽器當前的壓縮格式。
測試伺服器壓縮
我們在檔案根目錄建立一個 index.html 檔案，程式碼如下。
<!-- 檔案：index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>gzip</title>
</head>
<body>
<div>Hello GZIP!</div>
</body>
</html>
啟動伺服器 server.js，然後通過瀏覽器訪問 localhost:3000，檢視頁面能否正確返回，並檢視開發者工具 Network 中的響應頭 Content-Encoding 的值是否正確。
總結
伺服器壓縮其實是客戶端與伺服器在網路傳輸時的一種優化手段，可以大大減小流量的消耗和響應時間，而 gzip 只是目前最常用的一種壓縮格式，即壓縮演算法。