是否始终应将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文件的缓存设置:如何禁用单页应用程序HTML的缓存是通过IIS服务的文件?

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文档，则应将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屋！