angular-cli 的 --output-hashing 总是应该与延迟加载的模块一起使用吗? [英] Is angular-cli's --output-hashing always supposed to work with lazily loaded modules?

问题描述

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

I thought I have been successfully cache busting with angular-cli's --output-hashing option set to all to ensure users get the latest chunks/updates. I realized this isn't always working for lazily-loaded modules.

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

If I make changes only to a lazily-loaded module + build + deploy to IIS, AND go to a URL that belongs to the lazily-loaded module, then I get the latest changes as expected.

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

However, if I close and re-open the browser and go to a URL that does not belong to the lazily-loaded module, and then click to a link that takes me to the lazily-loaded module, the latest changes are not observed.

当我从一个没有改变的模块进入应用程序时，浏览器几乎假设没有任何改变，并且当我访问是 改变了.

It's almost as if browser is assuming nothing is changed whenever I enter the app from a module that hasn't changed, and doesn't pick up the new chunk later when I visit the module that is changed.

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

Even stranger, when I tried to replicate the issue to provide some screenshots, the issue went away.

是否有其他人遇到过使用输出散列进行缓存破坏的不一致情况?

Has anyone else experienced inconsistency with cache busting using output-hashing?

经过进一步调查，结果证明，如果我转到我网站的着陆页 [IP 地址]:[端口]，那么 index.html 来自缓存.

After investigating some more, it turns out that if I go to the landing page of my site [IP address]:[port], then the index.html comes from the cache.

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

Instead, if I go to any other route [IP address]:[port]/[route], then the index.html comes from the server.

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

Since index.html points to inline.(hash).bundle.js, which in return points to lazily-loaded modules, getting the old copy of index.html results in getting old versions of inline.js and other modules.

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

I tried to add <meta http-equiv="expires" content="0" /> to index.html and cleared browser cache, and still got the file from cache.

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

I also tried adding a section into web.config, but this did not work either.

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

How to ensure index.html always comes from the server?

推荐答案

您可以在这个 SO 相关问题中找到您的答案，该问题概述了如何设置 IIS 以设置 index.html文件:如何禁用缓存通过 IIS 提供的单页应用程序 HTML 文件?

Your answer can be found in this SO related question, which outlines how to set up IIS to set the cache settings for the index.html file: How to disable caching of single page application HTML file served through IIS?

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

Additionally based on the Mozilla Docs, you should set the Cache-Control header to this: no-cache, no-store, must-revalidate

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

As for the cause of this issue, when Angular is generating the output bundle, it will create JS filenames that will uniquely identify the current version of that file if told to use output hashing (i.e. they create a hash of the file contents and include this in the filename so that browsers do not serve up the cached version of these updated files: js-filename.[hash of content].js instead of just js-filename.js). The problem with this is that the browsers will also serve up the cached version of the index.html file that Angular generates, which will point to the old version of the JS files.

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

To resolve this issue, you must set up your web server to set the appropriate Cache-Control setting (outlined above) on the index.html file so that the browser never caches this file.

这篇关于angular-cli 的 --output-hashing 总是应该与延迟加载的模块一起使用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！