防止CSS和JavaScript过时的最佳实践是什么

I'm researching this for a project and I'm wondering what other people are doing to prevent stale CSS and JavaScript files from being served with each new release. I don't want to append a timestamp or something similar which may prevent caching on every request.

我正在为一个项目研究这个问题，我想知道其他人在做什么，以防止在每个新版本中出现过时的CSS和JavaScript文件。我不想添加时间戳或类似的东西，它们可能会阻止对每个请求进行缓存。

I'm working with the Spring 2.5 MVC framework and I'm already using the google api's to serve prototype and scriptaculous. I'm also considering using Amazon S3 and the new Cloudfront offering to minimize network latency.

我正在使用Spring 2.5 MVC框架，并且已经在使用谷歌api来提供prototype和scriptaculous。我还考虑使用Amazon S3和新的Cloudfront，以减少网络延迟。

7 个解决方案

#1

I add a parameter to the request with the revision number, something like:

我在请求中添加了一个参数，带有修订号，比如:

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

The 'ver' parameter is updated automatically with each build (read from file, which the build updates). This makes sure the scripts are cached only for the current revision.

“ver”参数在每次构建时都会自动更新(从文件中读取，由构建更新)。这将确保仅为当前修订缓存脚本。

#2

Like @eran-galperin, I use a parameter in the reference to the JS file, but I include a server-generated reference to the file's "last modified" date. @stein-g-strindhaug suggests this approach. It would look something like this:

像@eran-galperin一样，我在引用JS文件时使用了一个参数，但是我在文件的“最后修改”日期中包含了一个服务器生成的引用。@stein-g-strindhaug表明这种方法。大概是这样的:

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

The server ignores the parameter for the static file and the client may cache the script until the date code changes. If (and only if) you modify the JS file on the server, the date code will change automatically.

服务器忽略静态文件的参数，客户端可以缓存脚本，直到日期代码发生变化。如果(且仅当)修改服务器上的JS文件，则日期代码将自动更改。

For instance, in PHP, my script to create this code looks like this:

例如，在PHP中，我创建这个代码的脚本如下所示:

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

So then when your PHP file includes a reference to a CSS file, it might look like this:

因此，当PHP文件包含对CSS文件的引用时，它可能是这样的:

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

... which will create ...

…这将创建…

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

#3

With regards to cached files, I have yet to run into any issues of bugs related to stale cached files by using the querystring method.

关于缓存的文件，我还没有使用querystring方法遇到任何与过期缓存文件相关的bug问题。

However, with regards to performance, and echoing Todd B's mention of revving by filename, please check out Steve Souders' work for more on the topic:

然而，关于性能，和托德B提到的以文件名加速，请查看Steve Souders关于这个主题的更多工作:

"Squid, a popular proxy, doesn’t cache resources with a querystring. This hurts performance when multiple users behind a proxy cache request the same file - rather than using the cached version everybody would have to send a request to the origin server."

枪乌贼是一种流行的代理，它不使用查询字符串缓存资源。当代理缓存请求背后的多个用户请求相同的文件时，而不是使用每个人都必须向源服务器发送请求的缓存版本，这会影响性能。

"Proxy administrators can change the configuration to support caching resources with a querystring, when the caching headers indicate that is appropriate. But the default configuration is what web developers should expect to encounter most frequently."

代理管理员可以更改配置以支持使用querystring的缓存资源，当缓存头表明这是适当的。但是默认的配置是web开发人员最常遇到的。

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

#4

Use a conditional get request with an If-Modified-Since header

使用一个有条件的get请求，使用If-Modified-Since头。

#5

This is actually a very hard issue, and something that you can spend a while engineering the correct solution for.

这实际上是一个非常困难的问题，您可以花一些时间来设计正确的解决方案。

I would recommend publishing your files using a timestamp and/or version built into the url, so instead of:

我建议您使用内置在url中的时间戳和/或版本发布文件，因此，不要:

/media/js/my.js you end up with:

/媒体/ js /我。结果是:

/media/js/v12/my.js or something similar.

/媒体/ js / v12 /我。js或类似的东西。

You can automate the versioning/timestamping with any tool.

您可以使用任何工具自动化版本控制/时间戳。

This has the added benefit of NOT breaking the site as you roll out new versions, and lets you do real side-by-side testing (unlike a rewrite rule that just strips the version and sends back the newest file).

这有一个额外的好处，即在推出新版本时不会破坏站点，并允许您进行真正的并行测试(不像重写规则那样只删除版本并返回最新的文件)。

One thing to watch out for with JS or CSS is when you include dependent urls inside of them (background images, etc) you need to make sure the JS/CSS timestamp/version changes if a resource inside does (as well as rewrite them, but that is possible with a very simple regex and a resource manifest).

有一件事要注意JS和CSS是包括依赖内部url时(背景图片等)你需要确保JS / CSS时间戳/版本变化如果内部资源(以及重写他们,但这是可能的一个非常简单的正则表达式和资源清单)。

No matter what you do make sure not to toss a ?vblah on the end, as you are basically throwing caching out the window when you do that (which is unfortunate, as it is by far the easiest way to handle this)

无论你做什么，最后一定不要抛出?

#6

If you get the "modified time" of the file as a timestamp it will be cached until the file is modified. Just use a helper function (or whatever it is called in other frameworks) to add script/css/image tags that get the timestamp from the file. On a unix like system (wich most survers are) you could simply touch the files to force the modified time to change if necessary.

如果您将文件的“修改时间”作为时间戳，它将被缓存，直到文件被修改。只需使用助手函数(或其他框架中调用的任何函数)添加脚本/css/图像标签，这些标签可以从文件中获得时间戳。在像unix这样的系统上(大多数服务器都是)，您可以简单地触摸文件来强制修改时间(如果需要的话)。

Ruby on Rails uses this strategy in production mode (by default I beleave), and uses a normal timestamp in development mode (to be really sure something isn't cached).

Ruby on Rails在生产模式中使用这种策略(默认情况下我是这么说的)，在开发模式中使用正常的时间戳(以确保没有缓存)。

#7

If you use MAVEN, you can use this, ADD on you pom.xml:

如果您使用MAVEN，您可以使用它。

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

With this you can acess ${timestamp} in your view. Like this sample:

有了它，您可以在视图中执行${timestamp}。像这个样例:

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

#1