Angular 应用程序中的资产缓存问题

Question

我有一个 Angular 8 应用程序，在部署新版本期间我遇到了缓存问题。 基本上我注意到在使用ng build --prod 时，outputHashing 选项在我的angular.json 中设置为all。因此，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 应用程序中为资产文件设置缓存破坏名称？ 如果是这样，推荐的方法是什么？它是如何工作的？

Answer 1

1. 你是对的，资产没有被赋予哈希值。
2. 另一个明显的性能劣势是它们将自己的脚本标记添加到 index.html。从构建器选项中的主要属性生成的包依赖于该脚本。因此，如果由于某种原因这个脚本被延迟（例如它的大资产），那么整个引导程序就会被延迟！如果引导程序不依赖它，这个资产脚本可能会带来懒惰？

我很好奇为什么这对你不起作用：

我尝试使用带有自定义 Webpack 配置的 @angular-builders/custom-webpack:browser，该配置使用 html-loader 和 file-loader 重命名文件以及源代码中对它们的每个引用，但没有好像没用。

我很乐意在另一个问题中看到这一点。这就是我们采用的方法。