对于开发:使用浏览器设置:例如，Chrome网络选项卡有一个禁用缓存选项。

对于生产:使用服务器端呈现框架或纯JavaScript代码将唯一的查询参数附加到请求(例如，q?Date.now())。

// Pure JavaScript unique query parameter generation
//
//=== myfile.js

function hello() { console.log('hello') };

//=== end of file

<script type="text/javascript">
    document.write('<script type="text/javascript" src="myfile.js?q=' + Date.now() + '">
    // document.write is considered bad practice!
    // We can't use hello() yet
</script>')

<script type="text/javascript">
    hello();
</script>

我已经通过使用解决了这个问题 ETag:

ETag或实体标签是HTTP的一部分，HTTP是万维网协议。它是HTTP为Web缓存验证提供的几种机制之一，这种机制允许客户机发出有条件的请求。这使得缓存更加高效并节省带宽，因为如果内容没有更改，Web服务器不需要发送完整的响应。ETags还可以用于乐观并发控制，1作为一种帮助防止资源的同步更新相互覆盖的方法。

I am running a Single-Page Application (written in Vue.JS). The output of the application is built by npm, and is stored as dist folder (the important file is: dist/static/js/app.my_rand.js) Nginx is responsible of serving the content in this dist folder, and it generates a new Etag value, which is some kind of a fingerprint, based on the modification time and the content of the dist folder. Thus when the resource changes, a new Etag value is generated. When the browser requests the resource, a comparison between the request headers and the stored Etag, can determine if the two representations of the resource are the same, and could be served from cache or a new response with a new Etag needs to be served.

简单的客户端技术

一般来说，缓存是好的…所以有一些技术，取决于你是在开发网站时为自己解决问题，还是在生产环境中控制缓存。

一般访问者不会有相同的体验，当你在开发网站时。由于一般访问者访问站点的频率较低(可能每个月只有几次，除非您是谷歌或hi5 Networks)，那么他们不太可能将您的文件保存在缓存中，这可能就足够了。

如果你想强制一个新版本进入浏览器，你可以在请求中添加一个查询字符串，并在你进行重大更改时增加版本号:

<script src="/myJavascript.js?version=4"></script>

这将确保每个人都获得新文件。它可以工作，因为浏览器会查看文件的URL，以确定缓存中是否有副本。如果您的服务器没有设置为对查询字符串执行任何操作，那么它将被忽略，但是对于浏览器来说，该名称将看起来像一个新文件。

另一方面，如果您正在开发一个网站，您不希望每次保存对开发版本的更改时都更改版本号。那太乏味了。

所以当你在开发你的网站时，一个很好的技巧是自动生成一个查询字符串参数:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

在请求中添加一个查询字符串是一个资源版本化的好方法，但对于一个简单的网站来说，这可能是不必要的。记住，缓存是一件好事。

It's also worth noting that the browser isn't necessarily stingy about keeping files in cache. Browsers have policies for this sort of thing, and they are usually playing by the rules laid down in the HTTP specification. When a browser makes a request to a server, part of the response is an Expires header... a date which tells the browser how long it should be kept in cache. The next time the browser comes across a request for the same file, it sees that it has a copy in cache and looks to the Expires date to decide whether it should be used.

信不信由你，实际上是你的服务器使浏览器缓存如此持久。您可以调整服务器设置并更改Expires报头，但我上面写的小技巧可能是一种更简单的方法。由于缓存很好，所以您通常希望将日期设置为遥远的将来(“far -future Expires Header”)，并使用上面描述的技术强制更改。

如果你想了解更多关于HTTP的信息或者这些请求是如何发出的，一本很好的书是Steve Souders的《高性能网站》。这是对这门学科很好的介绍。

如果使用jQuery，有一个叫做缓存的选项，它会附加一个随机数。

我知道这不是一个完整的答案，但它可能会节省你一些时间。

我发现在资源URL中使用基于时间戳或哈希的区分器的方法存在一个问题，该方法在服务器请求时被剥离。包含样式表链接的页面也会被缓存。因此，缓存的页面可能会请求较旧版本的样式表，但它将得到最新版本，这可能与请求页面不兼容，也可能与请求页面不兼容。

To fix this, you either have to guard the requesting page with a no-cache header or meta, to make sure it gets refreshed on every load. Or you have to maintain all versions of the style file that you ever deployed on the server, each as an individual file and with their differentiator intact so that the requesting page can get at the version of the style file it was designed for. In the latter case, you basically tie the versions of the HTML page and the style sheet together, which can be done statically and doesn't require any server logic.

我在为我的SPA寻找解决方案时遇到了这个问题，它只有一个列出所有必要文件的index.html文件。虽然我得到了一些帮助我的线索，但我找不到一个快速而简单的解决方案。

最后，我编写了一个快速页面(包括所有代码)来自动版本HTML/JavaScript index.html文件，作为发布过程的一部分。它工作完美，只更新新文件根据日期最后修改。

你可以在Autoversion your SPA index.html上看到我的文章。还有一个独立的Windows应用程序。

代码的核心是:

private void ParseIndex(string inFile, string addPath, string outFile)
{
    string path = Path.GetDirectoryName(inFile);
    HtmlAgilityPack.HtmlDocument document = new HtmlAgilityPack.HtmlDocument();
    document.Load(inFile);

    foreach (HtmlNode link in document.DocumentNode.Descendants("script"))
    {
        if (link.Attributes["src"]!=null)
        {
            resetQueryString(path, addPath, link, "src");
        }
    }

    foreach (HtmlNode link in document.DocumentNode.Descendants("link"))
    {
        if (link.Attributes["href"] != null && link.Attributes["type"] != null)
        {
            if (link.Attributes["type"].Value == "text/css" || link.Attributes["type"].Value == "text/html")
            {
                resetQueryString(path, addPath, link, "href");
            }
        }
    }

    document.Save(outFile);
    MessageBox.Show("Your file has been processed.", "Autoversion complete");
}

private void resetQueryString(string path, string addPath, HtmlNode link, string attrType)
{
    string currFileName = link.Attributes[attrType].Value;

    string uripath = currFileName;
    if (currFileName.Contains('?'))
        uripath = currFileName.Substring(0, currFileName.IndexOf('?'));
    string baseFile = Path.Combine(path, uripath);
    if (!File.Exists(baseFile))
        baseFile = Path.Combine(addPath, uripath);
    if (!File.Exists(baseFile))
        return;
    DateTime lastModified = System.IO.File.GetLastWriteTime(baseFile);
    link.Attributes[attrType].Value = uripath + "?v=" + lastModified.ToString("yyyyMMddhhmm");
}