Đính kèm một phiên bản chỉ ra rằng các phiên bản cũ hơn của các tập tin tĩnh được lưu trữ được cập nhật để không được sử dụng

Đoạn trước rất dài, vì vậy nếu bạn chỉ nhìn vào chương trình, hãy bỏ qua nó.

môi trường

Visual Studio

• Visual Studio 2019

ASP.NET Core

• 3.1 (Trang Razor, MVC)

Giới thiệu về các tệp trên trang web được lưu trong bộ nhớ

Khi bạn truy cập một trang Web, ngoài HTML, các tệp .js (Javascript) và tệp .css (biểu định kiểu) và tệp hình ảnh sẽ được tải xuống máy khách để xem và chạy. Tuy nhiên, một số tệp hình ảnh có thể lớn và có thể làm tăng chi phí cho mỗi lần tải xuống. Ngoài ra, đối với các tệp .js và .css, cùng một tệp thường được sử dụng trên các trang khác, vì vậy chúng không có ý nghĩa gì với mỗi lần tải xuống. Các tệp này có thể được lưu trữ tạm thời trong trình duyệt sau khi tải xuống. Điều này được gọi là bộ nhớ cache.

Ví dụ: nếu tệp được lưu trữ, HTML sẽ được tải xuống từ máy chủ web khi bạn truy cập cùng một trang. Đối với các tệp khác, nếu bộ nhớ cache có sẵn, hãy sử dụng các tệp được lưu trữ cục bộ để xem và chạy mà không cần tải xuống. Điều này làm giảm tải máy chủ và cho phép khách hàng nhanh chóng xem các trang mà không cần tiêu thụ băng thông truyền thông.

Vấn đề gây ra bởi bộ nhớ cache

Cho dù các tập tin trên máy chủ và các tập tin được lưu trữ là như nhau thường phụ thuộc vào đường dẫn tập tin được mô tả trong HTML. Nếu đường dẫn tệp là như nhau, các tập tin được lưu trữ thường được sử dụng. (Có thể có các điều kiện khác, nhưng đường dẫn tệp được xác định)

Dưới đây là một ví dụ về đường dẫn tập tin. Các tham số thuộc tính href và src được áp dụng.

<!-- スタイルシート (.css) -->
<link rel="stylesheet" href="/css/site.css" />

<!-- 画像ファイル -->
<img src="/image/sample.png" alt="サンプル画像" />

<!-- JavaScript (.js) -->
<script src="/js/site.js"></script>

Tuy nhiên, nếu hành vi này xảy ra, điều này có thể là một vấn đề.

Ví dụ: nếu người dùng có tệp JavaScript có phiên bản 1 khi truy cập lần đầu tiên, tệp JavaScript cho phiên bản 1 được lưu trong bộ nhớ cache. Các tập tin JavaScript cho phiên bản 2 sau đó được phát hành ở phía máy chủ. Nếu tệp JavaScript có cùng đường dẫn khi người dùng truy cập cùng một trang, bạn có thể sử dụng tệp Javascript phiên bản 1 được lưu trong bộ nhớ cache mà không cần tải xuống tệp JavaScript cho phiên bản máy chủ 2. Điều này có thể gây ra các nhà xuất bản vô tình thất bại.

Thời gian này, trong một trong những phản ứng của người dùng, "cố gắng để loại bỏ bộ nhớ cache", tôi nghĩ rằng thường thấy bởi vì nó có thể là nguyên nhân.

Giải pháp cho vấn đề bộ nhớ cache phía máy chủ

Như đã đề cập trước đó, việc sử dụng tệp được lưu trong bộ nhớ cache phụ thuộc rất nhiều vào đường dẫn tệp (URL).

Vì vậy, khi bạn cập nhật các tập tin, bạn có thể đổi tên các tập tin để buộc tải về các tập tin mới.

Ví dụ: nếu tệp phiên bản 1 là

<link rel="stylesheet" href="/css/site.css" />

Phiên bản 2 của tệp cập nhật là có

<link rel="stylesheet" href="/css/site2.css" />

Điều này sẽ sử .css tệp site2 trên máy khách.

Tuy nhiên, làm điều này bằng tay có thể gây rắc rối và lỗi cho việc thay đổi đường dẫn hoặc thay đổi tên tệp vật lý.

Đính kèm tham số truy vấn vào đường dẫn tệp

Web hoạt động theo cách cho phép bạn thêm các tham số truy vấn cho các kết hợp khóa và giá trị sau đường dẫn. Ngay cả khi các tập tin vật lý là như nhau, cơ chế bộ nhớ cache khách hàng nhận ra các tập tin như là một tập tin riêng biệt nếu các tham số truy vấn là khác nhau. Các tham số truy vấn được đính kèm và không có ý nghĩa nếu chúng không được sử dụng.

Các tham số truy vấn có thể được đính kèm vào đường dẫn ở định dạng sau:

<!-- クエリパラメータなし -->
<link rel="stylesheet" href="/css/site.css" />

<!-- クエリパラメータあり -->
<link rel="stylesheet" href="/css/site.css?key=value" />

Cơ chế này yêu cầu thay đổi đường dẫn, nhưng không cần phải đổi tên tệp vật lý.

Tự động thêm các tham số truy vấn theo lập trình (một ví dụ xấu)

Bằng cách tự động đính kèm các tham số truy vấn theo lập trình, Ngay cả khi bạn thay đổi tệp tĩnh, bạn không cần phải thay đổi đường dẫn tệp theo cách thủ công.

Một ví dụ đơn giản là thêm thời gian hiện tại vào tham số truy vấn khi người dùng truy cập trang web. Điều này là dễ dàng bởi vì tôi nghĩ rằng bất kỳ ngôn ngữ lập trình có thể được viết trong một dòng. Tôi nghĩ rằng ví dụ xây dựng được hiển thị dư

<link rel="stylesheet" href="/css/site.css?20210223120000" />

Tuy nhiên, nhược điểm của việc này là bộ nhớ cache không có lợi ích. Đường dẫn thay đổi mỗi khi bạn truy cập trang web, vì vậy mặc dù tệp giống như lần trước Nó được coi là một tập tin riêng biệt, do đó, tải về các tập tin CSS từ máy chủ mỗi lần. Các phiên bản cũ hơn của tệp sẽ không bao giờ được sử dụng, nhưng nó chỉ giống như không sử dụng chức năng bộ nhớ cache.

ASP.NET kiểm soát phiên bản tệp bằng cách đính kèm các tham số truy vấn trong Core

Mặc dù không còn ASP.NET trước, lõi là phương pháp tiêu chuẩn để giải quyết vấn đề bộ nhớ cache này.

Tất cả những gì bạn muốn là đính kèm thuộc tính vào asp-append-version="true" thẻ mô tả đường dẫn tệp, như sau:

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
<img src="/image/sample.png" asp-append-version="true"/>
<script src="~/js/site.js" asp-append-version="true"></script>

Sau khi bạn xuất bản lên web, khi bạn thực sự truy cập trang, nó sẽ được mở rộng như sau:

<link rel="stylesheet" href="/css/site.css?v=S2ihmzMFFc3FWmBWsR-NiddZWa8kbyaQYBx2FDkIoHs" />
<img src="/image/sample.png?v=Z0tUqQmLt_3L_NSzPmkbZKxL8cMxglf08BwWb5Od5z4" />
<script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>

Chuỗi ngẫu nhiên được thêm vào, nhưng không thay đổi mỗi khi truy cập. Chuỗi này là một giá trị băm được tạo ra dựa trên nội dung của tập tin tham chiếu. Vì vậy, miễn là nội dung của các tập tin vẫn không thay đổi, họ tạo ra cùng một chuỗi. Nếu nội dung của tệp thay đổi, hãy thay đổi thành chuỗi mới.

Vì vậy, nếu các tập tin là như nhau, đường dẫn là như nhau, do đó, các tập tin được lưu trữ sẽ được ưu tiên. Nếu tệp được cập nhật, đường dẫn sẽ thay đổi, vì vậy tệp mới sẽ được tải xuống và sử dụng.

Nhân tiện, asp-append-version="true" thuộc tính này thường chỉ chứa các tệp tĩnh được đặt trong thư mục wwwroot. Lưu ý rằng chuỗi ngẫu nhiên không mở rộng, ngay cả khi được đặt thành tệp khác.

Giới thiệu về chương trình mẫu

Mẫu dự án mặc định .js mẫu asp-append-version site. Site không .css đính asp-append-version kèm.

Chương _Layout.cshtml trình mẫu thêm tệp .js, trang web .css asp-append-version tệp vào mỗi trang web. Chúng tôi cũng thêm thẻ img làm tài liệu tham khảo và thêm asp-append-version thẻ đó vào.