Ленивое кэширование некритичных ресурсов

Ленивое кэширование (lazy caching) в контексте Sw-precache представляет собой стратегию, при которой некритичные ресурсы веб-приложения (изображения, шрифты, видеофайлы и большие скрипты) не загружаются и не кэшируются при первоначальном открытии страницы. Их кэширование откладывается до момента реальной необходимости, что снижает первоначальное время загрузки и уменьшает нагрузку на сеть.

Ключевой принцип: кэшировать ресурсы только тогда, когда они реально понадобились пользователю. Это особенно эффективно для сайтов с большим количеством медиа-контента или ленивой подгрузкой страниц.

Настройка Sw-precache для ленивого кэширования

В Sw-precache ленивое кэширование реализуется с помощью конфигурации runtimeCaching. Этот параметр позволяет определять отдельные маршруты или паттерны URL, для которых применяется отложенное кэширование с использованием стратегий кеширования:

const swPrecache = require('sw-precache');

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.{js,html,css}',
  ],
  stripPrefix: 'dist/',
  runtimeCaching: [
    {
      urlPattern: /\/images\//,
      handler: 'cacheFirst',
      options: {
        cache: {
          name: 'images-cache',
          maxEntries: 50,
          maxAgeSeconds: 7 * 24 * 60 * 60 // 7 дней
        }
      }
    },
    {
      urlPattern: /\/api\/data\//,
      handler: 'networkFirst',
      options: {
        cache: {
          name: 'api-cache',
          maxEntries: 30,
          maxAgeSeconds: 24 * 60 * 60 // 1 день
        }
      }
    }
  ]
});

Пояснения к конфигурации:

  • urlPattern – регулярное выражение, определяющее URL, которые попадут под стратегию кэширования.

  • handler – стратегия работы с кэшем:

    • cacheFirst — сначала проверяет кэш, и только при отсутствии ресурса делает сетевой запрос.
    • networkFirst — сначала обращается к сети, кэш используется как резерв.
    • fastest — выбирает первый ответ, который приходит (кэш или сеть).

  • options.cache – настройки конкретного кэша:

    • name — имя кэша.
    • maxEntries — максимальное количество файлов в кэше.
    • maxAgeSeconds — время жизни ресурса в кэше.

Стратегии ленивого кэширования

1. Cache-First для медиа и шрифтов Используется для больших файлов, которые редко обновляются. Первый запрос проверяет кэш, что минимизирует сетевую активность.

2. Network-First для динамического контента Применяется к API-запросам или JSON-файлам, где актуальность данных важнее скорости. Кэш используется как fallback при недоступной сети.

3. Stale-While-Revalidate Реализуется через ручное расширение Sw-precache. Позволяет выдавать пользователю устаревший кэшированный контент мгновенно, а параллельно обновлять его в фоновом режиме.

// пример ручного расширения handler для stale-while-revalidate
self.addEventListener('fetch', event => {
  const url = event.request.url;
  if (/\/assets\/lazy\//.test(url)) {
    event.respondWith(
      caches.match(event.request).then(cachedResponse => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          caches.open('lazy-cache').then(cache => {
            cache.put(event.request, networkResponse.clone());
          });
          return networkResponse;
        });
        return cachedResponse || fetchPromise;
      })
    );
  }
});

Управление размером кэша и жизненным циклом

Чтобы ленивое кэширование не привело к переполнению локального хранилища, важно контролировать максимальное количество ресурсов и срок их жизни:

  • maxEntries предотвращает накопление неиспользуемых файлов.
  • maxAgeSeconds позволяет автоматически очищать устаревшие ресурсы.
  • Рекомендуется использовать разные кэши для критичных и некритичных ресурсов, чтобы обновления одного типа не стирали другой.

Особенности ленивого кэширования с Sw-precache

  • Асинхронная загрузка ресурсов: ленивые скрипты, изображения и видео можно загружать только по событию (например, прокрутка страницы или клик пользователя).
  • Приоритет критичных ресурсов: основной HTML, CSS и JS должны попадать в staticFileGlobs и кэшироваться при установке сервис-воркера.
  • Обновление и версионирование: изменения в ленивых ресурсах отслеживаются через хэширование имени файла. Sw-precache автоматически перегенерирует кэш при изменении содержимого.

Применение на практике

  • Изображения галереи: cacheFirst, maxEntries=50, maxAge=7 дней.
  • Видео на лендинг-пейджах: cacheFirst, отдельный кэш videos-cache, maxEntries=10.
  • API-запросы для динамичных данных: networkFirst, maxAge=24 часа.
  • Шрифты Google Fonts: cacheFirst, maxEntries=10, maxAge=30 дней.

Эти настройки обеспечивают сбалансированное использование сети и дискового пространства, сокращают время загрузки страницы и повышают отзывчивость интерфейса без лишней нагрузки на пользователя и сервер.

Оглавление