Angular 應用程序中的資產緩存問題

Question

我有一個 Angular 8 應用程序，在部署新版本期間我遇到了緩存問題。 基本上我注意到，當使用ng build --prod時，我的angular.json中的outputHashing選項設置為all 。 因此，由ng build生成的所有文件的名稱中都有內容 hash ，這有兩個原因：

1. 瀏覽器可以安全地長期緩存我的應用程序的文件（如果文件內容在新版本中發生更改，則名稱會更改，因此所有客戶端都會重新加載文件）
2. 如果文件沒有從一個版本更改到另一個版本，則不會重新下載

（注意：index.html 從不緩存）

所以這看起來很有效。

現在的問題是，並非所有文件都有這個緩存破壞名稱。 在angular.json中聲明為資產的文件只是在構建期間“按原樣”復制。 因此，如果我發布我的應用程序的新版本，我無法保證客戶將使用最新版本的資產。

這些資產包括 JSON 翻譯文件（由 ngx-translate 使用）、圖像（直接在應用程序的模板中引用）以及其他東西。

我在 Stack Overflow 和 GitHub 上閱讀了很多關於此的內容，但找不到足夠好的解決方案。

我嘗試使用帶有自定義 Webpack 配置的@angular-builders/custom-webpack:browser ，該配置使用html-loader和file-loader重命名文件以及源代碼中對它們的每個引用，但這似乎沒有工作。

是否可以在 Angular 應用程序中為資產文件提供緩存破壞名稱？ 如果是這樣，推薦的方法是什么，它是如何工作的？

Answer 1

1. 你是對的，資產沒有被賦予 hash。
2. 另一個明顯的性能劣勢是它們將自己的腳本標簽添加到 index.html。 從構建器選項中的主要屬性生成的包依賴於該腳本。 所以如果由於某種原因這個腳本被延遲（例如它的大資產）那么整個引導程序被延遲了？ 如果引導程序不依賴它，也許這個資產腳本會帶來懶惰？

我很好奇為什么這對你不起作用：

我嘗試使用帶有自定義 Webpack 配置的 @angular-builders/custom-webpack:browser，該配置使用 html-loader 和 file-loader 重命名文件以及源代碼中對它們的每個引用，但這似乎沒有工作。

我很樂意在另一個問題中看到這一點。 這是我們采取的方法。