Angular应用程序必须在新部署后清除缓存
我们有一个Angular 6应用程序.它在Nginx上投放.并且SSL已启用.
We have an Angular 6 application. It’s served on Nginx. And SSL is on.
当我们部署新代码时，大多数新功能都可以正常工作，但不能进行某些更改.例如，如果前端开发人员更新并部署服务连接，则用户必须打开隐身窗口或清除缓存以查看新功能.
When we deploy new codes, most of new features work fine but not for some changes. For example, if the front-end developers update the service connection and deploy it, users have to open incognito window or clear cache to see the new feature.
哪些类型的更改不会自动更新?他们为什么与众不同?
What type of changes are not updated automatically? Why are they different from others?
避免该问题的常见解决方案是什么?
What’s the common solution to avoid the issue?
问题是当静态文件被缓存时，它可以存储很长的时间，直到它到期.但是，如果您对网站进行更新，这可能会很烦人，因为文件的缓存版本存储在访问者的浏览器中，因此他们可能看不到所做的更改.
The problem is When a static file gets cached it can be stored for very long periods of time before it ends up expiring. This can be an annoyance in the event that you make an update to a site however, since the cached version of the file is stored in your visitors’ browsers, they may be unable to see the changes made.
缓存清除通过使用唯一的方法解决了浏览器缓存问题文件版本标识符，告诉浏览器文件的新版本可用.因此，浏览器不会从缓存中检索旧文件，而是会向原始服务器请求新文件.
Cache-busting solves the browser caching issue by using a unique file version identifier to tell the browser that a new version of the file is available. Therefore the browser doesn’t retrieve the old file from cache but rather makes a request to the origin server for the new file.
Angular cli通过为build命令提供--output-hashing标志来解决此问题.
Angular cli resolves this by providing an --output-hashing flag for the build command.
检查官方文档: https://angular.io/cli/build
示例
ng build --aot --output-hashing=all
以下是您可以在--output-hashing
- 无:未执行哈希处理
- media:仅将哈希添加到通过[url | file] -loaders处理的文件中
- 捆绑包:仅将散列添加到输出捆绑包
- 全部:向媒体和分发包中添加哈希