Кэширование изображения / gif многоразового углового компонента

Question

Я создал компонент многократного использования, скажем my-gif-component. Этот компонент имеет ссылку на gif в теге изображения, что-то вроде этого,

мой-GIF-component.html

 <div>
   <img src="mygif.gif"/>
 </div>

Теперь, где бы я ни использовал этот повторно используемый компонент gif как <my-gif-component></my-gif-component> внутри любого другого компонента, mygif.gif выбирается с сервера столько раз, сколько my-gif-компонент используется во всем приложении.

Есть ли способ кэшировать gif / изображение один раз, а затем все другие экземпляры компонента my-gif используют это изображение вместо загрузки нового

Answer 1

Ваш сервер, обслуживающий gif, должен отправить в ответ HTTP-заголовок cahche-control: max-age=yourmaxage вместе с gif Это заставит браузер кэшировать изображение до тех пор, пока не истечет максимальный возраст, поэтому вам не следует устанавливать максимальное значение максимального возраста, так как изменение gif будет затруднено.

В зависимости от того, является ли gif динамическим или нет, вы также можете встроить gif прямо в приложение, чтобы он не запрашивался с сервера.