仅当它们已更改时才强制浏览器重新加载 css/js

Posted 2023-02-22

【中文标题】仅当它们已更改时才强制浏览器重新加载 css/js

【英文标题】：Forcing the browser to reload css/js only if they have changed

【发布时间】：2012-08-12 19:22:27

【问题描述】：

有很多关于我的问题的问题和答案[我希望浏览器永远缓存 js/css。在新版本中，如果某些 js/css 文件已更新，浏览器应重新加载并缓存它们。]

这个解决方案对我来说似乎最合适： What is an elegant way to force browsers to reload cached CSS/JS files?

但是，只有一件事我无法弄清楚。 该解决方案利用 last_modified_time。但是，我不允许使用它。我需要使用其他机制。

有哪些选择？是否有可能在构建期间预先计算版本并通过构建脚本在 jsps 中更新（替换）它们（在部署之前，以便不在运行时计算版本号）？为此目的有任何现有工具吗？我使用 Java/Jsp。

【问题讨论】：

有点烦人的解决方案，但您可以将修订号保存在文件中，并通过 php 将其动态附加到 css 文件名。但是每次你想强制用户 realod CSS 你需要编辑这个文件。

“但是，我不允许使用它”为什么？

@GolezTrol 因为一些遗留的构建过程。部署中所有文件的最后修改时间更改与它们的更改无关。

@neworld 你是在建议我保留一个 的存储库吗？或者我应该将修订号存储在 css 文件本身中（暂时可以使用 SVN 来完成）。在每个参考文献中，我都会阅读此文件并使用参考文献中的版本号？

@TJ-：不管你把它存储在哪里。如果需要，可以存储在 DB 中。这种方法有一个好处，如果你做了不是很重要的升级，你可以不强制重新加载（修改cmet或css格式化）。

【参考方案1】：

我们总是使用

file.css?[deploytimestamp]

这样，CSS 文件会在客户端为每个部署缓存。我们缩小的 javascript 也是如此。这是您的选择吗？

【讨论】：

这是可能的，但如果 js/css 在部署之间没有改变，我不希望重新加载它。

不会。 file.css?v=1 将被缓存而不是重新加载，然后将其更改为 v=2 并且 file.css?v=2 被缓存一次，然后从缓存中使用（直到再次更改版本...））

@DuncanNZ - 但这不是大卫的建议 - 他附加的是部署的时间戳而不是版本。

如何在asp.net webforms的所有js引用中自动放置deploytimestamp？

【参考方案2】：

部署后生成每个 css 文件的 md5-hash。在 css 的 url 中使用这个哈希而不是时间戳。

file.css?[hash of file.css contents]

在部署后计算一次哈希并存储它们以获得一些性能可能是明智的。您可以将它们存储在数据库中，甚至可以存储在 PHP 数组中的单独文件中，该文件包含在您的网站代码中。

【参考方案3】：

这可能不是最好的方法，但这就是我现在正在做的：

我所有的 js/css 都有一个 [source control = svn] 修订号 我的 jsp 中的引用类似于 /foo/path1/path2/xyz000000/foo。 构建步骤 1 - 生成 css|js 文件及其修订号的映射 构建步骤 2 - 将 jsps 中的 xyz000000 引用替换为 svn 修订的哈希 url 重写器中的一条规则，用于指导所有 /foo/path1/path2/xyz/foo。到 /foo/path1/path2/foo.[js|css] 无限缓存css|js文件 只要有提交，修订号就会改变，.jsp 中的引用也会改变