JS 文件缓存在通过脚本标记与 GET 包含时有所不同

Question

过去几天我一直被困在缓存地狱中，虽然我开始得到它仍然有点挣扎。

期望的结果
我想在站点上包含一个 JS 文件并缓存它和/或仅在服务器上更改文件时获取文件的新副本。我不能在文件名中使用版本标签或哈希。文件名需要保持一致。

我在哪里
从我使用 Etags 阅读本文后所了解的内容来看，这是解决此问题的完美解决方案。它们将在文件更改时更新，如果标签不匹配，将发送文件的新版本。当我通过浏览器请求文件时，这似乎有效

所以你可以看到，在第一个请求中，我得到 200，下载大小为 292 B，在第二个请求中，因为标签匹配，我得到 304，下载大小为 137 B（我假设只是标题大小）。伟大的！这正是我想要的。

我的请求标头查找 etag：

我的问题
现在当我从浏览器请求文件时这有效，但在脚本标记中添加 js 文件不会以相同的方式发送请求标头。所以，打开下面的html文件

<!DOCTYPE html>
<html>
    <body>
        <script src="https://myTestSite.com/testCache.js"> 
        </script>
    </body>
</html>

我的 js 文件每次都被提取，因为if-none-match请求头不存在。使用 html 脚本标记时，如何复制在上述场景中观察到的行为？

TL;DR
在使用 html 脚本标签而不是简单的浏览器 GET 请求时，如何使用 Etags 仅请求修改的 JS 文件？

Answer 1

我让它工作了，但并不完全像我预期的那样。这就是我最终所做的。

在我想要提供 js 文件的目录中，我添加了一个 .htaccess 文件

<FilesMatch "\.(js|css)$">
    Header set Cache-Control "no-cache, must-revalidate"
</FilesMatch>

我意识到，如果我在本地将 js 文件添加到缓存，它总是会从本地缓存中提取，甚至不会向服务器发出请求。因此，即使 Etag 已更改，我的客户端也永远不会知道，因为该文件已经在本地缓存。

因此，我决定根本不缓存该文件并重新验证。因此，虽然我确实有一点 http 标头的开销，但我总是会获得最新的文件，而无需每次都获取整个文件。