Header cache trong Caddyfile

Để website tải nhanh hơn, chúng ta áp dụng cache, tức là lưu sẵn các nội dung ít khi thay đổi vào máy người dùng, để từ lần truy cập thứ hai của họ thì dữ liệu đã có sẵn trên trình duyệt rồi (ví dụ ảnh, css, js) và các thành phần đó sẽ tải gần như tức khắc.

    # --- CACHE CODE (CSS/JS) ---
    # Khong dung immutable de tranh loi khi update code
    @code_assets {
        file
        path *.css *.js
    }
    header @code_assets Cache-Control "public, max-age=604800"

    # --- CACHE MEDIA (ANH/FONT) ---
    # Dung immutable vi file anh it khi sua noi dung ma giu nguyen ten
    @media_assets {
        file
        path *.ico *.gif *.jpg *.jpeg *.png *.svg *.woff *.woff2 *.webp
    }
    header @media_assets Cache-Control "public, max-age=31536000, immutable"

–

path *.css *.js: chỉ đến bất cứ đường dẫn nào có định dạng là css hoặc js
max-age: thời gian sống tối đa của cache, quá hạn này bắt buộc phải tải lại.
public: không chỉ trình duyệt người dùng được phép cache, các đối tượng khác như CDN, Cloudflare cũng được cache nếu nó muốn. Ý là trang web trên thiết lập để cho phép [các file có định dạng cụ thể này] tất cả các bên có thể cache nếu cần. Nếu thuộc tính này là private, chỉ trình duyệt người dùng duyệt web được cache. Với các nội dung giống nhau giữa các người dùng và không phân biệt người dùng đăng nhập hay không đăng nhập (điển hình là blog, tin tức) thì để public là hợp lý.

–

Câu lệnh trên phân biệt hai thành phần cần cache, nhưng thời gian cache có chênh lệch khác nhau.

CSS/JS chỉ được cache một tuần (604800 là số giây tương đương một tuần).
Ảnh và font thì được cache tới tận một năm.

Lý do cho chuyện này là ảnh, font hiếm khi cập nhật mà giữ nguyên tên. CSS và JS thì khác, nó có thể vẫn giữ nguyên tên khi cập nhật phiên bản mới (nhất là các lập trình viên không để ý tới vụ cache này), và nếu bạn hay cài cắm plugin, nghịch theme, thì cache quá lâu có thể gây hỏng bố cục web (website cần các chỉ thị CSS, JS mới để hiển thị chính xác, nhưng trình duyệt vẫn lỗi thông tin CSS, JS cũ ra phân tích).

Từ khóa thứ hai cần để ý là immutable. Cái này nghĩa là ngăn trình duyệt hỏi lại server về tính cập nhật của các thành phần cache có thuộc tính này. Giải thích: Mặc dù đã thiết lập thời gian cache, các trình duyệt vẫn phòng xa bằng cách hỏi lại server để biết xem file có đúng là vẫn chưa cập nhật gì không (do vậy vẫn lấy từ cache được chứ không cần tải mới). Thuộc tính immutable sẽ ngăn điều này. Dĩ nhiên nó chỉ áp dụng cho các thành phần có tính bất biến cao, ví dụ như ảnh. Đó cũng là lý do tôi không áp dụng nó cho CSS và JS.

Viết một bình luận Hủy