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

Jeff Posnick

Để theo dõi lớp học lập trình này, hãy mở sự cố này trong thẻ thứ hai.

Lưu ý: Lớp học lập trình này sử dụng Công cụ của Chrome cho nhà phát triển. Tải Chrome xuống nếu bạn chưa có.

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 trả về, chạy khung phân phát Express. Hình này 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 đang thực sự đượ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ù 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 đề 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

Dưới đâ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. API 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ẽ 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 đều 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 đã lập phiên bản 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 nội dung tham chiếu đến URL có phiên bản mới nhất sẽ do công cụ xây dựng, chẳng hạn như webpack xử lý. Nhằm phục vụ mục đích của lớp học lập trình này, hãy giả định rằng các hàm băm được tạo trong 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 của chúng tôi

Khi phản hồi các yêu cầu về URL không chứa thông tin phiên bản, hãy nhớ thêm Cache-Control: no-cache vào thông báo phản hồi của mình. Ngoài ra, bạn nên đặt thêm 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 nhỏ 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. Thực ra, cả hai tuỳ chọn này đều mặc định là true cho mọi phản hồi HTTP. Vì vậy, trong cách thiết lập hiện tại này, bạn không phải chọn tham gia để nhận đượ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ó khả năng thêm tiêu đề Cache-Control: no-cache, nhưng chỉ đối với tài liệu HTML (index.html, trong trường hợp này). Cách dễ nhất để đặt tiêu đề này một cách có điều kiện là viết một setHeaders function tuỳ chỉnh. Trong đó, hãy kiểm tra xem yêu cầu đến có phải là dành cho một tài liệu HTML hay không.

• Nhấp vào Remix để chỉnh sửa (Remix) để 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ẽ kết thúc với nội dung thay đổi 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 lập 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 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 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ó dành cho một 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 thành phần đang được yêu cầu có khớp với một mẫu cụ thể mà bạn biết là hàm băm hay không. Trong trường hợp của dự án mẫu này, luôn có 8 ký tự từ tập hợp chữ số 0–9 và các 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.

Một biểu thức chính quy phù hợ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 ý: Khi đưa ra các quy tắc này, bạn nên càng cụ thể càng tốt để tránh gặp phải các vấn đề trong tương lai. Kết quả trùng 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ặp vấn đề nếu bạn thêm các thành phần JavaScript hoặc CSS bổ sung không được tạo 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ụ cho nhà phát triển của Chrome bằng cách làm theo 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 thiết lập bằng cách xem trước ứng dụng đang hoạt động khi bảng điều khiển Mạng cho nhà phát triển đang mở.

• Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (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 để thêm 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.

• Sau khi Công cụ cho nhà phát triển mở 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 đã điều hướng đến. Việc này được phân phát đú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 nên sử dụng HTML đã lưu vào bộ nhớ đệm ngay lập tức mà gửi một yêu cầu HTTP tới máy chủ web, sử dụng thông tin Last-Modified và ETag để xem có bản cập nhật nào đối với 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 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 vào bộ nhớ đệm". Điều này có nghĩa là "luôn kiểm tra với máy chủ trước tiên và sử dụng bản sao đã 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 đã tạo phiên bản. Bạn sẽ thấy các URL này được phân phát cùng với Cache-Control: max-age=31536000 và trạng thái HTTP cho mỗi URL là 200. Do cấu hình được sử dụng nên 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ông tin chi tiết bổ sung, bao gồm cả phản hồi đến từ "(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. Điều quan trọng là xác nhận rằng các giá trị này đang được đặt.

Tổng hợp mọi thứ

Sau khi hoàn thành 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 các 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 bộ nhớ đệm HTTP một cách tối ưu. Bạn cũng cần thực hiện 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.