Angular上的缓存破坏



我有一个angular应用程序,在部署后我经常收到终端用户的抱怨,他们无法看到新功能(他们仍然必须在更改反映之前按ctrl+f5)。

我需要合并缓存破坏吗?在google上搜索了一下之后,我看到了下面的命令:

ng build --output-hashing=all

我尝试在我的部署管道中使用它,它能够解决一些问题,但不是全部。ctrl+f5对于。

我如何确保我的应用程序为我的最终用户更新,而不需要他们清除自己的缓存?

{
"name": "portfolio",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"prod-build-dev-old": "ng build --prod --configuration=dev --build-optimizer",
"prod-build-dev": "ng build --prod --configuration=dev --build-optimizer --aot --output-hashing=all",
"prod-build-staging": "ng build --prod --configuration=staging --build-optimizer"
},

我认为这是浏览器的缓存问题。虽然Angular默认包含了缓存破坏功能,但它需要你手动关闭index.html上的缓存,以便让它有机会运行。

我的建议是在你的index.html中增加这三行:

<!doctype html>
<html>
<head>
...
<!--  Add the 3 following lines -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="-1">
...
</head>
<body>
...
</body>
</html>

一旦部署了这些更新,您的客户端就不必在每次部署后都进行ctrl + f5以获得新特性。

有关浏览器缓存控制的更多信息,请查看:MDN中的cache - control。

相关内容

  • 没有找到相关文章

最新更新