防止浏览器 javascript 缓存问题的最佳实践答案

【问题标题】：Best practice to prevent browser javascript caching issues防止浏览器 javascript 缓存问题的最佳实践
【发布时间】：2017-01-11 12:34:00
【问题描述】：

作为开发人员，我们都遇到过这个问题：您需要在网站上进行维护，并且有客户端脚本：foo.js 现在您对foo.js 进行更改并对其进行测试，签入，将新代码部署到测试环境。现在测试用户声称您没有解决问题，因为他的浏览器仍然在缓存中保存旧的foo.js。

我正在考虑创建文件内容的哈希并在文件名中使用它。 foo_8c736521.js 我可以创建哈希 -> 重命名文件 -> 并更新 BundleConfig.cs 但我希望这可以在 Visual Studio 中自动完成。

是否有某种库可以在 C# .NET 中为我处理这个问题？

我已将此转换添加到我的 web.Test.config 文件中：

  <system.web>
        <compilation debug="false" targetFramework="4.5"  xdt:Transform="Replace" />
  </system.web>

现在在此环境中启用了 Bundle 优化。它有效。

【问题讨论】：

foo.js?v=
@aabilio 这将强制浏览器始终获取文件，从而有效地禁用缓存机制。我只想在实际文件内容发生变化时禁用缓存。
哦，我明白了，我不明白这个问题。所以，如果你控制服务器，我会使用 Etag 和/或 Last-Modified HTTP Headers...
您必须为每个文件版本创建一个唯一的 URL（使用查询字符串或更改文件名）。如果您使用的是 ASP.NET，您应该在 Google 上搜索“bundle”。如果你使用的是 ASP.NET Core，你应该检查this blog post
可能重复：How can I force clients to refresh JavaScript files?

标签： javascript c# browser-cache

【解决方案1】：

如果您使用的是 ASP.NET 4.5 或更高版本，请使用内置的 JS Bundler。它将跟踪捆绑包中包含的 JS 文件的更改，并仅在文件更改时发出新的哈希。

public class BundleConfig {
    public static void RegisterBundles(BundleCollection bundles) {
         bundles.Add(new ScriptBundle("~/bundles/custom").Include(
             "~/Scripts/foo.js",
             "~/Scripts/bar.js"
         ));
    }
}

对于 MVC - 在 Global.asax 中注册包：

protected void Application_Start() {
    // ...
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

见ASP.NET - Bundling and Minification

【讨论】：

这已经在项目中实现了。我只需要在测试环境 web.config 中设置 debug="false" 选项即可启用捆绑优化。
debug="true" 可用于开发环境中禁用捆绑和缩小，以便更轻松地调试脚本。