Node.js 中介軟體啟用gzip
啟用文字壓縮
基於文字的資源應該透過壓縮(gzip、deflate或brotli)來提供，以最小化總網路位元組。
lighthouse提示：
Enable text compression Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. [Learn more about text compression] FCP LCP
解決方案：
在 Node.js 中使用 Express 框架，可以透過 compression 中介軟體來啟用 Gzip 壓縮，以減少傳輸的資料量，從而提高 Web 應用的效能。以下是具體步驟：
1. 安裝 compression 中介軟體
首先，需要安裝 compression 中介軟體：
npm
npm install compression --save
yarn
yarn add compression -D
2. 配置 Express 使用 compression
在你的 Express 應用中引入並使用 compression 中介軟體：
const express = require('express');
const compression = require('compression');
const app = express();
// 啟用 Gzip 壓縮
// 核心點就這一句話
app.use(compression());
app.get('/', (req, res) => {
res.send('Hello, world!');
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
3. 啟用靜態資源的 Gzip 壓縮
如果你有靜態資原始檔（如 HTML、CSS、JS 檔案等），也可以使用 compression 來對這些檔案進行壓縮。可以透過 Express 內建的 express.static 中介軟體來處理靜態檔案，並結合 compression 進行壓縮。
const express = require('express');
const compression = require('compression');
const path = require('path');
const app = express();
// 啟用 Gzip 壓縮
app.use(compression());
// 提供靜態檔案服務
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
4. 測試 Gzip 壓縮
要驗證 Gzip 壓縮是否啟用，可以使用以下方法：
使用瀏覽器開發者工具
開啟瀏覽器的開發者工具（通常按
F12或Ctrl+Shift+I）。切換到 "Network" 面板。
載入你的應用程式。
選擇一個請求並檢視 "Headers" 選項卡，檢查 "Content-Encoding" 是否為
gzip。
使用命令列工具
你也可以使用 curl 命令來測試 Gzip 壓縮：
curl -H "Accept-Encoding: gzip" -I http://localhost:3000
如果啟用了 Gzip 壓縮，你應該在響應頭中看到 Content-Encoding: gzip。
總結
透過以上步驟，可以在 Node.js 中使用 Express 框架來啟用 Gzip 壓縮，從而提高 Web 應用的效能。關鍵步驟包括安裝 compression 中介軟體、配置 Express 使用 compression、並提供靜態檔案服務。透過瀏覽器開發者工具或命令列工具可以驗證 Gzip 壓縮是否啟用。
