Angular 缓存 - Chrome 在经常访问的路径上加载旧的 main.js 文件

Question

我在Chrome浏览器中遇到了Angular缓存的烦人问题。每次发布后都会出现此问题。

我已经在HTML中添加了缓存控制设置。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

奇怪的是，在最常用的路线之一上，Chrome使用了旧的main.xxxx.js文件。

<script type="text/javascript" src="main.e782af08b3f281507dba.js"></script>

但是一旦我切换到另一条不太频繁的路线，它就会加载最新的main.xxxxx.js文件。

<script type="text/javascript" src="main.075b8caa48c74ed93f64.js"></script>

每次发布后，我都会遇到这个问题，这不仅让我很烦恼，也让我的客户感到不便。我不能要求他们每次我发布新版本时都清除缓存。

此外，在上次发布中，我已经添加了一个版本更改的检查，如果版本更改，则使用window.reload()重新加载浏览器，它确实可以重新加载。但是一旦它路由到频繁的路径，Chrome就会获取旧的main.js文件。

- Dheeraj Kumar

---

请注意，我们在这里更倾向于使用技术风格的写作。我们不鼓励使用问候语、希望你能帮忙、感谢、提前感谢、赞赏的话、问候、亲切的问候、签名、请你帮忙、闲聊内容和缩写的文本语言、恳求、你卡在那里多久了、投票建议、元评论等。只需解释你的问题，并展示你尝试过什么、你期望发生什么以及实际发生了什么。 - undefined

Answer 1

1) 在构建时对Angular文件进行哈希处理

Angular内置了哈希机制，以确保更新的文件不会被缓存。要激活此功能，您必须在angular.json文件中的构建配置中添加属性"outputHasing": "all"。或者，您可以使用命令ng build --output-hashing=all构建项目。这将向每个文件名添加哈希。

2) 添加服务器端Cache-Control头

然而，Angular不会对index.html文件进行哈希处理。服务器端响应头应确保该文件不被缓存 - 因为它们会覆盖您的元标记。Cache-Control是一种头，您可以在Web服务器上配置它以添加到所有出站请求，这将告诉浏览器和CDN如何缓存您的内容。此答案解释了如何在Web服务器上设置这些no-cache头。

您可以通过转到浏览器中的检查>网络选项卡或使用curl -I www.yourURL.com命令来验证是否正确设置了这些缓存控制头。

3) 处理先前缓存的文件

在添加新的缓存控制头之前，客户端浏览器缓存的所有版本的index.html文件仍将被缓存。要解决此问题，您应该使用不同的URL。可以通过使用新的域名（只要您不关心SEO），更改路由或添加URL参数（而不影响SEO）来实现这一点。

按照上述描述构建Angular项目并在Web服务器上添加配置后，用户将始终获得页面的最新版本，即使进行未来发布。

- Nico

Answer 2

根据我的研究，这个方法有效。

防止谷歌浏览器缓存HTML页面

“在服务器的HTTP响应中设置正确的到期头信息。它们会覆盖你在元标签中设置的任何内容。”

- vijayakumar gopalakrishnan