在开发 MVC 视图时强制浏览器刷新 javascript 代码？答案

【问题标题】：Force browser to refresh javascript code while developing an MVC View?在开发 MVC 视图时强制浏览器刷新 javascript 代码？
【发布时间】：2020-10-04 22:11:34
【问题描述】：

非常直截了当，我正在开发一个 MVC5 应用程序，并且（最近）注意到我的浏览器似乎正在缓存我在 @section Scripts { } 内的视图中的 JavaScript 代码。

目前我正在使用 Chrome 进行开发，我已经尝试过 CTRL+F5 和 CTRL+SHFT+R 重新加载页面，但我在 javascript 代码中未注释的 alert() 仍然按照注释呈现。我还尝试通过隐身模式以及其他浏览器（Firefox、IE）访问我的本地主机，并且得到了相同的行为。这是我的/Home/Index.cshtml 视图，这是应用程序启动时加载的默认视图。我还尝试在页面中添加一些额外的 HTML 文本，但新代码再次没有生效/显示。

我当前的 Chrome 版本是 Version 41.0.2272.118 m，如果有人知道会发生什么？

更新：

我已经在 Chrome 中的开发者工具 => 常规设置下检查了[X] Disable cache (while DevTools is open)，然后反复（DevTools 仍然打开）尝试了CTRL+SHFT+R 和CTRL+F5，结果与之前我的更改未采取的结果相同效果。

更新 2：

打开 DevTools 后，我还按住了 Refresh 按钮并尝试了 Normal/Hard/和 Empty Cache & Hard Reload 选项，结果都相同。为了简化测试，我在下面添加了一个警报，以便在页面加载后立即显示（目前没有警报出现）：

$(document).ready(function () {
            alert("Test");
            // Other Code/Functions -- No Error showing in Console
});

【问题讨论】：

开发者工具打开时可以禁用 Chrome 的缓存：stackoverflow.com/a/7000899/1710624
您能用@section Scripts { } 发布视图的内容供我们查看吗？如果我们能看到你做了什么，可能会更容易。同样使用chrome打开开发人员工具（F12）并单击cog打开设置，有一个“禁用缓存”复选框，勾选它，现在如果您在打开开发人员工具的情况下刷新页面，它将不会使用缓存跨度>
另外，这可能无济于事，但是当 chrome 调试面板打开时，您可以按住页面重新加载按钮以获取重新加载选项。选择空缓存和硬重新加载也可以从缓存中清除任何后续部分加载。请参阅stackoverflow.com/questions/14969315/… 了解更多信息。
您是否使用 MVC 中的捆绑/缩小或任何其他对脚本文件进行任何类型转换的机制？
@MahmoudAli，是的，我用BundleConfig.cs 设置了一些捆绑包，但这段代码特别是直接在我的视图上的@section Scripts { } 中呈现——现在对视图代码的更改没有显示看起来都可以。

标签： javascript asp.net-mvc browser cross-browser browser-cache

【解决方案1】：

如果您使用Bundling from MVC，您有两个选项可以禁用缓存：

使用BundleTable.EnableOptimizations。这指示捆绑即使在调试时也要缩小和优化您的捆绑包。它在此过程中根据脚本的内容生成哈希，因此您的客户浏览器可以长时间缓存此文件。下次您的文件更改时，它将生成一个完全不同的哈希，因此您的客户可以看到您的更改。缺点是您的脚本将变得不可读并且您将无法对其进行调试，因此这可能不是您的最佳选择。
使用System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("url", true) 来解析脚本的URL，第二个参数（true）是requiring 与URL 一起生成的哈希值，因此，当您更改文件时，防止浏览器缓存。这与第一个选项中生成的哈希完全相同，但没有缩小。

我创建了一个小演示，显示第二个选项可以防止发生缓存，诀窍是在不缩小脚本的情况下获取从脚本内容生成的哈希。

我创建了一个名为myscript.js 的脚本文件，内容如下：

$(document).ready(function () {
    alert('a');
});

然后我将此添加到我的BundleConfig.cs：

// PLEASE NOTE this is **NOT** a ScriptBundle
bundles.Add(new Bundle("~/bundles/myscripts").Include(
    "~/Scripts/myscript*"));

如果添加ScriptBundle，您将再次获得缩小的响应，因为ScriptBundle 只是使用JsMinify 转换（source）的Bundle。这就是为什么我们只使用Bundle。

现在您可以使用此方法添加脚本来解析带有哈希附加的脚本 URL。您可以使用Script.Render

@Scripts.Render(System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true))

或者script标签：

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true)"></script>

无论哪种方式都会生成一个带有哈希的 URL 以防止缓存：

编辑我的文件后：

【讨论】：

有时你不能投票 n^n 次回复真是太可惜了……太好了！
很好的答案，它对我来说就像一个魅力！谢谢
不错的一个！工作完美。谢谢
即使BundleTable.EnableOptimizations = false，缩小是否强制获取最新的javascript？因为在 DEV 上，你没有这是真的。谢谢
提供最新 JS 文件的不是缩小本身。它是生成的哈希值。我的解决方案正是这样做的：即使 EnableOptimizations 设置为 false，也会强制生成哈希。

【解决方案2】：

您可能希望在脚本 url 之后添加一个 no_cache 变量，例如：

<script src="js/stg/Stg.js?nocache=@random_number"></script>

如果你设法在我指定的位置输入一个随机数，浏览器将在 F5 后自动下载最新版本的脚本

【讨论】：

【解决方案3】：

解决此问题的快速技巧包括在新选项卡中打开脚本文件，然后在此页面上刷新它。如果您碰巧打开了 Chrome 开发工具，它甚至会在那里刷新它。

从开发工具中，您甚至可以轻松地在新选项卡中右键单击打开脚本。

【讨论】：