如何解决 Angular 应用程序的浏览器缓存问题

Question

我有一个角度应用程序。在部署管道中，我们使用“ng build --prod”命令来构建应用程序。每当我们进行代码更改时，此命令都会为构建文件生成不同的哈希码。 但是，我们看到用户必须清除浏览器缓存才能在部署后查看新功能的问题。 任何建议即使在部署时构建文件名不同，为什么也需要清除缓存。

Answer 1

可悲的是，这不是微不足道的，而且是一场真正的斗争。

为了优化加载时间，有几个缓存层（浏览器、服务器等）并且要解决这个问题，仅对 js 文件进行散列是不够的。

您的用户可能会获得应用程序的缓存版本，index.html 文件仍指向 JS 文件的旧引用。即使您对文件进行哈希处理，也不会使用户的浏览器缓存无效，因此仍会尝试获取旧应用程序。

嗯，不错的理论，但我们需要解决方案。

为了解决这个问题，您应该：

1. 散列你的源文件，@Priyanka 指出了如何实现这一点
2. 从您的服务器发送缓存标头，提示您的浏览器不要缓存应用程序。永远。

您也可以通过在index.html 文件上设置一些<meta> 标记来避免执行2。 注意，如果服务器使用一些缓存标头为 index.html 提供服务，浏览器将使用 THOSE 而不是您在 <meta> 标记中提供的指令

（对于 2 个） 有哪些神奇的标题？

// HTTP 1.1. Standard
Cache-Control: no-cache, no-store, must-revalidate
// HTTP 1.0 Standard
Pragma: no-cache
// Proxies
Expires: 0

如何在您的网络服务器上进行设置取决于您的设置……是 Nginx 吗？一个IIS？我不知道该为您的服务器使用什么代码。

这不会立即解决问题，因为您用户的浏览器可能尚未使之前的缓存失效。因此，一旦它使其无效并收到新的标头，您就会很好。