express.jsでレスポンスをgzip化するのであれば、compression
を利用するのが(ドキュメントにも書いてあるので)一般的かと思います。
以下がサンプルコードです。http://localhost:3000
にアクセスしてDevToolsで確認してみてください。
server.js
などのように保存して、node server.js
として実行してみてください。レスポンスに乗せるContentがあまりにも小さい場合、gzip化されないので気をつけてください。サンプルコードではわざとfor-loopを回しています。
const expres = require("express");
const compression = require("compression");
const app = expres();
app.use(compression({
threshold: 0,
}));
const domText = [];
for (let i = 0; i < 10; i++) {
domText.push(`<li>Random Number ${Math.random()}</li>`);
}
const htmlText = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello world page</title>
</head>
<body>
<h1>Hello world from express.js</h1>
<ul>
${domText.join("\n")}
</ul>
</body>
</html>
`;
app.get("/", (req, res) => {
res.send(htmlText);
res.end();
});
app.listen(3000, () => {
console.log("Start server: http://localhost:3000");
});

興味ある人向け
質問の趣旨から外れるかもしれませんが、ライブラリを使わずに記述するパターンは以下のようになります。
const http = require("http");
const zlib = require("zlib");
const availableGzip = (header) => {
return typeof header === "string" && Boolean(header && /gzip/i.test(header));
};
const htmlText = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello world page</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
`;
const rootRouter = (req, res) => {
const message = htmlText;
if (availableGzip(req.headers["accept-encoding"])) {
zlib.gzip(Buffer.from(message), (err, data) => {
res.setHeader("Content-Encoding", "gzip");
res.setHeader("Content-Length", data.byteLength);
res.setHeader("Content-Type", "text/html; charset=UTF-8");
res.writeHead(200);
res.end(data);
});
} else {
res.setHeader("Content-Length", message.length);
res.writeHead(200);
res.end(message);
}
};
const notFoundRouter = (req, res) => {
res.write("Not found page");
res.end();
};
const requestListener = (req, res) => {
switch (req.url) {
case "/":
rootRouter(req, res);
break;
default:
notFoundRouter(req, res);
break;
}
};
const server = http.createServer(requestListener);
server.listen(3000);
console.log("Server start: http://localhost:3000");
参考: テキストリソースを圧縮してウェブサイトのパフォーマンスを改善するにもう少し詳しい情報が乗っています。
Content-Type
をtext/html
に設定するとブラウザ側で自動的に復元してしまうのではないでしょうか。Content-Type
をapplication/x-gzip
に変更してみてください。Content-Type
をapplication/x-gzip
に変更して試しましたが、動作は変わりませんでした。