如何在Angular 6中强制用户在生产后清除缓存

Question

我有一个外部CSS文件（work.css），我将此文件放入After execute entries.clear() 中进行编译

angular.json

现在，例如，如果我有"styles": [ "src/styles.css", "src/assets/css/work.css" ], ，并将其更改为margin-left: 50px，然后向用户发布新作品。浏览器缓存了50px，直到我清除缓存后才出现10px。新生产后如何强制用户清除缓存？

编辑

每个组件css中都出现相同的问题。

Answer 1

Http缓存通常不是一个容易的问题。实际上，只要知道它的工作原理，这是非常容易的：)向您添加--prod ng构建会生成index.html文件，该文件将包含所有静态资源js，css和唯一的intytyfier。所以

style.css

将成为

style.sdfsrregsfd32453455.css

不幸的是，这只是故事的一部分，因为index.html可以并且将被浏览器缓存。而且您无法更改。这是另一种可以帮助我们的缓存机制，称为ETag（ E 实体 T ag）。

基本上，为您的网站提供服务的http服务器将添加到index.tml GET请求中，以标识该资源的标头。浏览器将在每次获取index.html的请求中发送该ID。服务器将对其进行分析，如果index.html保持不变，则将发送无内容的响应。使用302 Not Modified代码。

关于此主题，我有更长的博客文章： https://medium.com/12-developer-labors/http-caching-with-hazelcast-and-other-trics-how-to-make-my-angular-app-load-faster-aeaa90562e94