Angular 上的缓存破坏答案

【问题标题】：Cache busting on AngularAngular 上的缓存破坏
【发布时间】：2021-10-25 12:47:22
【问题描述】：

我有一个 Angular 应用程序，部署后我经常收到最终用户的抱怨，他们无法看到新功能（他们仍然需要 ctrl + f5在更改反映之前）。

我需要加入缓存破坏吗？经过一番谷歌搜索，我看到了以下命令：

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"
},

【问题讨论】：

试试：stackoverflow.com/a/53233187/5980993
同时添加您的构建配置。
为什么需要禁用缓存？
@AkshayAmar 见：medium.com/acute-angular/…
因为这就是为什么您的客户没有更新他们的应用程序 = 浏览器的缓存，这就是他们要 ctrl + f5 => 清理缓存的原因

标签： javascript angular typescript

【解决方案1】：

我认为这是浏览器的缓存问题。

我的建议是在您的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。

【讨论】：

这里imgur.com/a/c8IROf0?
@AkshayAmar 在第 7 行之后会更干净
您能向我解释一下这 3 行实际上是做什么的吗？
@AkshayAmar TDLR，为了防止您的浏览器缓存，实际上某些选项在最新版本中可能已弃用，但最好保留它们，您不知道您的浏览器使用哪些版本客户..更多细节，你可以举个例子：no-store，复制它并在Cache-Control和cntrl + f搜索它，你会得到详细的答案，等等..
这个解决方案的缺点是什么？