angular-cli - 浏览器加载 index.html 的缓存版本 - 角度 7
问题描述
我有一个在 python 服务器上运行的 angular 7 应用程序,使用 angular-cli 我们正在构建项目文件。在构建时,我正在使用以下命令设置缓存突发选项。
ng build --prod --build-optimizer --aot --output-hashing=all
output-hashing=all 将按照角度文档处理缓存突发。虽然我提供了这个标志,但在部署我们的应用程序文件名后附加了哈希值(styles.a5169d3732258e921e2c.css,main.8dc0644c88c4fbf67797.js),但 index.html 文件始终显示缓存版本。
我想在客户端缓存除 index.html 之外的所有文件。我将如何做到这一点?
解决方案
几个月前我遇到了同样的问题(我网站的元标记设置错误,因此 index.html 被缓存)。当涉及到该问题时,在线解决方案并不是很具体。
帮助在服务器配置中设置适当的标头(这是一个 Apache 服务器.htaccess
文件;配置位置和语法可能因您的特定服务器而异):
<FilesMatch "\.(html|htm)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
</IfModule>
</FilesMatch>
上面的配置是从某个地方复制粘贴的,甚至可能是这样,尽管我再也找不到源了。
此配置关闭 E-Tag 标头(具有一些奇怪行为的自动更改检测,请参见下面的链接)并禁用 index.html 的所有缓存。
Angular 应用程序的其他部分(如静态图像等)通常无需配置即可自动缓存。不过,我建议您将以下内容添加到服务器配置中,因为否则不会缓存捆绑包:
<FilesMatch "\.js$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "private, max-age=31536000"
</IfModule>
</FilesMatch>
这仅允许最终用户(浏览器)将捆绑包缓存一年。由于 Angular-CLI 无论如何都会在每个构建的包中添加一个哈希,这不会影响功能(但会使您的应用程序更快)。
有关详细信息,请参阅https://stackoverflow.com/a/8497239/2740014。
推荐阅读
- python - 对顶级功能的困惑
- asp.net-core - .NET Core 3.1 URL 在 Visual Studio 2019 中无法正常运行
- angular - 为什么我的 RxJS 倒计时时钟不显示?
- apache - Apache2 服务器后面的 Spring Boot SSL
- python - 如何从文本文件映射二维数组
- android - 如何从 Kotlin Firebase 中的两个引用中正确添加适配器?
- reactjs - 从 React 向 GraphQL 服务器进行查询时出现意外错误
- java - 如何在 JSON 中获得某个值?
- jquery - 如何检查是否已经为请求日期预订了约会
- javascript - 无法使用 JS 动态调整 SVG 大小(仅适用于桌面)