VueJS/浏览器缓存生产版本

2024-04-23

我有一个 VueJS 应用程序。每当我跑步时npm run build它创建了一组新的dist/*文件,但是,当我将它们加载到服务器上(删除旧版本后)并在浏览器中打开页面时,它会加载旧版本(我假设从缓存)。当我刷新页面时,它加载新代码没有问题。

这是我的index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <meta http-equiv="cache-control" content="max-age=0" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="expires" content="-1" />
        <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
        <meta http-equiv="pragma" content="no-cache" />
        <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

有没有办法强制它每次加载新代码或(理想情况下)检查旧文件是否从服务器中消失,然后刷新浏览器?


我们也遇到了同样的问题,发现有些人的浏览器甚至不会提取最新版本,除非手动刷新。我们在各个层的缓存方面都遇到了问题,包括我们托管文件的 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 中定义),那么我们会要求用户单击刷新浏览器(而不是强制刷新)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VueJS/浏览器缓存生产版本 的相关文章

随机推荐