Angular应用程序中的资产缓存问题 [英] Asset caching problems in Angular application

问题描述

我有一个Angular 8应用程序，在部署新版本时遇到了缓存问题.基本上，我注意到，当使用 ng build --prod 时，在 angular.json 中将 outputHashing 选项设置为 all .代码>.因此，由 ng build 生成的所有文件的名称中都有内容哈希，这很有用，原因有两个:

I have an Angular 8 application for which I have had caching problems during deployment of new releases. Basically I noticed that when using ng build --prod, the outputHashing option is set to all in my angular.json. Therefore all files generated by ng build have a content hash in their names, which is great for two reasons:

1. 浏览器可以安全地长期缓存我的应用程序的文件(如果文件的内容在新发行版中发生了更改，则名称会发生​​更改，因此所有客户端都会重新加载该文件)
2. 如果文件没有从一个发行版更改为另一个发行版，则不会重新下载

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

(note: index.html is never cached)

这似乎非常有效.

现在的问题是，并非所有文件都具有此缓存清除名称.在 angular.json 中声明为资产的文件仅在构建过程中按原样"复制.因此，如果我发布应用程序的新版本，则我无法保证客户将使用资产的最新版本.

Now the problem is that not all files have this cache busting name. The files declared as assets in the angular.json are just copied "as is" during build. Therefore, if I release a new version of my application, I have no guarantee whatsoever that the clients will use the latest versions of the assets.

这些资产包括JSON转换文件(由ngx-translate使用)，图像(直接在应用程序模板中引用)以及其他内容.

These assets includes JSON translation files (used by ngx-translate), images (referenced directly in the templates of the application) as well as other things.

我在Stack Overflow和GitHub上了解了很多，但是没有足够好的解决方案.

I read a lot about this on Stack Overflow and GitHub but couldn't come with a good enough solution.

我尝试将 @ angular-builders/custom-webpack:browser 与自定义Webpack配置结合使用，该配置使用 html-loader 和 file-loader 重命名文件以及源代码中对它们的每个引用，但这似乎不起作用.

I tried using a @angular-builders/custom-webpack:browser with a custom Webpack config that uses html-loader and file-loader to rename the files as well as each reference to them in the source code but that didn't seem to work.

是否可以在Angular应用程序中使用资产文件的缓存清除名称?如果是这样，推荐的方法是什么?如何工作?

Is it possible to have cache busting names for assets files in an Angular application? If so, what is the recommended approach and how does it work?

推荐答案

1. 您是对的，资产没有哈希值.
2. 另一个明显的性能劣势是它们将自己的脚本标记添加到index.html.从构建器选项中的main属性生成的捆绑包取决于该脚本.因此，如果由于某种原因该脚本被延迟(例如，其重要资产)，那么整个引导过程将被延迟！如果引导程序不依赖资产脚本，也许这个资产脚本可能会带来懒惰?

我很好奇为什么这对您不起作用:

I'm curious why that didn't work for you:

我尝试将@ angular-builders/custom-webpack:browser与自定义Webpack配置结合使用，该配置使用html-loader和file-loader重命名文件以及源代码中对它们的每个引用，但是没有这样做.似乎行得通.

I tried using a @angular-builders/custom-webpack:browser with a custom Webpack config that uses html-loader and file-loader to rename the files as well as each reference to them in the source code but that didn't seem to work.

我很乐意在另一个问题中对此进行研究.这就是我们采用的方法.

I'll be happy to look at this in another question. This is the approach we are taken.

这篇关于Angular应用程序中的资产缓存问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！