Cache busting cho JavaScript và CSS: đặt phiên bản, phát hành an toàn

Tách tài liệu HTML khỏi tài nguyên có phiên bản

Xem HTML như manifest nhỏ của một bản phát hành. A trỏ tới app.4c21.js và site.19ab.css. B đổi ứng dụng, dùng app.9d80.js; nếu CSS không đổi bytes thì giữ site.19ab.css. Hash ở đây chỉ là tên minh họa, không phải kết quả tính của tệp thật.

Cách này tái dùng tài nguyên không đổi và cấp danh tính cache mới cho phần đã đổi. Cache HTML một năm có thể trì hoãn phát hiện phiên bản mới: ai còn nhận tài liệu cũ vẫn yêu cầu URL tài nguyên cũ. Mỗi loại tài nguyên cần chính sách phù hợp.

Chọn chỉ thị cache theo hợp đồng đó

Tệp công khai có phiên bản theo nội dung và không bao giờ đổi tại URL đó có thể dùng max-age dài cùng immutable. Với HTML, no-cache cho phép lưu nhưng yêu cầu xác thực trước tái dùng; no-store yêu cầu không lưu. Không sao chép một header cho toàn site.

Header bên dưới minh họa chiến lược, không phải cấu hình phổ quát. Xác nhận hosting thật sự gửi gì và cache biên được cấu hình ra sao. Dòng header trong tệp cục bộ không chứng minh trình duyệt công khai và CDN nhận cùng chính sách; hãy kiểm tra phản hồi đã triển khai.

Versioned public asset: /assets/app.9d80.js
Cache-Control: public, max-age=31536000, immutable

HTML document: /index.html
Cache-Control: no-cache

The URL /assets/app.9d80.js must continue to serve the same bytes.

Phiên bản query chỉ hiệu quả nếu nằm trong cache key

Hai URL /app.js?v=release-b và /app.js?v=release-a có thể là danh tính cache khác nhau. Kiểm tra mọi tầng liên quan có dùng tham số query trong khóa hay không. Quy tắc CDN bỏ query có thể cho cả hai cùng một đối tượng, làm mất tác dụng phiên bản.

Không tạo giá trị ngẫu nhiên ở mỗi lần tải trang;URL duy nhất cho từng khách phá khả năng tái dùng. Hash hoặc phiên bản ổn định chỉ đổi cùng tài nguyên. Fragment như /app.js#release-b không được gửi trong yêu cầu HTTP, nên không thích hợp cho mục đích này.

Tìm tầng vẫn phục vụ bytes cũ

So phản hồi HTML, URL được tham chiếu và bytes tài nguyên ở khách bị ảnh hưởng. Tài liệu trỏ hash cũ thì xem độ mới HTML. Hash mới trả nội dung cũ thì xem triển khai, cache key và origin. Mạng đúng nhưng hành vi cũ thì kiểm tra trang đang chạy hoặc service worker.

Purge CDN không xóa phản hồi còn mới đã nằm trong mọi trình duyệt. Hard reload cũng chỉ chẩn đoán cục bộ, không sửa bản phát hành cho tất cả. Ghi tầng cache đã bỏ qua mỗi lần để tái lập kết quả; một lần thành công qua đường khác chưa chứng minh nguyên nhân được chữa.

• Ghi URL tài liệu cuối và script hoặc stylesheet nó tham chiếu.
• Kiểm tra status, Content-Type, Cache-Control, ETag và cache-status có sẵn.
• Xác nhận phiên bản trả đúng bytes, không phải trang HTML dự phòng.
• Xem cache của service worker riêng nếu ứng dụng cài nó.
• Thử cả lượt truy cập sạch và trang để mở qua lần triển khai.

Giữ trang cũ chạy khi triển khai và quay lui

Tải tài nguyên mới trước HTML trỏ chúng, hoặc dùng triển khai chuyển toàn bộ bản phát hành cùng lúc. Giữ bộ cũ đủ lâu cho HTML cache và tab đang mở. Trang cũ có thể tải module bổ sung nhiều giờ sau lượt vào đầu tiên.

Phát hành B với cả A và B, xác minh B và giữ cách đưa HTML về A. Xóa app.4c21.js ngay có thể phá khách đang giữ tài liệu A. Dùng cùng tên đó cho bytes mới cũng phá hợp đồng nội dung và khiến quay lui khó dự đoán.

Đo tái dùng sau khi đã đúng

Kiểm tra nhỏ: lần đầu tải tài nguyên, lần hai tái dùng phần đủ điều kiện, bản mới chỉ tải phiên bản đổi. Xem truyền mạng thật kể cả yêu cầu xác thực; các kiểu phản hồi cache không có cùng chi phí và không nên coi như nhau.

Công cụ tiết kiệm cache ước lượng giảm request tới origin từ hit-rate bạn giả định. Công cụ truyền dữ liệu tính bytes từ số request và kích thước đã nêu. Chúng không thay việc đo header triển khai và hit-rate thật; dùng để so kế hoạch rõ ràng sau khi bản phát hành hoạt động đúng.