本程式碼研究室說明如何變更 Node.js 型網路伺服器傳回的 HTTP 快取標頭,並執行 Express 服務架構。文中也會顯示使用 Chrome 開發人員工具的網路面板,確認系統是否確實套用了預期的快取行為。
熟悉範例專案
以下是您在範例專案中會使用的主要檔案:
server.js
包含可提供網頁應用程式內容的 Node.js 程式碼。並會使用 Express 處理 HTTP 要求和回應。具體來說,express.static()
是用來提供公開目錄中的所有本機檔案,因此serve-static
說明文件可派上用場。public/index.html
是網頁應用程式的 HTML。與大多數 HTML 檔案一樣,這個檔案不包含任何版本資訊。public/app.15261a07.js
和public/style.391484cf.css
是網頁應用程式的 JavaScript 和 CSS 素材資源。這些檔案網址的每個網址都包含雜湊,對應其內容。index.html
負責追蹤要載入的特定版本網址。
設定 HTML 的快取標頭
如要回應不含版本管理資訊的網址要求,請務必在回應訊息中加入 Cache-Control: no-cache
。除此之外,建議您另外設定以下兩個回應標頭之一:Last-Modified
或 ETag
。index.html
屬於這個類別。您可將此分為兩個步驟。
首先,Last-Modified
和 ETag
標頭是由 etag
和 lastModified
設定選項控管。這兩個選項實際上在所有 HTTP 回應中都預設為 true
,因此在目前的設定中,您無須選擇取得該行為。但您仍可在設定中明確指定。
接著,您必須能加入 Cache-Control: no-cache
標頭,但僅適用於 HTML 文件 (在本例中為 index.html
)。如要有條件設定這個標頭,最簡單的方法是編寫自訂 setHeaders function
,然後在其中檢查傳入要求是否針對 HTML 文件。
- 按一下「Remix to Edit」,讓專案可供編輯。
server.js
中的靜態提供設定一開始如下:
app.use(express.static('public'));
- 進行上述變更,結果看起來應該會像這樣:
app.use(express.static('public', {
etag: true, // Just being explicit about the default.
lastModified: true, // Just being explicit about the default.
setHeaders: (res, path) => {
if (path.endsWith('.html')) {
// All of the project's HTML files end in .html
res.setHeader('Cache-Control', 'no-cache');
}
},
}));
為版本化網址設定快取標頭
如要回應含有「指紋」或版本資訊,且其內容永遠不會改變的要求,請在回應中加入 Cache-Control: max-age=31536000
。app.15261a07.js
和 style.391484cf.css
屬於這個類別。
以最後一個步驟中使用的 setHeaders function
為基礎,新增額外的邏輯來檢查特定要求是否屬於版本化網址,如果是的話,請新增 Cache-Control:
max-age=31536000
標頭。
要做到這點,最可靠的方法是使用規則運算式,查看要求的資產是否與您知道雜湊值的特定模式相符。在這個範例專案的情況下,必須是第 0 至 9 位數的八個字元,以及小寫英文字母 a-f (即十六進位字元)。雜湊值一律會以 .
字元分隔。
符合這些一般規則的規則運算式可用 new RegExp('\\.[0-9a-f]{8}\\.')
表示。
- 修改
setHeaders
函式,如下所示:
app.use(express.static('public', {
etag: true, // Just being explicit about the default.
lastModified: true, // Just being explicit about the default.
setHeaders: (res, path) => {
const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');
if (path.endsWith('.html')) {
// All of the project's HTML files end in .html
res.setHeader('Cache-Control', 'no-cache');
} else if (hashRegExp.test(path)) {
// If the RegExp matched, then we have a versioned URL.
res.setHeader('Cache-Control', 'max-age=31536000');
}
},
}));
使用開發人員工具確認新行為
修改靜態檔案伺服器後,您可以在「開發人員工具 Network」面板開啟後預覽執行中的應用程式,藉此確認設定的標頭正確無誤。
如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
自訂「網路」面板中顯示的資料欄,使其包含最相關的資訊,只要在欄標題中按一下滑鼠右鍵即可:
此處應留意的資料欄為 Name
、Status
、Cache-Control
、ETag
和 Last-Modified
。
- 開啟開發人員工具到「Network」面板後,重新整理頁面。
頁面載入後,您應該會在「網路」面板中看到類似以下的內容:
第一列代表您要瀏覽的 HTML 文件。這會透過 Cache-Control: no-cache
正確提供。該要求的 HTTP 回應狀態為 304
。這表示瀏覽器知道不會立即使用快取 HTML,而是使用 Last-Modified
和 ETag
資訊對網路伺服器發出 HTTP 要求,查看快取中是否有 HTML 更新。HTTP 304 回應表示 HTML 未更新。
接下來兩列代表版本化 JavaScript 和 CSS 素材資源。您應該會看到與 Cache-Control: max-age=31536000
一同提供,而每個項目的 HTTP 狀態則為 200
。依據使用的設定,系統不會實際向 Node.js 伺服器發出要求,按一下項目會顯示其他詳細資料,包括回應為「(來自磁碟快取)」。
ETag 與 Last-Modified 資料欄的實際值並不重要。重要的是,您應確認設定這些參數。
總結內容
完成本程式碼研究室的步驟後,您現在熟悉如何使用 Express 在以 Node.js 為基礎的網路伺服器中設定 HTTP 回應標頭,以達到最佳的 HTTP 快取使用情形。您也可以透過 Chrome 開發人員工具中的網路面板,確認正在使用預期的快取行為。