Làm cách nào để buộc trình duyệt tải lại các tệp CSS / JS được lưu trong bộ nhớ cache?

Tôi đã nhận thấy rằng một số trình duyệt (đặc biệt là Firefox và Opera) rất nhiệt tình trong việc sử dụng các bản sao của tệp .css và .js được lưu trong bộ nhớ cache , ngay cả giữa các phiên trình duyệt. Điều này dẫn đến sự cố khi bạn cập nhật một trong những tệp này nhưng trình duyệt của người dùng vẫn tiếp tục sử dụng bản sao được lưu trong bộ nhớ cache.

Câu hỏi đặt ra là: cách thức thanh lịch nhất để buộc trình duyệt của người dùng tải lại tệp khi nó đã thay đổi?

Lý tưởng nhất, giải pháp sẽ không buộc trình duyệt tải lại tệp mỗi lần truy cập vào trang. Tôi sẽ đăng giải pháp của riêng tôi dưới dạng câu trả lời, nhưng tôi tò mò liệu có ai có giải pháp tốt hơn không và tôi sẽ để phiếu bầu của bạn quyết định.

Cập nhật:

Sau khi cho phép thảo luận ở đây một thời gian, tôi đã thấy đề xuất của John Millikin và da5id là hữu ích. Hóa ra có một thuật ngữ cho việc này: phiên bản tự động .

Tôi đã đăng một câu trả lời mới dưới đây là sự kết hợp giữa giải pháp ban đầu của tôi và đề xuất của John.

Một ý tưởng khác được đề xuất bởi SCdF sẽ là nối thêm chuỗi truy vấn không có thật vào tệp. (Một số mã Python để tự động sử dụng dấu thời gian dưới dạng chuỗi truy vấn không có thật đã được gửi bởi pi .). Tuy nhiên, có một số cuộc thảo luận về việc liệu trình duyệt có lưu trữ tệp với chuỗi truy vấn hay không. (Hãy nhớ rằng, chúng tôi muốn trình duyệt lưu tệp vào bộ đệm và sử dụng nó trong các lần truy cập trong tương lai. Chúng tôi chỉ muốn nó tải lại tệp khi nó đã thay đổi.)

Vì không rõ điều gì xảy ra với chuỗi truy vấn không có thật, tôi không chấp nhận câu trả lời đó.

Cập nhật: Viết lại để kết hợp các đề xuất từ John Millikin và da5id . Giải pháp này được viết bằng PHP, nhưng nên dễ dàng thích nghi với các ngôn ngữ khác.

Cập nhật 2: Kết hợp các bình luận từ Nick Johnson rằng .htaccessregex ban đầu có thể gây ra sự cố với các tệp như json-1.3.js. Giải pháp là chỉ viết lại nếu có chính xác 10 chữ số ở cuối. (Vì 10 chữ số bao gồm tất cả các dấu thời gian từ 9/9/2001 đến 11/20/2286.)

Đầu tiên, chúng tôi sử dụng quy tắc viết lại sau đây trong .htaccess:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

Bây giờ, chúng ta viết hàm PHP sau:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

Bây giờ, bất cứ nơi nào bạn bao gồm CSS của bạn, hãy thay đổi nó từ đây:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

Về điều này:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

Bằng cách này, bạn không bao giờ phải sửa đổi thẻ liên kết nữa và người dùng sẽ luôn thấy CSS mới nhất. Trình duyệt sẽ có thể lưu trữ tệp CSS, nhưng khi bạn thực hiện bất kỳ thay đổi nào đối với CSS, trình duyệt sẽ xem đây là một URL mới, vì vậy nó sẽ không sử dụng bản sao được lưu trong bộ nhớ cache.

Điều này cũng có thể hoạt động với hình ảnh, favicon và JavaScript. Về cơ bản bất cứ điều gì không được tạo ra năng động.

Kỹ thuật đơn giản phía khách hàng

Nói chung, bộ nhớ đệm là tốt .. Vì vậy, có một số kỹ thuật, tùy thuộc vào việc bạn tự khắc phục sự cố khi bạn phát triển trang web hay bạn đang cố gắng kiểm soát bộ đệm trong môi trường sản xuất.

Khách truy cập chung vào trang web của bạn sẽ không có cùng trải nghiệm mà bạn có khi bạn phát triển trang web. Vì khách truy cập trung bình đến trang web ít thường xuyên hơn (có thể chỉ một vài lần mỗi tháng, trừ khi bạn là Google hoặc Mạng của Google), nên họ ít có khả năng để các tệp của bạn trong bộ nhớ cache và điều đó có thể là đủ. Nếu bạn muốn buộc một phiên bản mới vào trình duyệt, bạn luôn có thể thêm chuỗi truy vấn vào yêu cầu và tăng số phiên bản khi bạn thực hiện các thay đổi lớn:

<script src="/myJavascript.js?version=4"></script>

Điều này sẽ đảm bảo rằng tất cả mọi người có được các tập tin mới. Nó hoạt động vì trình duyệt xem URL của tệp để xác định xem nó có bản sao trong bộ đệm hay không. Nếu máy chủ của bạn không được thiết lập để làm bất cứ điều gì với chuỗi truy vấn, nó sẽ bị bỏ qua, nhưng tên sẽ trông giống như một tệp mới cho trình duyệt.

Mặt khác, nếu bạn đang phát triển một trang web, bạn không muốn thay đổi số phiên bản mỗi khi bạn lưu thay đổi cho phiên bản phát triển của mình. Điều đó sẽ tẻ nhạt.

Vì vậy, trong khi bạn đang phát triển trang web của mình, một mẹo hay sẽ là tự động tạo tham số chuỗi truy vấn:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

Thêm một chuỗi truy vấn vào yêu cầu là một cách tốt để phiên bản tài nguyên, nhưng đối với một trang web đơn giản, điều này có thể không cần thiết. Và hãy nhớ rằng, bộ nhớ đệm là một điều tốt.

Cũng đáng lưu ý rằng trình duyệt không nhất thiết phải keo kiệt về việc giữ các tệp trong bộ nhớ cache. Các trình duyệt có chính sách cho loại điều này và chúng thường được chơi theo các quy tắc được đặt trong đặc tả HTTP. Khi trình duyệt đưa ra yêu cầu đến máy chủ, một phần của phản hồi là tiêu đề EXPIRES .. một ngày cho trình duyệt biết thời gian cần lưu trong bộ nhớ cache. Lần tiếp theo trình duyệt bắt gặp một yêu cầu cho cùng một tệp, nó thấy rằng nó có một bản sao trong bộ đệm và tìm đến ngày EXPIRES để quyết định xem có nên sử dụng nó không.

Vì vậy, tin hay không, thực sự máy chủ của bạn đang khiến bộ nhớ cache của trình duyệt trở nên quá dai dẳng. Bạn có thể điều chỉnh cài đặt máy chủ của mình và thay đổi các tiêu đề EXPIRES, nhưng kỹ thuật nhỏ mà tôi đã viết ở trên có lẽ là cách đơn giản hơn nhiều để bạn thực hiện. Vì bộ nhớ đệm là tốt, bạn thường muốn đặt ngày đó đến tương lai ("Tiêu đề hết hạn trong tương lai xa") và sử dụng kỹ thuật được mô tả ở trên để buộc thay đổi.

Nếu bạn quan tâm đến nhiều thông tin hơn về HTTP hoặc cách thực hiện các yêu cầu này, một cuốn sách hay là "Trang web hiệu suất cao" của Steve Souder. Đó là một giới thiệu rất tốt về chủ đề này.

Plugin mod_pagespeed của Google cho apache sẽ tự động phiên bản cho bạn. Nó thực sự trơn tru.

Nó phân tích HTML trên đường ra khỏi máy chủ web (hoạt động với PHP, rails, python, HTML tĩnh - bất cứ thứ gì) và viết lại các liên kết đến CSS, JS, các tệp hình ảnh để chúng bao gồm mã id. Nó phục vụ các tệp tại các URL đã sửa đổi với điều khiển bộ đệm rất dài trên chúng. Khi các tệp thay đổi, nó sẽ tự động thay đổi các URL để trình duyệt phải tìm nạp lại chúng. Về cơ bản nó chỉ hoạt động, không có bất kỳ thay đổi nào đối với mã của bạn. Nó thậm chí sẽ thu nhỏ mã của bạn trên đường ra.

Thay vì thay đổi phiên bản theo cách thủ công, tôi khuyên bạn nên sử dụng hàm băm MD5 của tệp CSS thực tế.

Vì vậy, URL của bạn sẽ giống như

http://mysite.com/css/[md5_hash_here]/style.css

Bạn vẫn có thể sử dụng quy tắc viết lại để loại bỏ hàm băm, nhưng ưu điểm là bây giờ bạn có thể đặt chính sách bộ đệm của mình thành "bộ đệm vĩnh viễn", vì nếu URL giống nhau, điều đó có nghĩa là tệp không thay đổi.

Sau đó, bạn có thể viết một tập lệnh shell đơn giản để tính toán hàm băm của tệp và cập nhật thẻ của bạn (có thể bạn muốn chuyển nó sang một tệp riêng để đưa vào).

Đơn giản chỉ cần chạy tập lệnh đó mỗi khi CSS thay đổi và bạn ổn. Trình duyệt sẽ CHỈ tải lại các tệp của bạn khi chúng bị thay đổi. Nếu bạn thực hiện chỉnh sửa và sau đó hoàn tác nó, sẽ không có gì khó khăn để tìm ra phiên bản nào bạn cần quay lại để khách truy cập của bạn không tải xuống lại.

Không chắc chắn tại sao các bạn đang mất quá nhiều đau đớn để thực hiện giải pháp này.

Tất cả những gì bạn cần làm nếu lấy dấu thời gian đã sửa đổi của tệp và nối nó dưới dạng chuỗi truy vấn vào tệp

Trong PHP tôi sẽ làm như sau:

<link href="mycss.css?v=<?= filemtime('mycss.css') ?>" rel="stylesheet">

filemtime là một hàm PHP trả về dấu thời gian đã sửa đổi của tệp.

Bạn chỉ có thể đặt ?foo=1234vào cuối quá trình nhập css / js của mình, thay đổi 1234 thành bất cứ điều gì bạn thích. Có một cái nhìn vào nguồn html SO cho một ví dụ.

Ý tưởng đó là gì? dù sao thì các tham số sẽ bị loại bỏ / bỏ qua yêu cầu và bạn có thể thay đổi số đó khi bạn tung ra một phiên bản mới.

Lưu ý: Có một số đối số liên quan đến chính xác làm thế nào điều này ảnh hưởng đến bộ nhớ đệm. Tôi tin rằng ý chính chung của nó là các yêu cầu GET, có hoặc không có tham số nên được lưu trong bộ nhớ cache, vì vậy giải pháp trên sẽ hoạt động.

Tuy nhiên, tùy thuộc vào cả máy chủ web để quyết định xem nó có muốn tuân thủ phần đó của thông số kỹ thuật và trình duyệt mà người dùng sử dụng hay không, vì dù sao nó cũng có thể đi trước và yêu cầu phiên bản mới.

Tôi đã nghe điều này được gọi là "phiên bản tự động". Phương pháp phổ biến nhất là bao gồm mtime của tệp tĩnh ở đâu đó trong URL và loại bỏ nó bằng cách sử dụng trình xử lý viết lại hoặc confs URL:

Xem thêm:

• Phiên bản tài sản tự động trong Django
• Tự động phiên bản các tệp CSS và JavaScript của bạn

30 câu trả lời hiện có là lời khuyên tuyệt vời cho một trang web vào khoảng năm 2008. Tuy nhiên, khi nói đến một ứng dụng một trang hiện đại (SPA), có lẽ đã đến lúc bạn nên suy nghĩ lại một số giả định cơ bản, cụ thể là ý tưởng rằng máy chủ web mong muốn chỉ phục vụ phiên bản duy nhất, gần đây nhất của một tập tin.

Hãy tưởng tượng bạn là người dùng có phiên bản M của một SPA được tải vào trình duyệt của bạn:

1. Đường ống CD của bạn triển khai phiên bản N mới của ứng dụng lên máy chủ
2. Bạn điều hướng trong SPA, nơi gửi XHR đến máy chủ để nhận /some.template
   • (Trình duyệt của bạn chưa làm mới trang, vì vậy bạn vẫn đang chạy phiên bản M )
3. Máy chủ phản hồi với nội dung của /some.template- bạn có muốn nó trả về phiên bản M hoặc N của mẫu không?

Nếu định dạng /some.templatethay đổi giữa các phiên bản M và N (hoặc tệp được đổi tên hoặc bất cứ thứ gì), bạn có thể không muốn phiên bản N của mẫu được gửi tới trình duyệt chạy phiên bản M cũ của trình phân tích cú pháp .

Các ứng dụng web gặp phải vấn đề này khi hai điều kiện được đáp ứng:

• Tài nguyên được yêu cầu không đồng bộ đôi khi sau khi tải trang ban đầu
• Logic ứng dụng giả định những điều (có thể thay đổi trong các phiên bản trong tương lai) về nội dung tài nguyên

Khi ứng dụng của bạn cần phân phát song song nhiều phiên bản, việc giải quyết bộ đệm và "tải lại" trở nên tầm thường:

1. Cài đặt tất cả các tệp trang web vào các thư mục được phiên bản : /v<release_tag_1>/…files…,/v<release_tag_2>/…files…
2. Đặt tiêu đề HTTP để cho phép trình duyệt lưu tệp vĩnh viễn
   • (Hoặc tốt hơn nữa, đặt mọi thứ vào CDN)
3. Cập nhật tất cả <script>và <link>các thẻ, v.v. để trỏ đến tệp đó trong một trong các thư mục được phiên bản

Bước cuối cùng đó nghe có vẻ khó khăn, vì nó có thể yêu cầu gọi trình tạo URL cho mỗi URL trong mã phía máy chủ hoặc phía máy khách của bạn. Hoặc bạn có thể sử dụng <base>thẻ một cách thông minh và thay đổi phiên bản hiện tại ở một nơi.

Một cách để giải quyết vấn đề này là phải tích cực buộc trình duyệt tải lại mọi thứ khi một phiên bản mới được phát hành. Nhưng vì mục đích để cho bất kỳ hoạt động đang thực hiện nào hoàn thành, có thể vẫn dễ dàng nhất để hỗ trợ ít nhất hai phiên bản song song: v-current và v-trước.

Không sử dụng foo.css? Phiên bản = 1! Các trình duyệt không được yêu cầu lưu trữ URL với các biến GET. Theo http: //www.thinkv Vitamin.com/features/webapps/serving-javascript-fast , mặc dù IE và Firefox bỏ qua điều này, Opera và Safari thì không! Thay vào đó, sử dụng foo.v1234.css và sử dụng quy tắc viết lại để loại bỏ số phiên bản.

Trong Laravel (PHP), chúng ta có thể thực hiện theo cách rõ ràng và thanh lịch (sử dụng dấu thời gian sửa đổi tệp):

<script src="{{ asset('/js/your.js?v='.filemtime('js/your.js')) }}"></script>

Và tương tự cho CSS

<link rel="stylesheet" href="{{asset('css/your.css?v='.filemtime('css/your.css'))}}">

Ví dụ đầu ra html ( filemtimethời gian trả về dưới dạng dấu thời gian Unix )

<link rel="stylesheet" href="assets/css/your.css?v=1577772366">

RewriteRule cần một bản cập nhật nhỏ cho các tệp js hoặc css có chứa phiên bản ký hiệu dấu chấm ở cuối. Ví dụ: json-1.3.js.

Tôi đã thêm một lớp phủ định dấu chấm [^.] Vào regex vì vậy .number. bị bỏ qua.

RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]

Đối với ASP.NET 4.5 trở lên, bạn có thể sử dụng gói script .

Yêu cầu http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81dành cho gói AllMyScripts và chứa cặp chuỗi truy vấn v = r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81. Chuỗi truy vấn v có mã thông báo giá trị là mã định danh duy nhất được sử dụng để lưu trữ. Miễn là gói không thay đổi, ứng dụng ASP.NET sẽ yêu cầu gói AllMyScripts sử dụng mã thông báo này. Nếu bất kỳ tệp nào trong gói thay đổi, khung tối ưu hóa ASP.NET sẽ tạo mã thông báo mới, đảm bảo rằng các yêu cầu trình duyệt cho gói sẽ nhận được gói mới nhất.

Có các lợi ích khác để đóng gói bao gồm tăng hiệu suất khi tải trang lần đầu với thu nhỏ.

Đây là một giải pháp JavaScript thuần túy

(function(){

    // Match this timestamp with the release of your code
    var lastVersioning = Date.UTC(2014, 11, 20, 2, 15, 10);

    var lastCacheDateTime = localStorage.getItem('lastCacheDatetime');

    if(lastCacheDateTime){
        if(lastVersioning > lastCacheDateTime){
            var reload = true;
        }
    }

    localStorage.setItem('lastCacheDatetime', Date.now());

    if(reload){
        location.reload(true);
    }

})();

Ở trên sẽ tìm kiếm lần cuối cùng người dùng truy cập trang web của bạn. Nếu lần truy cập trước là trước khi bạn phát hành mã mới, nó sẽ sử dụng location.reload(true)để buộc làm mới trang từ máy chủ.

Tôi thường có đoạn mã này là tập lệnh đầu tiên trong phạm vi <head>để nó được đánh giá trước khi tải bất kỳ nội dung nào khác. Nếu tải lại cần phải xảy ra, người dùng hầu như không nhận thấy.

Tôi đang sử dụng bộ nhớ cục bộ để lưu dấu thời gian truy cập cuối cùng trên trình duyệt, nhưng bạn có thể thêm cookie vào hỗn hợp nếu bạn đang muốn hỗ trợ các phiên bản IE cũ hơn.

Bài viết thú vị. Đã đọc tất cả các câu trả lời ở đây kết hợp với thực tế là tôi chưa bao giờ có bất kỳ vấn đề nào với chuỗi truy vấn "không có thật" (tôi không chắc tại sao mọi người lại miễn cưỡng sử dụng điều này) Tôi đoán giải pháp (loại bỏ sự cần thiết phải viết lại quy tắc apache như trong câu trả lời được chấp nhận) là tính HASH ngắn của nội dung tệp CSS (thay vì datetime tệp) dưới dạng chuỗi truy vấn không có thật.

Điều này sẽ dẫn đến kết quả như sau:

<link rel="stylesheet" href="/css/base.css?[hash-here]" type="text/css" />

Tất nhiên các giải pháp datetime cũng hoàn thành công việc trong trường hợp chỉnh sửa tệp CSS nhưng tôi nghĩ đó là về nội dung tệp css chứ không phải về datetime tệp, vậy tại sao chúng lại bị lẫn lộn?

Đối với sự phát triển của tôi, tôi thấy rằng chrome có một giải pháp tuyệt vời.

https://developer.chrome.com/devtools/docs/tips-and-tricks#hard-reload

Khi các công cụ dành cho nhà phát triển mở ra, chỉ cần nhấp vào nút refresh và thả ra một khi bạn di chuột qua "Bộ nhớ cache trống và Tải lại cứng".

Đây là người bạn tốt nhất của tôi, và là một cách siêu nhẹ để có được những gì bạn muốn!

Cảm ơn tại Kip cho giải pháp hoàn hảo của mình!

Tôi đã mở rộng nó để sử dụng nó như một Zend_view_Helper. Bởi vì khách hàng của tôi chạy trang của mình trên một máy chủ ảo, tôi cũng đã mở rộng nó cho điều đó.

Hy vọng nó sẽ giúp người khác quá.

/**
 * Extend filepath with timestamp to force browser to
 * automatically refresh them if they are updated
 *
 * This is based on Kip's version, but now
 * also works on virtual hosts
 * @link http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files
 *
 * Usage:
 * - extend your .htaccess file with
 * # Route for My_View_Helper_AutoRefreshRewriter
 * # which extends files with there timestamp so if these
 * # are updated a automatic refresh should occur
 * # RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
 * - then use it in your view script like
 * $this->headLink()->appendStylesheet( $this->autoRefreshRewriter($this->cssPath . 'default.css'));
 *
 */
class My_View_Helper_AutoRefreshRewriter extends Zend_View_Helper_Abstract {

    public function autoRefreshRewriter($filePath) {

        if (strpos($filePath, '/') !== 0) {

            // path has no leading '/'
            return $filePath;
        } elseif (file_exists($_SERVER['DOCUMENT_ROOT'] . $filePath)) {

            // file exists under normal path
            // so build path based on this
            $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $filePath);
            return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
        } else {

            // fetch directory of index.php file (file from all others are included)
            // and get only the directory
            $indexFilePath = dirname(current(get_included_files()));

            // check if file exist relativ to index file
            if (file_exists($indexFilePath . $filePath)) {

                // get timestamp based on this relativ path
                $mtime = filemtime($indexFilePath . $filePath);

                // write generated timestamp to path
                // but use old path not the relativ one
                return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
            } else {

                return $filePath;
            }
        }
    }

}

Chúc mừng và cảm ơn.

Không tìm thấy cách tiếp cận DOM phía máy khách tạo phần tử nút script (hoặc css) một cách linh hoạt:

<script>
    var node = document.createElement("script"); 
    node.type = "text/javascript";
    node.src = 'test.js?'+Math.floor(Math.random()*999999999);
    document.getElementsByTagName("head")[0].appendChild(node);
</script>

google chrome có tùy chọn Tải lại cứng cũng như Lưu trữ trống và Tải lại cứng. Bạn có thể nhấp và giữ nút tải lại (Trong Chế độ kiểm tra) để chọn một.

Bạn có thể buộc "bộ nhớ đệm toàn phiên" nếu bạn thêm id phiên làm tham số không chính xác của tệp js / css:

<link rel="stylesheet" src="myStyles.css?ABCDEF12345sessionID" />
<script language="javascript" src="myCode.js?ABCDEF12345sessionID"></script>

Nếu bạn muốn bộ đệm ẩn toàn phiên bản, bạn có thể thêm một số mã để in ngày tệp hoặc tương tự. Nếu bạn đang sử dụng Java, bạn có thể sử dụng thẻ tùy chỉnh để tạo liên kết một cách trang nhã.

<link rel="stylesheet" src="myStyles.css?20080922_1020" />
<script language="javascript" src="myCode.js?20080922_1120"></script>

Giả sử bạn có một tệp có sẵn tại:

/styles/screen.css

bạn có thể nối thêm một tham số truy vấn với thông tin phiên bản vào URI, ví dụ:

/styles/screen.css?v=1234

hoặc bạn có thể thêm thông tin phiên bản, ví dụ:

/v/1234/styles/screen.css

IMHO phương pháp thứ hai tốt hơn cho các tệp CSS vì chúng có thể tham chiếu đến hình ảnh bằng các URL tương đối, điều đó có nghĩa là nếu bạn chỉ định background-imagenhư vậy:

body {
    background-image: url('images/happy.gif');
}

URL của nó sẽ có hiệu quả là:

/v/1234/styles/images/happy.gif

Điều này có nghĩa là nếu bạn cập nhật số phiên bản được sử dụng, máy chủ sẽ coi đây là tài nguyên mới và không sử dụng phiên bản được lưu trong bộ nhớ cache. Nếu bạn căn cứ số phiên bản của mình vào Subversion / CVS / vv. sửa đổi điều này có nghĩa là những thay đổi đối với hình ảnh được tham chiếu trong tệp CSS sẽ được chú ý. Đó là không được bảo đảm với các chương trình đầu tiên, tức là URL images/happy.gifliên quan đến /styles/screen.css?v=1235là /styles/images/happy.gifmà không chứa bất kỳ thông tin phiên bản.

Tôi đã triển khai một giải pháp lưu trữ bằng cách sử dụng kỹ thuật này với các máy chủ Java và chỉ cần xử lý các yêu cầu /v/*với một máy chủ ủy nhiệm cho tài nguyên cơ bản (tức là /styles/screen.css). Trong chế độ phát triển tôi thiết lập bộ nhớ đệm header mà nói với khách hàng để luôn luôn kiểm tra độ tươi của tài nguyên với máy chủ (điều này thường dẫn đến một 304 nếu bạn uỷ thác cho nhân Tomcat DefaultServletvà .css, .jsvv tập tin đã không thay đổi) khi ở chế độ triển khai Tôi đặt tiêu đề cho biết "bộ nhớ cache mãi mãi".

Bạn chỉ có thể thêm một số số ngẫu nhiên với url CSS / JS như

example.css?randomNo=Math.random()

Đối với ASP.NET tôi cho rằng giải pháp tiếp theo với các tùy chọn nâng cao (chế độ gỡ lỗi / phát hành, phiên bản):

Các tệp Js hoặc Css được bao gồm theo cách đó:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix và Global.CssPostfix được tính theo cách sau trong Global.asax:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

Gần đây tôi đã giải quyết điều này bằng Python. Ở đây mã (nên dễ dàng chấp nhận cho các ngôn ngữ khác):

def import_tag(pattern, name, **kw):
    if name[0] == "/":
        name = name[1:]
    # Additional HTML attributes
    attrs = ' '.join(['%s="%s"' % item for item in kw.items()])
    try:
        # Get the files modification time
        mtime = os.stat(os.path.join('/documentroot', name)).st_mtime
        include = "%s?%d" % (name, mtime)
        # this is the same as sprintf(pattern, attrs, include) in other
        # languages
        return pattern % (attrs, include)
    except:
        # In case of error return the include without the added query
        # parameter.
        return pattern % (attrs, name)

def script(name, **kw):
    return import_tag("""<script type="text/javascript" """ +\
        """ %s src="/%s"></script>""", name, **kw)

def stylesheet(name, **kw):
    return import_tag('<link rel="stylesheet" type="text/css" ' +\
        """%s href="/%s">', name, **kw) 

Mã này về cơ bản sẽ thêm dấu thời gian của tệp dưới dạng tham số truy vấn vào URL. Cuộc gọi của hàm sau

script("/main.css")

sẽ cho kết quả

<link rel="stylesheet" type="text/css"  href="/main.css?1221842734">

Ưu điểm của khóa học là bạn không bao giờ phải thay đổi html của mình nữa, chạm vào tệp CSS sẽ tự động kích hoạt tính năng vô hiệu hóa bộ đệm. Hoạt động rất tốt và chi phí không đáng chú ý.

Nếu bạn đang sử dụng git + PHP, bạn có thể tải lại tập lệnh từ bộ đệm mỗi lần có thay đổi trong repo git, sử dụng mã sau:

exec('git rev-parse --verify HEAD 2> /dev/null', $gitLog);
echo '  <script src="/path/to/script.js"?v='.$gitLog[0].'></script>'.PHP_EOL;

Nếu bạn là nhà phát triển muốn tránh bộ nhớ đệm, tab mạng chrome đã tắt tùy chọn bộ đệm. Nếu không, bạn có thể làm điều đó mà không cần khung kết xuất máy chủ bằng hai thẻ script.

<script type="text/javascript">
    document.write('<script type="text/javascript" src="myfile.js?q=' + Date.now() + '">
    // can't use myfile.js stuff yet
</script>')
<script type="text/javascript">
    // do something with myfile.js
</script>

Câu hỏi này là siêu cũ, và xuất hiện điều đầu tiên khi bất kỳ ai giải quyết vấn đề này. Đây không phải là một câu trả lời cho câu hỏi theo cách mà op muốn, thay vào đó là một câu trả lời cho các nhà phát triển với vấn đề này trong khi phát triển và thử nghiệm. Và tôi không thể đăng một câu hỏi mới về chủ đề này vì sẽ được đánh dấu là trùng lặp.

Giống như nhiều người khác, tôi chỉ muốn loại bỏ bộ nhớ đệm một thời gian ngắn.

"keep caching consistent with the file" .. cách của nó quá nhiều rắc rối ..

Nói chung, tôi không ngại tải thêm - thậm chí tải lại các tệp không thay đổi - trên hầu hết các dự án - thực tế không liên quan. Trong khi phát triển một ứng dụng - chúng tôi chủ yếu tải từ đĩa, localhost:port vì vậy - increase in network trafficvấn đề này không phải là vấn đề vi phạm thỏa thuận .

Hầu hết các dự án nhỏ chỉ chơi xung quanh - chúng không bao giờ kết thúc trong sản xuất. Vì vậy, đối với họ bạn không cần thêm gì nữa ..

Như vậy, nếu bạn sử dụng Chrome Dev Tools , bạn có thể làm theo cách tiếp cận vô hiệu hóa bộ đệm này như trong hình dưới đây:

Và nếu bạn có vấn đề về bộ nhớ đệm firefox :

Chỉ thực hiện điều này khi phát triển, bạn cũng cần một cơ chế để buộc tải lại cho sản xuất, vì người dùng của bạn sẽ sử dụng các mô-đun bị vô hiệu hóa bộ đệm cũ nếu bạn cập nhật ứng dụng thường xuyên và bạn không cung cấp cơ chế đồng bộ hóa bộ đệm chuyên dụng như mô tả trong câu trả lời ở trên.

Vâng, thông tin này đã có trong các câu trả lời trước nhưng tôi vẫn cần phải thực hiện tìm kiếm google để tìm thấy nó.

Hy vọng câu trả lời này rất rõ ràng và bây giờ bạn không cần phải làm vậy.

Dường như tất cả các câu trả lời ở đây đề xuất một số loại phiên bản trong sơ đồ đặt tên, có nhược điểm của nó.

Các trình duyệt nên nhận thức rõ về những gì cần lưu trữ và những gì không lưu vào bộ đệm bằng cách đọc phản hồi của máy chủ web, đặc biệt là các tiêu đề http - tài nguyên này có hiệu lực trong bao lâu? tài nguyên này có được cập nhật kể từ lần cuối tôi lấy nó không? vân vân.

Nếu mọi thứ được cấu hình 'chính xác', chỉ cần cập nhật các tệp trong ứng dụng của bạn (đôi khi) sẽ làm mới bộ đệm của trình duyệt. Ví dụ, bạn có thể định cấu hình máy chủ web của mình để báo cho trình duyệt không bao giờ lưu trữ tệp (đây là một ý tưởng tồi).

Một lời giải thích sâu hơn về cách thức hoạt động của nó ở đây https://www.mnot.net/cache_docs/#WORK

Chỉ cần thêm mã này, nơi bạn muốn thực hiện tải lại cứng (buộc trình duyệt tải lại các tệp CSS / JS được lưu trong bộ nhớ cache) Thực hiện việc này bên trong .load để nó không làm mới như một vòng lặp

 $( window ).load(function() {
   location.reload(true);
});

Chỉ cần sử dụng mã phía máy chủ để thêm ngày của tệp ... theo cách đó SILL được lưu vào bộ đệm và chỉ được tải lại khi tệp thay đổi

Trong ASP.NET

<link rel="stylesheet" href="~/css/custom.css?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/css/custom.css")).ToString(),"[^0-9]", ""))" />

<script type="text/javascript" src="~/js/custom.js?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/js/custom.js")).ToString(),"[^0-9]", ""))"></script>    

Điều này có thể được đơn giản hóa để:

<script src="<%= Page.ResolveClientUrlUnique("~/js/custom.js") %>" type="text/javascript"></script>

Bằng cách thêm một phương thức mở rộng vào dự án của bạn để mở rộng Trang:

public static class Extension_Methods
{
    public static string ResolveClientUrlUnique(this System.Web.UI.Page oPg, string sRelPath)
    {
        string sFilePath = oPg.Server.MapPath(sRelPath);
        string sLastDate = System.IO.File.GetLastWriteTime(sFilePath).ToString();
        string sDateHashed = System.Text.RegularExpressions.Regex.Replace(sLastDate, "[^0-9]", "");

        return oPg.ResolveClientUrl(sRelPath) + "?d=" + sDateHashed;
    }
}

Tôi đề nghị thực hiện quy trình sau:

• phiên bản các tệp css / js của bạn bất cứ khi nào bạn triển khai, đại loại như: screen.1233.css (số có thể là bản sửa đổi SVN của bạn nếu bạn sử dụng hệ thống tạo phiên bản)

• giảm thiểu chúng để tối ưu hóa thời gian tải