最佳实践管理所有资产缓存（图像，CSS，JS，一切） [英] Best Practice to manage all asset caching (images, css, js, everything)

问题描述

我正在使用一个中等大小的网络应用程序，并试图想出最好的解决方案，使所有浏览器使用缓存，只有当更新到正在加载的资产时，它才会失效。

I'm working on a moderately-sized web application and trying to come up with the best solution to make all browsers use the cache and only invalidate it when there is an update to the asset being loaded.

根据我在这里和其他地方所做的研究，每个人似乎都同意将一个？v = {version＃}附加到资产（如css或js文件）是一个在资产更新时自动使缓存无效的好方法。 （根据强制浏览器清除缓存和更好地防止浏览器缓存JavaScript文件）

According to the research I've done here and elsewhere, everyone seems to be in agreement that appending a ?v={version#} to an asset such as a css or js file is a great way to automatically invalidate the cache when an asset is updated. (As per Force browser to clear cache and Better way to prevent browser caching of JavaScript files)

但是在我看来，这个解决方案应该推广到驻留在Web服务器上的所有资产。

But it seems to me that this solution should be generalized to all assets that reside on a web server.

所以我的问题是，如果有一个构建脚本通过整个网站的每个src =属性，无论是img，css，或js，并以编程方式附加？= {timestamp}，其中timestamp是文件上次修改的时间。这种方式，每当你从dev推送到临时到生产，只有那些已修改的文件将有一个更改的时间戳，浏览器将知道使这些文件的缓存无效。

So my question is, would it be a good practice to have a build script look through each src="" attribute across the entire website -- whether img, css, or js, and programmatically append ?={timestamp} where timestamp is the time when the file is last modified. This way whenever you push from dev to staging to production, only those files that have been modified will have a changed time stamp, and the browser will know to invalidate the cache for those files.

这种方法有什么缺点吗？

Any flaws with that approach?

注意：考虑这一点，时间戳肯定是不可取的在以后还原的更改的情况下。因此，追加？= {md5（filecontents）}是一个更可靠的方法。

NOTE: Thinking this over a bit more, timestamp would definitely be undesirable in the case of changes that are later reverted. Therefore, appending ?={md5(filecontents)} is a more robust approach. Nevertheless, the question about whether implementing this across all assets and all builds still stands.

推荐答案

找到我相信是可以接受的解决方案什么是一个优雅的方式强制浏览器重新加载缓存的CSS / JS文件？不知道我错过了这在我原来的调查。

Found what I believe to be an acceptable solution at What is an elegant way to force browsers to reload cached CSS/JS files? No idea how I missed this in my original investigation.

对于遇到此问题的人，请注意，我指的是链接页面上引用Google的 mod_pagespeed 插件。这在Web服务器级别工作，因此[它的工作原理与PHP，rails，python，静态HTML - 任何东西。

For anyone who comes to this question, note I'm referring to the first answer on the linked page that references Google's mod_pagespeed plugin for apache. This works at the web server level, thus "[it works] with PHP, rails, python, static HTML -- anything."

这正是我正在寻找的解决方案。这个工具或类似的东西应该被所有的web开发人员使用，以保持缓存逻辑与代码本身正交。

This is precisely the kind of solution I was looking for. This tool, or something similar, should be in use by all web developers to keep caching logic orthogonal to the code itself.

这篇关于最佳实践管理所有资产缓存（图像，CSS，JS，一切）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！