Định cấu hình hoạt động lưu vào bộ nhớ đệm của HTTP

Jeff Posnick

Lớp học lập trình này cho bạn biết cách thay đổi tiêu đề lưu vào bộ nhớ đệm HTTP do máy chủ web dựa trên Node.js trả về, chạy khung phân phát Express. Bài viết này cũng sẽ hướng dẫn 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ẽ sử dụng trong dự án mẫu:

• server.js chứa mã Node.js phân phát nội dung của ứng dụng web. Thư viện này sử dụng Express để xử lý các yêu cầu và phản hồi HTTP. 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, tài liệu serve-static sẽ rất hữu ích.
• public/index.html là HTML của ứng dụng web. Giống như hầu hết các tệp HTML, tệp này không chứa bất kỳ thông tin phiên bản nào trong URL.
• public/app.15261a07.js và public/style.391484cf.css là các thành phần JavaScript và CSS của ứng dụng web. Mỗi tệp này chứa một hàm băm trong URL, tương ứng với nội dung của tệp. index.html có trách nhiệm theo dõi URL phiên bản cụ thể 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 các yêu cầu về URL không chứa thông tin lập phiên bản, hãy nhớ thêm Cache-Control: no-cache vào thông báo phản hồi. Ngoài ra, bạn nên đặt một trong hai tiêu đề phản hồi bổ sung: Last-Modified hoặc ETag. index.html thuộc danh mục này. Bạn có thể chia quá trình này thành hai bước.

Trước tiên, các tiêu đề Last-Modified và ETag được kiểm soát bằng các tuỳ chọn cấu hình etag và lastModified. Cả hai tuỳ chọn này đều mặc định là true cho tất cả phản hồi HTTP, vì vậy, trong chế độ thiết lập hiện tại, bạn không cần chọn sử dụng để có được hành vi đó. Tuy nhiên, bạn có thể nêu rõ trong cấu hình của mình.

Thứ hai, bạn cần có thể thêm tiêu đề Cache-Control: no-cache, nhưng chỉ dành cho tài liệu HTML (index.html trong trường hợp này). Cách dễ nhất để đặt tiêu đề này theo điều kiện là viết một setHeaders function tuỳ chỉnh và trong đó, hãy kiểm tra xem yêu cầu sắp tới có phải là yêu cầu về tài liệu HTML hay không.

• Nhấp vào Remix to Edit (Trộn 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'));

• Hãy thực hiện các thay đổi như mô tả ở trên, bạn sẽ có được nội dung 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 đề lưu vào bộ nhớ đệm cho các URL có phiên bản

Khi phản hồi các yêu cầu về URL chứa "vân tay" hoặc thông tin phiên bản và nội dung không bao giờ thay đổi, hãy thêm Cache-Control: max-age=31536000 vào nội dung phản hồi. app.15261a07.js và style.391484cf.css thuộc danh mục này.

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 yêu cầu cụ thể có phải là cho một URL có phiên bản hay không. 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 liệu tài sản đang được yêu cầu có khớp với một mẫu cụ thể mà bạn biết là các hàm băm thuộc về mẫu đó hay không. Trong trường hợp dự án mẫu này, chuỗi này luôn có 8 ký tự trong tập hợp chữ số 0–9 và chữ cái viết thường a–f (tức là ký tự thập lục phân). Hàm băm luôn được phân tách bằng ký tự . ở hai bên.

Biểu thức chính quy khớp với các 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 setHeaders để 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 DevTools

Sau khi sửa đổi máy chủ tệp tĩnh, bạn có thể kiểm tra để đảm bảo rằng các tiêu đề phù hợp đang được đặt bằng cách xem trước ứng dụng trực tiếp khi mở bảng điều khiển Mạng của DevTools.

• Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Toàn màn hình .

• Tuỳ chỉnh các cột hiển thị trong bảng điều khiển Mạng để đưa vào thông tin phù hợp nhất bằng cách nhấp chuột phải vào tiêu đề cột:

Ở đây, các cột cần chú ý là Name, Status, Cache-Control, ETag và Last-Modified.

• Khi DevTools mở ra bảng điều khiển Mạng, hãy làm mới trang.

Sau khi trang tải xong, bạn sẽ thấy các mục 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 đã chuyển đến. Lớp này được phân phát đúng cách bằng Cache-Control: no-cache. Trạng thái phản hồi HTTP cho yêu cầu đó là 304. Điều này có nghĩa là trình duyệt biết không nên sử dụng HTML đã lưu vào bộ nhớ đệm ngay lập tức, mà thay vào đó, trình duyệt đã gửi một yêu cầu HTTP đến máy chủ web, sử dụng thông tin Last-Modified và ETag để xem liệu có nội dung cập nhật nào cho HTML mà trình duyệt đã có trong bộ nhớ đệm hay không. Phản hồi HTTP 304 cho biết không có HTML đã cập nhật.

Hai hàng tiếp theo là dành cho các thành phần JavaScript và CSS có phiên bản. Bạn sẽ thấy các tệp này được phân phát bằng Cache-Control: max-age=31536000 và trạng thái HTTP của mỗi tệp là 200. Do cấu hình được sử dụng, không có yêu cầu thực tế nào được gửi đến máy chủ Node.js và khi nhấp vào mục này, bạn sẽ thấy thêm thông tin chi tiết, bao gồm cả phản hồi "(từ bộ nhớ đệm trên ổ đĩa)".

Giá trị thực tế cho cột ETag và Last-Modified không quan trọng lắm. Điều quan trọng là bạn phải xác nhận rằng các giá trị này đang được đặt.

Tóm tắt

Sau khi thực hiện các bước trong lớp học lập trình này, bạn đã nắm rõ 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 Express để sử dụng bộ nhớ đệm HTTP một cách tối ưu. Bạn cũng có các bước cần thiết để xác nhận rằng 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.