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

Question

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

如果我只对延迟加载模块 + 构建 + 部署到 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文件的缓存设置：如何禁用通过 IIS 提供的单页应用程序 HTML 文件的缓存？

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

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

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