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

Question

非常简单,我正在开发一个MVC5应用程序并且已经注意到(最近)我的浏览器似乎正在缓存我在视图中的JavaScript代码@section Scripts { }.

目前我使用Chrome开发,我曾尝试CTRL+F5与CTRL+SHFT+R该重新加载页面,但alert()在JavaScript代码中的注释去掉,我仍然为渲染评论.我也尝试通过隐身模式以及其他浏览器(Firefox,IE)访问我的本地主机并获得相同的行为.这是我的/Home/Index.cshtmlView,它是应用程序启动时加载的默认View.我还尝试在页面中添加一些额外的HTML文本,然后新代码再次生效/显示.

我目前的Chrome版本Version 41.0.2272.118 m是否有人有任何想法可能会发生什么？

---

更新:

我已经使用Chrome中的开发者工具=>常规设置并进行了检查[X] Disable cache (while DevTools is open),然后重复(使用DevTools仍处于打开状态)尝试CTRL+SHFT+R并且CTRL+F5在我的更改未生效之前使用相同的结果.

更新2:

打开DevTools后,我还按下了"刷新"按钮并尝试了"正常/硬/空缓存和硬重新加载"选项,结果相同.为了简化测试,我在下面添加了一个警报,以便在页面加载时显示(并且当前没有警报出现):

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

Answer 1

如果从MVC使用Bundling,则有两个选项可禁用缓存:

1. 使用BundleTable.EnableOptimizations.这指示捆绑即使在调试时也会缩小和优化捆绑.它会根据脚本的内容在流程中生成哈希,因此您的客户浏览器可以长时间缓存此文件.它会在您下次更改文件时生成完整的不同哈希,以便您的客户可以看到您的更改.缺点是您的脚本将变得不可读,您将无法调试它,因此这可能不是您的最佳选择.
2. 使用System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("url", true)解决您的脚本的URL,第二个参数(true)被要求与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它只是一个Bundle使用JsMinify转换(源).这就是我们使用的原因Bundle.

现在,您可以使用此方法添加脚本,以使用散列appendend解析脚本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以防止缓存:

编辑我的文件后:

Answer 2

您可能希望在脚本URL之后添加no_cache变量,如:

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

如果您设法将随机数放在我指定的位置,浏览器将在F5之后自动下载最新版本的脚本