每次用户访问网站时如何加载最新的javascript文件[重复]答案

【问题标题】：how to load the latest javascript files every time the user visits the website [duplicate]每次用户访问网站时如何加载最新的javascript文件[重复]
【发布时间】：2013-01-27 03:59:35
【问题描述】：

可能重复：
How do I force the refresh of javascript files in a browser?

我在基于 ASP.NET MVC 的应用程序和 javascript 文件包含在 .csHtml 文件中。

我需要这样做，以便用户不必执行 [Ctrl+F5] 或手动清除缓存，并且每次在浏览器中加载最新版本的 javascript 文件。

如果可以提供一些示例，我将不胜感激。

建议的主要技术是在包含文件时使用虚拟参数。此外，每次修改 js 文件时，我都不会手动更改参数。如果可以自动完成，需要一些示例。

编辑 1：请通过 ASP.NET MVC 预期提供解决方案。

【问题讨论】：

我已经在stackoverflow.com/questions/14524203/… 提出了类似的问题，但在我得到完整答案之前它就关闭了。建议的主要技术是在包含文件时使用哈希等作为参数。需要更多有关如何执行此操作的帮助。
How do I force the refresh of javascript files in a browser?（和 this one 等）的副本。
@nnnnnn 每次修改js文件都不需要手动修改参数
如果您使用查询路径技术 (something.js?randomParam=1234)，您根本不需要手动更改参数，您可以在构建过程中自动更改，或者您有一些服务器端代码生成一个随机数。在客户端，这使得浏览器每次都重新加载 JS 文件，无论它是否被更改。
你使用的是什么版本的 MVC？默认情况下，最新版本包括捆绑 (asp.net/mvc/tutorials/mvc-4/bundling-and-minification)，它将满足您的要求，例如，每次文件更改时它都会更改一个参数。

标签： javascript jquery asp.net-mvc-3

【解决方案1】：

在 JS 文件的文件名中添加版本号（就像 jQuery 一样）。然后，每当您修改 JS 文件时，都会更新版本并更改包含它的 HTML 文件。

jQuery文件命名示例：

jquery-1.8.3.js
jquery-1.9.0.js

这使您可以在服务器上为 JS 文件本身设置非常长的缓存，这确实有助于提高您网站的性能。但是，每当您修改 JS 文件时，查看器会立即获取新的 JS 文件，因为新命名的文件会被新的 HTML 文件拉取，因为它们不在浏览器缓存中。

【讨论】：

我的应用程序中的js文件太多，每次都更改文件名是不可行的。该应用程序仍在开发中，每天的更改非常普遍。
这不是他想要做的最好的方式。
@MikeSmithDev - 当有新版本时，您如何获得 JS 文件的长期缓存和即时更新？您的答案只是另一种唯一名称的方法-相同的通用解决方案。更改文件名是获得这两个优点的唯一方法。
在我看来，文件名中包含版本号是第三方 JS 包含的最合理的选择。对于您自己的脚本，如果可用的话，某种构建/部署工具版本控制会更好（根据 Mike 的建议）。
@nnnnnn - 您不只是在谈论一个为您管理唯一文件名/URL 的工具吗？概念是一样的，对吧？

【解决方案2】：

您想使用Bundling and Minification。根据您的 MVC 版本，实现略有不同。在最新版本中，默认使用它。

Bundling and Minification 会将您的所有脚本（和样式表）合并并缩小到一个文件中（或多个文件，具体取决于您的使用方式），并为它们提供一个独特的参数。每当该特定包中的文件发生更改（因此用户需要下载新文件）时，该参数就会自动更改。

对于 MVC3，您需要安装 Microsoft Web Optimization。

然后在你的 global.ascx 中，你会做这样的事情并从Application_Start 调用它：

private static void SetupBundling()
{
     var jsBundle = new Bundle("~/Scripts/js", typeof(JsMinify));
     jsBundle.AddDirectory("~/Scripts/", "*.js", false);
     jsBundle.AddDirectory("~/Scripts/anothr-good-folder/", "*.js", false);
     BundleTable.Bundles.Add(jsBundle);

     var randomBundle = new Bundle("~/Scripts/random", typeof(JsMinify));
     randomBundle.AddFile("~/Scripts/random/main.js");
     randomBundle.AddFile("~/Scripts/random/cool.js");
     BundleTable.Bundles.Add(randomBundle);

     var cssBundle = new Bundle("~/Content/css", typeof(CssMinify));
     cssBundle.AddDirectory("~/Content/", "*.css", false);
     BundleTable.Bundles.Add(cssBundle);
}

因此，第一个捆绑包将捆绑您的 ~/Scripts 文件夹中的每个 .js 文件。在您的头文件中，您可以像这样引用它：

<script src="@Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")" type="text/javascript"></script>

它会呈现为：

<script src="/Scripts/js?v=-2573834892993289" type="text/javascript"></script>

并且任何时候您的.js 文件之一更改（或.css），参数也会更改。

CSS 包的类似实现，如果您只想在某些页面上引用 randomBundle。

【讨论】：

我正在使用 MVC3 捆绑和缩小看起来是一个不错的方法。但我还有一点。并非所有 javascript 文件都在开始时加载。它们根据需要加载。因此，我不会将它们捆绑在一起。
@atur 您可以根据需要创建任意数量的捆绑包，并根据需要引用捆绑包。您可以仅按文件或整个目录创建捆绑包。
so @MikeSmithDev 即使我在运行时添加/包含 javascript 文件，这种方法也可以工作
@atur 你能解释一下你的意思吗？我可能最好将所有自定义脚本放入一个包中，然后根据需要引用该包。当它们被合并和缩小时，用户下载一个文件一次的好处将超过多个较小的请求。

【解决方案3】：

您可以通过在每个 javascript 文件 URL 后附加随机哈希或数字 URL 参数来进行缓存清除，如下所示：

http://www.bestsiteonearth.yes/cool_javascript.js?cache_buster=2187sasas1289012890aohkjaiosa0990

由于每次加载页面时该数字都不同，因此不会缓存 URL。更多信息here。教程提供了 PHP 示例，但如果您知道如何使用任何语言创建哈希或随机数并可以将其附加到 URL，那么您就可以开始了。

【讨论】：

如果您要这样做，那么您最好将服务器配置为不允许浏览器缓存（并失去缓存的所有性能优势）。
不正确。如果您只对 JavaScript 文件执行此操作，则仍然可以缓存其余文件。图片、HTML、CSS 等。有选择地这样做并不罕见，而且在线广告系统避免广告缓存的方式。
杰克，我说的是配置服务器停止缓存 JS 文件，这解决了问题，但失去了 JS 缓存的所有性能优势。

【解决方案4】：

我个人使用 PHP，但我这样做的方法是在输出缓冲区中搜索静态文件，例如图像、脚本和样式表（以及音频、视频等），然后从文件系统中检索它们的修改时间并追加它是/t=TIMESTAMP。然后我使用.htaccess 去除时间戳并获取原始文件名。这优于查询字符串，因为许多客户端不会缓存带有查询字符串的文件，而且它也优于版本控制，因为它只需修改文件即可自动更新。

【讨论】：