快捷導(dǎo)航

NodeJS服務(wù)器實現(xiàn)gzip壓縮的示例代碼

更新時間：2018年10月12日 10:05:24 作者：pandashen

這篇文章主要介紹了NodeJS服務(wù)器實現(xiàn)gzip壓縮的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

本文介紹了NodeJS服務(wù)器實現(xiàn)gzip壓縮，分享給大家，具體如下：

在瀏覽器向服務(wù)器請求靜態(tài)資源時，服務(wù)器為了減小在網(wǎng)絡(luò)傳輸過程中消耗的流量和時間，都是將靜態(tài)資源經(jīng)過壓縮后返回給服務(wù)器的，實現(xiàn)壓縮的算法有 deflate 和 gzip 等，最常用的是 gzip 壓縮。

gzip 簡介

在瀏覽器和服務(wù)器之間通過 gzip 壓縮流實現(xiàn)傳輸?shù)倪^程可以用下圖表示。

當(dāng)瀏覽器向服務(wù)器請求靜態(tài)資源，服務(wù)器會將靜態(tài)資源經(jīng)過處理轉(zhuǎn)換為壓縮流，大大減小文件體積，然后將壓縮流返回給瀏覽器，瀏覽器通過壓縮的類型重新將壓縮流解析成靜態(tài)文件。

zlib 模塊的使用

1、壓縮

在 NodeJS 中通過 zlib 模塊幫助我們實現(xiàn)不同類型的壓縮，其實壓縮的過程就是創(chuàng)建流的過程，創(chuàng)建的壓縮流是 Transform 類型（轉(zhuǎn)化流），讀取文件的內(nèi)容經(jīng)過轉(zhuǎn)化流創(chuàng)建一個新類型的文件。

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`;

  // 創(chuàng)建轉(zhuǎn)化流
  let gzip = zlib.createGzip();

  // 創(chuàng)建可讀流
  let rs = fs.createReadStream(sourcePath);

  // 創(chuàng)建可寫流
  let ws = fs.createWriteStream(gzipPath);

  // 實現(xiàn)轉(zhuǎn)化
  rs.pipe(gzip).pipe(ws);
}

gzip("index.html");

執(zhí)行上面代碼查看根目路是否出現(xiàn) index.gz 壓縮包。

2、解壓

壓縮的過程是可逆的，可以壓縮就可以解壓，無論是在瀏覽器還是在服務(wù)器，我們下面實現(xiàn)解壓的方法。

const zlib = require("zlib");
const fs = require("fs");
const path = require("path");

// 解壓
function gunzip(source) {
  // 處理輸入和輸出的文件路徑
  let sourcePath = path.join(__dirname, source);
  let filePath = path.join(__dirname, path.basename(source, ".gz"));

  // 創(chuàng)建轉(zhuǎn)化流
  let unzip = zlib.createGunzip();

  // 創(chuàng)建可讀流
  let rs = createReadStream(sourcePath);

  // 創(chuàng)建可寫流
  let ws = createWriteStream(filePath);

  // 實現(xiàn)轉(zhuǎn)化
  rs.pipe(unzip).pipe(ws);
}

gunzip("index.html.gz");

刪除原來 index.html，執(zhí)行解壓代碼，查看文件根目錄是否生成 index.html。

服務(wù)器的實現(xiàn)

在瀏覽器與服務(wù)器的交互中，瀏覽器其實會通過請求頭 Accept-Encoding 告訴服務(wù)器當(dāng)前支持解壓的壓縮格式，值為 gzip, deflate, br，多個壓縮格式用 , 隔開，服務(wù)器在接收到瀏覽器請求后，會按照請求頭的格式壓縮資源，將壓縮后的資源返回，并通過響應(yīng)頭 Content-Encoding 告訴瀏覽器當(dāng)前服務(wù)器壓縮的格式。

// 引入依賴
const http = require("http");
const url = require("url");
const path = require("path");
const fs = require("fs");
const zlib = require("zlib");

// 創(chuàng)建服務(wù)器
const server = http.createServer((req, res) => {
  // 處理 pathname，"/" 時默認(rèn)讀取 "/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"];

    // 創(chuàng)建可讀流
    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);
    }

    // 將壓縮流返回并設(shè)置響應(yīng)頭
    res.setHeader("Content-Encoding", compressType);
    rs.pipe(compress).pipe(res);
  });
});

server.listen(3000, () => {
  console.log("server start 3000");
});

在上面服務(wù)器中如果不通過響應(yīng)頭通知瀏覽器當(dāng)前資源的壓縮格式，瀏覽器會不知道該如何解壓，默認(rèn)會當(dāng)成文件下載，如 Chrome，所以在返回壓縮流時必須通過 Content-Encoding 響應(yīng)頭通知瀏覽器當(dāng)前的壓縮格式。

測試服務(wù)器壓縮

我們在文件根目錄創(chuàng)建一個 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>

啟動服務(wù)器 server.js，然后通過瀏覽器訪問 localhost:3000，查看頁面能否正確返回，并查看開發(fā)者工具 Network 中的響應(yīng)頭 Content-Encoding 的值是否正確。

總結(jié)

服務(wù)器壓縮其實是客戶端與服務(wù)器在網(wǎng)絡(luò)傳輸時的一種優(yōu)化手段，可以大大減小流量的消耗和響應(yīng)時間，而 gzip 只是目前最常用的一種壓縮格式，即壓縮算法。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: