快捷導(dǎo)航

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

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

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

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

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

gzip 簡(jiǎn)介

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

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

zlib 模塊的使用

1、壓縮

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

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

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

gzip("index.html");

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

2、解壓

壓縮的過(guò)程是可逆的，可以壓縮就可以解壓，無(wú)論是在瀏覽器還是在服務(wù)器，我們下面實(shí)現(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);

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

gunzip("index.html.gz");

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

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

在瀏覽器與服務(wù)器的交互中，瀏覽器其實(shí)會(huì)通過(guò)請(qǐng)求頭 Accept-Encoding 告訴服務(wù)器當(dāng)前支持解壓的壓縮格式，值為 gzip, deflate, br，多個(gè)壓縮格式用 , 隔開(kāi)，服務(wù)器在接收到瀏覽器請(qǐng)求后，會(huì)按照請(qǐng)求頭的格式壓縮資源，將壓縮后的資源返回，并通過(guò)響應(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，"/" 時(shí)默認(rèn)讀取 "/index.html"
  let { pathname } = url.parse(req.url, true);
  pathname = pathname !== "/" ? pathname : "/index.html";

  // 獲取讀取文件的絕對(duì)路徑
  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ù)器中如果不通過(guò)響應(yīng)頭通知瀏覽器當(dāng)前資源的壓縮格式，瀏覽器會(huì)不知道該如何解壓，默認(rèn)會(huì)當(dāng)成文件下載，如 Chrome，所以在返回壓縮流時(shí)必須通過(guò) Content-Encoding 響應(yīng)頭通知瀏覽器當(dāng)前的壓縮格式。

測(cè)試服務(wù)器壓縮

我們?cè)谖募夸泟?chuàng)建一個(gè) 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>

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

總結(jié)

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

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

您可能感興趣的文章: