在开发时防止缓存 javascript 和 css

Question

我目前正在 Visual Studio 2010 中开发和运行我的网站。该网站在编译后在 Google Chrome 中启动。

在此过程中的某个地方，事物正在被缓存。我可以更改 JavaScript 函数，但除非我清除 Chrome 中的缓存，否则旧版本的脚本将会运行。

我正在运行 Visual Studio 2010、.net 3.5 和最新版本的 Google Chrome。

是否可以每次自动加载最新的脚本？我真的不想每次保存和编译时都在脚本标记上添加 ? 参数。每次都必须清除缓存，这已经变得很旧了。

谢谢！

Answer 1

打开 Chrome 开发工具。右下角有一个齿轮图标。单击它，然后单击“禁用缓存”。

还有一个选项“停靠到右侧”。尝试一下，也许你会喜欢它！

Answer 2

您还可以让服务器将以下标头添加到从服务器发出的请求中：

cache-control:no-store, no-cache, must-revalidate, max-age=0

此外，您还可以使用禁用缓存的命令行标志来启动 chrome。为此，请创建一个新的快捷方式并在目标框中键入以下内容，并替换为您自己的计算机用户名：

C:\Users\<username here>\AppData\Local\Google\Chrome\Application\chrome.exe --disk-cache-size=1 -media-cache-size=1

标志必须设置为 1，因为 0 是无限的。数字以字节为单位。

希望这有帮助。

编辑： 要在没有缓存的情况下重新加载页面一次，请按

CTRL+SHIFT+R

。这应该适用于所有浏览器。

Answer 3

我使用的简单方法是每次打开 chrome 时按 CTRL-F5，或者，您可以在运行应用程序之前终止本地 Web 服务器：

请参阅 chrome 快捷键列表以获取更多阅读：键盘快捷键。请注意，CTRL-F5 以及 SHIFT-F5 将重新加载当前页面，同时忽略缓存的内容。

我通常使用上述方法，而不是完全禁用缓存（从 chrome 设置），因为这是我想取消缓存的本地化情况。所有其他情况（如正常浏览）我更愿意保留缓存。

Answer 4

您始终可以使用一些参数导入 javascript 源：

<script type="text/javascript" src="../scripts/scriptFile.js?28361823"></script>

大多数人使用 getTimeInMillis() 函数来填充请求。这将绕过缓存（通常），您将获得最新的数据。

这也会迫使您的用户再次获取 JavaScript，所以要小心。

Answer 5

如果您想防止在浏览器中缓存 css 或 javascript 文件，请在链接中使用随机版本 ID。例如使用这个：

<link   href=<%="'mystyle.css?version="+ DateTime.Now.ToString("yyyyMMddhhmmss") +"'"%>   rel="stylesheet" type="text/css"/>

其中 myStyle.css 是样式表文件，DateTime.Now.ToString("yyyyMMddhhmmss") 函数用于生成随机的不同版本 ID。

Answer 6

许多应用程序的 Js 和 css 版本更改各不相同。 您可以在这里查看详细信息。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

1. 您需要在Index.html中定义一个meta标签，您可以按如下方式执行此操作。 使用 HTML：

2. 您可以为每个 Ajax 请求添加 Header。

        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
        response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
        response.setHeader("Expires", "0"); //Proxies.
   

3. 使用ASP.NET-MVC，您可以将版本添加到_Layout.cshtml，如下所示。

   @{
             string versionId = DateTime.Now.ToString("yyyyMMddhhmmss");
     }
     <link href="~/assets/libs/toastr/nuget/content/content/toastr.min.css?version={@versionId}" rel="stylesheet" />
     <link href="~/assets/css/bootstrap.css?version={@versionId}" rel="stylesheet" />