Các phương pháp hay nhất để ngăn chặn CSS và JavaScript cũ

Question

Tôi đang nghiên cứu dự án này và tôi tự hỏi những người khác đang làm gì để ngăn các tệp CSS và JavaScript cũ được phân phối với mỗi bản phát hành mới. Tôi không muốn chắp thêm dấu thời gian hoặc thứ gì đó tương tự có thể ngăn bộ nhớ đệm trên mọi yêu cầu.

Tôi đang làm việc với khung công tác Spring 2.5 MVC và tôi đã sử dụng google api để phục vụ nguyên mẫu và kịch bản. Tôi cũng đang cân nhắc việc sử dụng Amazon S3 và Cloudfront mới để giảm thiểu độ trễ mạng.

Answer 1

tôi thêm một tham số yêu cầu với số phiên bản, một cái gì đó như:

<script type="text/javascript" src="/path/to/script.js?ver=456"></script> 

tham số 'ver' được cập nhật tự động với từng xây dựng (đọc từ tập tin, trong đó xây dựng cập nhật). Điều này đảm bảo rằng các tập lệnh được lưu trữ chỉ cho bản sửa đổi hiện tại.

Answer 2

Sử dụng một yêu cầu conditional get với một If-Modified-Since tiêu đề

Answer 3

Đây thực sự là một vấn đề rất khó khăn, và một cái gì đó mà bạn có thể dành một khoảng thời gian kỹ thuật là giải pháp đúng cho.

Tôi muốn giới thiệu xuất bản tập tin của bạn bằng cách sử dụng dấu thời gian và/hoặc phiên bản được xây dựng vào url, nên thay vì:

/media/js/my.js bạn kết thúc với:

/media/js/v12/my.js hoặc tương tự.

Bạn có thể tự động hóa phiên bản/dấu thời gian bằng bất kỳ công cụ nào.

Điều này có thêm lợi ích KHÔNG phá vỡ trang web khi bạn triển khai phiên bản mới và cho phép bạn thực hiện thử nghiệm song song (không giống như quy tắc viết lại chỉ xóa phiên bản và gửi lại tệp mới nhất).

Một điều cần lưu ý với JS hoặc CSS là khi bạn bao gồm các url phụ thuộc bên trong chúng (hình nền, v.v.), bạn cần đảm bảo rằng dấu thời gian/phiên bản JS/CSS thay đổi nếu tài nguyên bên trong (cũng như như viết lại chúng, nhưng đó là có thể với một regex rất đơn giản và một biểu hiện tài nguyên).

Không có vấn đề gì bạn đảm bảo không quăng a? Vblah vào cuối, vì bạn về cơ bản đang lưu bộ nhớ đệm ra ngoài cửa sổ khi bạn làm điều đó (điều này thật không may, vì đây là cách dễ nhất để xử lý việc này)

Answer 4

Nếu bạn nhận được "thời gian sửa đổi" của tệp dưới dạng dấu thời gian, tệp sẽ được lưu vào bộ nhớ cache cho đến khi tệp được sửa đổi. Chỉ cần sử dụng một hàm trợ giúp (hoặc bất kỳ chức năng nào được gọi trong các khung công tác khác) để thêm các thẻ script/css/image để lấy dấu thời gian từ tệp. Trên một hệ thống giống như Unix (hầu hết các máy chủ), bạn có thể chỉ cần touch các tệp để buộc thời gian sửa đổi thay đổi nếu cần.

Ruby on Rails sử dụng chiến lược này ở chế độ sản xuất (theo mặc định tôi đã biết) và sử dụng dấu thời gian bình thường trong chế độ phát triển (để thực sự chắc chắn không có gì được lưu trong bộ nhớ cache).

Answer 5

Liên quan đến tệp được lưu trong bộ nhớ cache, tôi chưa gặp phải bất kỳ vấn đề nào về lỗi liên quan đến tệp cũ đã lưu trong bộ nhớ cache bằng cách sử dụng phương thức chuỗi truy vấn.

Tuy nhiên, liên quan đến hiệu suất, và lặp lại Todd B 's nhắc đến vòng quay theo tên file, xin vui lòng kiểm tra Steve Souders' công việc để biết thêm về chủ đề này:

"Mực, một proxy phổ biến, không Tài nguyên bộ nhớ cache với chuỗi truy vấn. Điều này làm giảm hiệu suất khi nhiều người dùng phía sau yêu cầu bộ nhớ cache cùng một tệp - thay vì sử dụng phiên bản được lưu trong bộ nhớ cache, mọi người sẽ phải gửi yêu cầu tới máy chủ gốc. "

"Quản trị viên proxy có thể thay đổi cấu hình để hỗ trợ tài nguyên bộ nhớ đệm bằng chuỗi truy vấn, khi tiêu đề bộ nhớ đệm cho biết điều đó là phù hợp. Nhưng cấu hình mặc định là những gì nhà phát triển web sẽ gặp phải thường xuyên nhất".

http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

Answer 6

Giống như @ Eran-Galperin, tôi sử dụng một tham số trong tham chiếu đến tập tin JS, nhưng tôi bao gồm một tham chiếu máy chủ tạo ra cho đến nay "sửa đổi lần cuối" của tập tin. @ stein-g-strindhaug đề xuất phương pháp này. Nó sẽ trông giống như sau:

<script type="text/javascript" src="/path/to/script.js?1347486578"></script> 

Máy chủ bỏ qua tham số cho tệp tĩnh và khách hàng có thể lưu bộ nhớ cache cho đến khi mã ngày thay đổi. Nếu (và chỉ nếu) bạn sửa đổi tệp JS trên máy chủ, mã ngày sẽ tự động thay đổi.

Ví dụ, trong PHP, kịch bản của tôi để tạo mã này trông như thế này:

function cachePreventCode($filename) { 
    if (!file_exists($filename)) 
     return ""; 
    $mtime = filemtime($filename); 
    return $mtime; 
} 

Vì vậy, sau đó khi file PHP của bạn bao gồm một tham chiếu đến một tập tin CSS, nó có thể trông như thế này:

<link rel="stylesheet" type="text/css" href="main.css?<?= cachePreventCode("main.css") ?>" /> 

... mà sẽ tạo ra ...

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

Answer 7

Nếu bạn sử dụng MAVEN, bạn có thể sử dụng này, ADD trên bạn p om.xml:

<properties> 
    <maven.build.timestamp.format>yyyyMMddHHmm</maven.build.timestamp.format> 
    <timestamp>${maven.build.timestamp}</timestamp> 
</properties> 

Với điều này, bạn có thể nhận $ {timestamp} trong chế độ xem của mình. Giống như mẫu này:

<script type="text/javascript" src="/js/myScript.js?t=${timestamp}"></script>