angular - angular-cli 的 --output-hashing 是否总是应该与延迟加载的模块一起使用？

Question

我以为我已经使用 angular-cli 的 --output-hashing 成功清除了缓存选项设置为 all以确保用户获得最新的 block /更新。我意识到这并不总是适用于延迟加载的模块。

如果我仅对延迟加载模块进行更改 + 构建 + 部署到 IIS，然后转到属于延迟加载模块的 URL，那么我会按预期获得最新更改.

但是，如果我关闭并重新打开浏览器并转到不属于延迟加载模块的 URL，然后单击将我带到延迟加载模块的链接，最新的更改是没有观察到。

这几乎就好像浏览器假设每当我从一个没有改变的模块进入应用程序时没有任何改变，并且当我稍后访问是 改变了。

更奇怪的是，当我尝试复制问题以提供一些屏幕截图时，问题就消失了。

有没有其他人遇到过使用输出散列清除缓存不一致的情况？

编辑:

进一步调查后发现，如果我转到我网站的登录页面 [IP 地址]:[端口]，那么 index.html 来自缓存。

相反，如果我转到任何其他路由 [IP 地址]:[端口]/[路由]，则 index.html 来自服务器。

由于 index.html 指向 inline.(hash).bundle.js，后者反过来指向延迟加载的模块，获取 index.html 的旧副本会导致获取旧版本的 inline.js 和其他模块。

我尝试添加 <meta http-equiv="expires" content="0" />到 index.html 并清除浏览器缓存，仍然从缓存中获取文件。

我也试过在 web.config 中添加一个部分，但这也不起作用。

如何保证index.html始终来自服务器？

Answer 1

您的答案可以在这个 SO 相关问题中找到，该问题概述了如何设置 IIS 以设置 index.html 文件的缓存设置:How to disable caching of single page application HTML file served through IIS?

另外基于Mozilla Docs ，您应该将 Cache-Control header 设置为:no-cache, no-store, must-revalidate

至于这个问题的原因，当 Angular 生成输出包时，如果被告知使用输出散列(即它们创建文件内容的散列)，它将创建 JS 文件名，这些文件名将唯一标识该文件的当前版本并将其包含在文件名中，这样浏览器就不会提供这些更新文件的缓存版本:js-filename.[hash of content].js 而不仅仅是 js-filename.js )。这样做的问题是，浏览器还将提供 Angular 生成的 index.html 文件的缓存版本，它将指向旧版本的 JS 文件。

要解决此问题，您必须设置您的 Web 服务器以在 index.html 文件上设置适当的 Cache-Control 设置(如上所述)，以便浏览器从不缓存此文件。