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

Jeff Posnick

Lưu ý: Lớp học lập trình này sử dụng Chrome DevTools. Tải Chrome xuống nếu bạn chưa có.

Lớp học lập trình này hướng dẫn bạn 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ưu ý: Mặc dù các hướng dẫn cụ thể được điều chỉnh cho phù hợp với Express, nhưng các nguyên tắc chung về việc chọn đúng tiêu đề lưu vào bộ nhớ đệm sẽ áp dụng cho mọi môi trường máy chủ web.

Làm quen với dự án mẫu

Sau đây là các tệp chính mà bạn sẽ xử lý 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. Ứng dụng này 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, 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 chịu trách nhiệm theo dõi URL cụ thể nào cần tải.

Lưu ý: Trong "thế giới thực", quy trình chỉ định hàm băm và cập nhật tệp HTML để thêm tệp tham chiếu đến URL có phiên bản mới nhất sẽ do một công cụ xây dựng xử lý, chẳng hạn như webpack. Trong phạm vi của lớp học lập trình này, giả sử rằng các hàm băm được tạo trong một quy trình xây dựng đã diễn ra.

Đị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. Cùng với đó, 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 việc 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 lựa 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 đó. Nhưng bạn vẫ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 vào tiêu đề Cache-Control: no-cache, nhưng chỉ 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 gửi đến có phải là cho tài liệu HTML hay không.

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ả 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 đã lập phiên bản

Khi phản hồi các yêu cầu về URL có chứa "vân tay số" hoặc thông tin về 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 phản hồi của bạn. app.15261a07.js và style.391484cf.css thuộc danh mục này.

Dựa trên setHeaders function được 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 nhất định có dành cho URL được tạo phiên bản hay không 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 liệu thành phần được yêu cầu có khớp với một mẫu cụ thể mà bạn biết hàm băm sẽ rơi vào hay không. Trong trường hợp của dự án mẫu này, mã nhận dạng luôn là 8 ký tự trong tập hợp các chữ số từ 0 đến 9 và các chữ cái viết thường từ a đến f (tức là các 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}\\.').

Lưu ý: Bạn nên đưa ra các quy tắc càng cụ thể càng tốt để tránh gặp phải vấn đề trong tương lai. Một kết quả khớp chung chung hơn, chẳng hạn như kiểm tra đuôi tệp .js hoặc .css, có thể gây ra vấn đề sau này nếu bạn thêm các thành phần JavaScript hoặc CSS bổ sung, không có phiên bản vào dự án của mình.

• Sửa đổi hàm setHeaders để hàm này 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ông cụ cho nhà phát triển

Lưu ý: Bạn có thể làm quen với bảng điều khiển Mạng trong Công cụ của Chrome cho nhà phát triển bằng cách thực hiện lớp học lập trình này.

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 đang hoạt động khi bảng điều khiển Mạng của Công cụ cho nhà phát triển đang mở.

• 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:

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 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à tài liệu HTML mà bạn đã chuyển đến. Món này được phục vụ đúng cách với 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 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ó bản 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 nào được cập nhật.

Lưu ý: Cache-Control: no-cache không có nghĩa là "không bao giờ sử dụng bản sao lưu trong bộ nhớ đệm". Điều này có nghĩa là "luôn kiểm tra với máy chủ trước và sử dụng bản sao được lưu vào bộ nhớ đệm nếu có phản hồi HTTP 304".

Hai hàng tiếp theo là dành cho các thành phần JavaScript và CSS được tạo phiên bản. Bạn sẽ thấy các trang này được phân phát bằng Cache-Control: max-age=31536000 và mã trạng thái HTTP của mỗi trang 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à việc nhấp vào mục nhập sẽ hiển thị cho bạn thêm thông tin chi tiết, bao gồm cả việc phản hồi đến "(từ bộ nhớ đệm của ổ đĩa)".

Giá trị thực tế cho các 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 hiệ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 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.