Angular应用中的资产缓存问题

Question

我有一个Angular 8应用程序，在部署新版本时遇到了缓存问题。基本上，我注意到，当使用 ng build --prodజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజజ outputHashing 选项设置为 all 在我 angular.json. 因此，所有由 ng build 在它们的名字中都有一个内容哈希，这有两个原因，一是浏览器可以安全地长期缓存我的应用程序的文件（如果在新版本中文件的内容发生变化，名称也会发生变化，因此所有客户端都会重新加载文件）。

1. 浏览器可以安全地长期缓存我的应用程序的文件 (如果文件的内容在新版本中发生变化，名称就会改变，因此文件会被所有客户端重新加载)
2. 如果一个文件从一个版本到另一个版本没有变化，它将不会被重新下载。

(注意：index.html永远不会被缓存)

所以这看起来很有效率。

现在的问题是，并不是所有的文件都有这个破缓存的名字。在 angular.json 只是在构建过程中 "按原样 "复制。因此，如果我发布了一个新版本的应用程序，我不能保证客户会使用最新版本的资产。

这些资产包括JSON翻译文件（由ngx-translate使用），图像（直接在应用程序的模板中引用）以及其他东西。

我在Stack Overflow和GitHub上读了很多关于这个问题的文章，但是没有找到一个足够好的解决方案。

我试着使用了一个 @angular-builders/custom-webpack:browser 的自定义Webpack配置，使用 html-loader 和 file-loader 来重命名这些文件以及源代码中对它们的每个引用，但这似乎并不奏效。

是否可以在Angular应用中对assets文件进行缓存破译命名？如果可以，推荐的方法是什么，如何操作？

Answer 1

1. 你是对的，assets没有被赋予哈希值。
2. 而且对于性能来说，还有一个明显的缺点是，它们会在index.html中添加自己的脚本标签。从构建器选项中的主属性生成的捆绑是依赖于该脚本的。所以如果因为某些原因这个脚本被延迟了(比如它的大资产)，那么整个bootstrap就被延迟了! 而且如果bootstrap不依赖于这个资产脚本的话，也许这个资产脚本可以带来懒惰？

我很好奇为什么这对你没有用。

我试着用@angular -buuilderscustom -webpack:browser 和一个自定义的Webpack配置，使用html -loader和file -loader来重命名文件以及源代码中对它们的每一个引用，但似乎不起作用。

我很乐意在另一个问题中研究这个问题。这就是我们采取的方法。