我们也遇到了同样的问题,发现有些人的浏览器甚至不会提取最新版本,除非手动刷新。我们在各个层的缓存方面都遇到了问题,包括我们托管文件的 CDN。
我们还努力维护版本并在出现问题时能够快速重新部署以前的版本。
我们的解决方案(使用基于 vue-cli Webpack 的项目):
1)我们构建发行版以拥有特定于版本的文件夹而不是“静态”。这还可以帮助我们跟踪构建并在需要时“撤消”部署。要更改“static”目录,请更改index.js中“build”下的“assetsSubDirectory”,并将“assetsPublicPath”更改为您的CDN路径。
2)我们使用Webpack 资产清单 https://github.com/webdeveric/webpack-assets-manifest构建一个指向所有资产的manifest.json 文件。我们的清单包含所有文件的哈希值,因为它是一个高安全性应用程序。
3) 我们将版本化文件夹(包含 js 和 css)上传到我们的 CDN。
4) (可选)我们在后端服务器上托管一个动态index.html 文件。后端服务器使用从manifest.json 上的数据提取的模板系统填充样式表和脚本的链接(请参阅#5)。这是可选的,因为您可以使用强制重新加载选项,如下面的评论所示,这不是一个很好的体验,但确实有效。
5)要发布新版本,我们将manifest.json发布到后端服务器。我们通过 GraphQL 端点执行此操作,但您可以手动将 json 文件放在某处。我们将其存储在数据库中,并使用它来填充 index.html,并使用它来使用文件哈希来验证文件(以验证我们的 CDN 没有被黑客攻击)。
结果:立即更新以及轻松跟踪和更改版本的能力。我们发现它会立即在几乎所有用户的浏览器中拉取新版本。
另一个好处是:我们正在构建一个需要高安全性的应用程序,并在我们的(已安全的)后端托管index.html,使我们能够更轻松地通过安全审核。
编辑 2/17/19
我们发现,尽管没有缓存标头,企业网络仍在进行代理缓存。 IE 11 似乎也忽略了缓存标头。因此,一些用户无法获得最新版本。
我们有一个在构建时递增/定义的 version.json。版本号包含在manifest.json中。构建包会自动上传到 S3。然后我们将manifest.json传递到后端(我们在管理区域的入口页面上执行此操作)。然后我们在该 UI 上设置“活动”版本。这使我们能够轻松更改/恢复版本。
后端将“currentVersion”作为所有请求的响应标头。如果 currentVersion !== version (如 version.json 中定义),那么我们会要求用户单击刷新浏览器(而不是强制刷新)。