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

Force browser to refresh javascript code while developing an MVC View?

提问by Analytic Lunatic

Pretty straight-forward, I'm developing an MVC5 application and have noticed (lately) that my Browser appears to be caching the JavaScript code I have on the view within @section Scripts { }.

非常简单，我正在开发一个 MVC5 应用程序，并且（最近）注意到我的浏览器似乎正在缓存我在@section Scripts { }.

Currently I am developing with Chrome and I have tried CTRL+F5& CTRL+SHFT+Rwhich reloads the page, but the alert()I uncommented within the javascript code is still rendering as commented. I also tried going to my localhost through Incognito Mode as well as other Browsers (Firefox, IE) and am getting the same behavior. This is my /Home/Index.cshtmlView, which is the default View which loads when the application starts. I have also tried adding some extra HTML text into the page and again the new code is not taking effect/showing.

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

My current Chrome version is Version 41.0.2272.118 mif anyone has any ideas what might be going on?

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

---

---

UPDATE:

更新：

I have gone under the Developer Tools => General Settings in Chrome and checked [X] Disable cache (while DevTools is open)and then repeatedly (with DevTools still open) tried CTRL+SHFT+Rand CTRL+F5with the same results of before where my changes are not taking effect.

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

UPDATE 2:

更新 2：

With DevTools open I have also held the Refresh button down and tried Normal/Hard/and Empty Cache & Hard Reload options all with the same result. For simplicity of testing I added an alert in the below to dispaly as soon as the page loads (and currently no alert comes up):

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

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

回答by Mahmoud Ali

If you are using Bundling from MVC, you have two options to disable caching:

如果您使用来自 MVC 的 Bundling，则有两个选项可以禁用缓存：

1. Use BundleTable.EnableOptimizations. This instructs the bundling to minify and optimize your bundle even while debugging. It generates a hash in the process, based on the content of the script, so your customers browsers can cache this file for a long time. It will generate a whole different hash the next time your file changes, so your customers can see your changes. The downside is that your script will become unreadable and you won't be able to debug it, so this might not be your best option.
2. Use System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("url", true)to resolve your script's URL, the second parameter (true) is requiringa hash to be generated with the URL, thus, preventing caching from your browser when you change the file. This is exactly the same hash generated in the first option, but without minifying.

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

I created a small demo showing that the second option prevents caching from happening, the trick is getting the hash generated from your script's content without minifying your script.

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

I created a script file called myscript.jswith this content:

我创建了一个myscript.js使用以下内容调用的脚本文件：

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

Then I added this to my BundleConfig.cs:

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

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

If you add a ScriptBundle, you will get a minified response again, since ScriptBundleis just a Bundleusing JsMinifytransformation (source). That's why we just use Bundle.

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

Now you can just add your script using this method to resolve the script URL with the hash appendend. You can use the Script.Render

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

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

Or the scripttag:

或script标签：

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

Either way will generate a URL with a hash to prevent caching:

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

After editing my file:

编辑我的文件后：

回答by szinter

You might want to add a no_cache variable after your script url like:

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

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

If you manage to put a random number to the place i indicated, the browser will automatically download the latest version of the script after an F5

如果你设法在我指定的地方放一个随机数，浏览器会在 F5 后自动下载最新版本的脚本

回答by Etienne

A quick trick that solves this problem consists of opening the script file in a new tab, then refresh it on this page. If you happen to have Chrome dev tools open it will even refresh it there.

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

From dev tool you can even easily right click-open in new tab the script.

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