Vuejs кэширует изображения из URL, избегайте повторной загрузки

Question

Я создаю простое приложение «Галерея + слайд-шоу».
В компоненте «Галерея» у меня есть все URL-адреса, и я отображаю их в компоненте GalleryItem.

<gallery-item v-for="i in images" :item="i" :key="i.uid"/>

GalleryItem затем использует

<img :src="item.url"/>

для отображения изображения.
Если пользователь нажимает на любой GalleryItem, он будет выделен в компоненте лайтбокса / слайд-шоу.

<lightbox :item="highlightedItem"/>

, который снова использует

<img :src="item.url"/>

Я наивно ожидал, что браузер кеширует этот запрос и не перезагрузит тот же самый URL, но это именно то, что происходит.

Есть ли какой-нибудь элегантный способ избежать этого и кэшировать изображение при загрузке один раз?

Answer 1

Вы можете реализовать кэширование изображений с помощью сервисного работника.

Примером библиотеки сервисного рабочего, которую вы можете использовать, является Workbox . С помощью Workbox вы можете определить URL, который вы хотите кэшировать, и несколько различных стратегий кэширования. Как и в следующем примере кода, просто замените RegExp на тот, который соответствует вашему варианту использования, например, с использованием расширений изображений.

Если ваши изображения не меняются, так как один и тот же URL-адрес всегда указывает на одно и то же изображение, я бы порекомендовал вам использовать стратегию cacheFirst, так как тогда вам не нужно отправлять запрос на сервер, если изображение уже в кеше.

workbox.routing.registerRoute(
  new RegExp('/styles/'),
  new workbox.strategies.CacheFirst()
);