Javascript 缩小缓存问题

Posted 2023-02-18

【中文标题】Javascript 缩小缓存问题

【英文标题】：Javascript Minification Caching Issue

【发布时间】：2012-01-14 08:57:48

【问题描述】：

我有 ASP.Net MVC 3 应用程序。我在使用 MSBuild 进行后期构建期间使用 YUICompressor.Net 来缩小 javascripts 和 Css 文件。

生成的最小化 javascript 文件是 JSMin.js 和 CssMin.css 我的母版页引用这些文件如下：

link rel="stylesheet" href="@Url.Content("~/Content/CssMin.css")" type="text/css">

script type="text/javascript" src="@Url.Content("~/Scripts/JsMin.js")" >

现在的问题是缩小版本被缓存在最终用户浏览器中，因此我们在 te javascript/css 中的新修复不会反映在最终用户浏览器中，因为这些文件会因为使用相同的文件名而被缓存。我正在寻找某种干净的过程，它将构建带有版本号的缩小的 javascript 和 Css 文件，如 JsMin1.0.js 和 CssMin1.1.js 并自动更新以下参考

link rel="stylesheet" href="@Url.Content("~/Content/CssMin.css")" type="text/css">

script type="text/javascript" src="@Url.Content("~/Scripts/JsMin.js")" >

我们非常感谢您的帮助。谢谢。

【问题讨论】：

澄清一下：您是否正在寻找一种可以自动附加版本号（然后更新对它的引用）的工具？

是的，某种工具，工作量很小。

【参考方案1】：

您需要在 CDN 静态媒体资源 URL 中使用缓存清除：

http://codebetter.com/karlseguin/2010/01/11/asp-net-performance-part-3-cache-busting/

您无法清除浏览器缓存。

【讨论】：

感谢我不知道的信息。但是查询字符串附加方法的问题在某些浏览器版本中失败，尤其是 IE8。由于我们的网站是面向公众的网站，面向所有不同的可用浏览器类型和版本，正在寻找涵盖所有情况的方法。

查询字符串方法不会失败。如果您另有主张，请解释您的理由。

缓存 js 和 css 文件有问题... :o(

【参考方案2】：

是的。您需要更改网址。否则，用户的浏览器 cche 很可能会提供上次查看的版本。最好对资源进行版本控制，以便版本字符串成为 url 的一部分。您通常希望将此版本字符串放在路径或文件名中，而不是查询字符串中，以便它与所有代理和 CDN 配合使用。这无疑是一种痛苦。您不仅需要对文件进行版本控制，还必须确保所有链接都已更新，因此您需要手动更改它们，或者有一个构建过程或应用架构来为您处理这些问题。

我有一个 OSS 项目，RequestReduce，它在运行时对 css 和 js 进行了缩小和组合。该解决方案处理所有链接重写。唯一的问题是，当您更改内容时，您必须刷新 RequestReduce 缓存，这很容易从应用程序提供的仪表板中完成。

它还精灵和优化背景图像。

查看http://www.requestreduce.com 了解更多信息。

【讨论】：

谢谢马特。这种方法似乎很有前途。让我试一试，我会回来的。顺便请您确认一下 Etag 是否适用于所有不同的浏览器（从低版本到高版本）？

它应该适用于任何符合 RFC 的 ETag 实现。也就是说，我已经用所有“现代”浏览器进行了测试，但没有测试过旧的 IE 版本，但没有理由相信这会失败。

【参考方案3】：

您可以使用https://github.com/vincpa/mvc.resourceloader 之类的解决方案，该解决方案将负责浏览器缓存并设置适当的 etag 标头并维护版本。再说一次，我写了这个库，所以我有偏见:)

在我看来，最好使用哈希而不是版本号。这样您就无需跟踪您使用的版本。

此外，您希望避免在查询字符串中添加版本号，因为某些代理不会缓存包含查询字符串的资源。