Как заставить пользователя очистить кеш после производства в Angular 6

Question

У меня есть внешний файл CSS (work.css), и я помещаю этот файл в angular.json для компиляции

"styles": [
              "src/styles.css",
              "src/assets/css/work.css"
            ],

Теперь и, например, если у меня есть margin-left: 50px, и я изменил егона margin-left: 10px и выпустить новую продукцию для пользователей.Браузер кэшировал 50px, а 10px не появляется, пока я не очищу кеш.Как я могу заставить пользователя очистить кеш после нового производства?

EDIT

И та же проблема возникает в каждом компоненте css.

Answer 1

Http-кэширование, как правило, не простая проблема.На самом деле это очень просто, если вы знаете, как это работает :) Добавление --prod к вам ng build сгенерирует файл index.html, который будет включать все статические ресурсы js, css с уникальным неопределением.Так что

style.css

станет

style.sdfsrregsfd32453455.css

К сожалению, это всего лишь часть истории, так как index.html может и будет кэшироваться браузером.И ты не можешь это изменить.Есть еще один механизм кэширования, который может помочь нам, он называется ETag ( E ntity T ag).

В основном сервер http, который обслуживает ваш веб-сайт,добавит в запрос index.tml GET заголовок, который будет идентифицировать этот ресурс.Браузер будет отправлять этот идентификатор при каждом запросе на выбор index.html.Сервер проанализирует его и, если 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