Lớp học lập trình này cho bạn biết cách thay đổi tiêu đề bộ nhớ đệm HTTP do Máy chủ web dựa trên Node.js, đang chạy phân phát Express khung. Bài viết cũng sẽ cho biết cách xác nhận rằng hành vi lưu vào bộ nhớ đệm mà bạn mong đợi thực sự đang được áp dụng, bằng cách sử dụng bảng điều khiển Mạng trong Công cụ cho nhà phát triển của Chrome.
Làm quen với dự án mẫu
Dưới đây là các tệp chính mà bạn sẽ làm việc trong dự án mẫu:
server.jschứa mã Node.js phân phát mã của ứng dụng web nội dung. Sử dụng Express để xử lý các yêu cầu HTTP và phản hồi. Cụ thể,express.static()được dùng để phân phát tất cả các tệp cục bộ trong thư mục công khai, vì vậy,serve-statictài liệu sẽ có ích.public/index.htmllà HTML của ứng dụng web. Giống như hầu hết các tệp HTML, trình duyệt này không chứa bất kỳ thông tin về phiên bản nào trong URL của nó.public/app.15261a07.jsvàpublic/style.391484cf.csslà JavaScript của ứng dụng web và nội dung CSS. Mỗi tệp này đều chứa một hàm băm trong URL của chúng, tương ứng với nội dung của chúng.index.htmlchịu trách nhiệm duy trì theo dõi URL cụ thể được tạo phiên bản cần tải.
Định cấu hình tiêu đề lưu vào bộ nhớ đệm cho HTML
Khi phản hồi yêu cầu về URL không chứa thông tin về phiên bản, hãy
hãy thêm Cache-Control: no-cache vào tin nhắn trả lời. Cùng với
khuyên bạn nên đặt một trong hai tiêu đề phản hồi bổ sung:
Last-Modified
hoặc ETag. Chiến lược phát hành đĩa đơn
index.html thuộc danh mục này. Bạn có thể chia quy trình này thành hai bước.
Trước tiên, các tiêu đề Last-Modified và ETag do
etag
và
lastModified
các tùy chọn cấu hình. Trên thực tế, cả hai tuỳ chọn này đều là true cho tất cả
Phản hồi HTTP, vì vậy, trong chế độ thiết lập hiện tại này, bạn không phải chọn sử dụng tính năng đó
hành vi. Tuy nhiên, bạn có thể thể hiện rõ ràng trong cấu hình của mình.
Thứ hai, bạn cần thêm được tiêu đề Cache-Control: no-cache, nhưng
chỉ đối với tài liệu HTML (trong trường hợp này là index.html). Cách dễ nhất để
đặt tiêu đề này theo điều kiện để viết một tiêu đề tuỳ chỉnh
setHeaders function!
và trong đó, kiểm tra xem liệu yêu cầu đến có phải dành cho tài liệu HTML không.
- Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.
Cấu hình phân phát tĩnh trong server.js bắt đầu như sau:
app.use(express.static('public'));
- Thực hiện các thay đổi được mô tả ở trên và bạn sẽ nhận được kết quả sẽ có dạng như sau:
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');
}
},
}));
Định cấu hình tiêu đề bộ nhớ đệm cho các URL được tạo phiên bản
Khi phản hồi yêu cầu về URL có chứa
"vân tay" hoặc
thông tin về phiên bản và nội dung của những thông tin này không bao giờ thay đổi, hãy thêm
Cache-Control: max-age=31536000 trong câu trả lời của bạn. app.15261a07.js và
style.391484cf.css thuộc danh mục này.
Xây dựng dựa trên
setHeaders function
được sử dụng ở bước cuối cùng, bạn có thể thêm logic bổ sung để kiểm tra xem một
là dành cho URL đã được lập phiên bản và nếu có, hãy thêm tiêu đề Cache-Control:
max-age=31536000.
Cách hiệu quả nhất để thực hiện việc này là sử dụng
biểu thức chính quy
để xem nội dung đang được yêu cầu có khớp với mẫu cụ thể mà bạn
biết các hàm băm chứa thông tin đó. Trong dự án mẫu này, số liệu luôn là 8
các ký tự từ tập hợp các chữ số 0–9 và chữ cái viết thường a–f (ví dụ:
thập lục phân). Hàm băm
luôn được phân tách bằng ký tự . ở hai bên.
Một biểu thức chính quy
phù hợp với những quy tắc chung
có thể được biểu thị dưới dạng new RegExp('\\.[0-9a-f]{8}\\.').
- Sửa đổi hàm
setHeaderssao cho có dạng như sau:
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');
}
},
}));
Xác nhận hành vi mới bằng cách sử dụng Công cụ cho nhà phát triển
Với những sửa đổi đối với máy chủ tệp tĩnh tại chỗ, bạn có thể kiểm tra để thực hiện đảm bảo bạn đang đặt tiêu đề phù hợp bằng cách xem trước ứng dụng đang hoạt động, đồng thời mở bảng điều khiển Mạng Công cụ cho nhà phát triển.
Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn Toàn màn hình
.Tuỳ chỉnh các cột được hiển thị trong bảng điều khiển Mạng để bao gồm thông tin có liên quan nhất, bằng cách nhấp chuột phải vào tiêu đề cột:
Tại đây, các cột cần chú ý là Name, Status, Cache-Control,
ETag và Last-Modified.
- Khi Công cụ cho nhà phát triển đang mở bảng điều khiển Mạng, hãy làm mới trang.
Sau khi trang đã tải, bạn sẽ thấy các mục nhập trong bảng điều khiển Mạng có dạng như sau:
Hàng đầu tiên là dành cho tài liệu HTML mà bạn đã điều hướng đến. Điều này đúng
được phân phát bằng Cache-Control: no-cache. Trạng thái phản hồi HTTP cho yêu cầu đó
là 304. Chiến dịch này
có nghĩa là trình duyệt không biết sử dụng HTML đã lưu vào bộ nhớ đệm ngay lập tức, mà thay vào đó
đã thực hiện một yêu cầu HTTP đến máy chủ web bằng cách sử dụng Last-Modified và ETag
để xem liệu có bất kỳ nội dung cập nhật nào đối với HTML mà HTML đó đã có hay không
bộ nhớ đệm của nó. Phản hồi HTTP 304 cho biết không có HTML được cập nhật.
Hai hàng tiếp theo là dành cho các tài sản JavaScript và CSS đã được tạo phiên bản. Bạn nên
thấy chúng được phân phát với Cache-Control: max-age=31536000 và trạng thái HTTP cho
mỗi nhãn là 200.
Do cấu hình được sử dụng, nên không có yêu cầu thực sự nào được gửi đến
máy chủ Node.js và nhấp vào mục nhập sẽ hiển thị cho bạn thông tin chi tiết bổ sung,
bao gồm cả phản hồi đến "(từ bộ nhớ đệm trên đĩa)".
Giá trị thực tế cho các cột ETag và Last-Modified không quan trọng nhiều. Chiến lược phát hành đĩa đơn điều quan trọng là xác nhận rằng chúng đang được thiết lập.
Tổng hợp nội dung
Sau khi đã thực hiện các bước trong lớp học lập trình này, giờ đây bạn đã quen với cách định cấu hình tiêu đề phản hồi HTTP trong máy chủ web dựa trên Node.js bằng cách sử dụng Express, để sử dụng tối ưu bộ nhớ đệm HTTP. Bạn cũng có các bước cần xác nhận hành vi lưu vào bộ nhớ đệm dự kiến đang được sử dụng, thông qua bảng điều khiển Mạng trong Công cụ cho nhà phát triển của Chrome.