Оптимизация списка кэшируемых файлов

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

Формирование списка кэшируемых ресурсов

Sw-precache использует параметр staticFileGlobs для указания файлов и шаблонов, которые должны быть закэшированы. Для оптимизации следует:

  • Использовать маски и шаблоны вместо явного перечисления каждого файла. Например, вместо указания всех файлов CSS и JS по отдельности:
staticFileGlobs: [
  'dist/css/main.css',
  'dist/js/app.js',
  'dist/js/vendor.js'
]

лучше применять шаблоны:

staticFileGlobs: [
  'dist/**/*.js',
  'dist/**/*.css'
]

Это снижает вероятность пропуска новых файлов при сборке и облегчает поддержку.

  • Исключать динамические файлы. Файлы, генерируемые на сервере или с уникальными хешами, не должны попадать в кэш без дополнительной логики, иначе сервис-воркер будет загружать устаревшие версии.

  • Разделять критические и второстепенные ресурсы. Критические файлы (HTML, основные CSS и JS) следует кэшировать сразу, второстепенные (шрифты, изображения) — по мере необходимости или с отложенной загрузкой через runtime caching.

Использование stripPrefix и stripPrefixMulti

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

stripPrefix: 'dist/',

Преобразует 'dist/js/app.js' в 'js/app.js' в кэше. Для проектов с несколькими корнями можно использовать stripPrefixMulti:

stripPrefixMulti: {
  'dist/': '',
  'vendor/': 'lib/'
}

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

Управление версионированием файлов

Для предотвращения конфликтов и устаревших версий важно применять хеширование файлов. Пример:

  • Использование Webpack или Gulp для генерации файлов вида app.1a2b3c.js.
  • В staticFileGlobs указывать все версии через шаблон app.*.js.

Sw-precache корректно обновит кэш при изменении хеша, исключая необходимость ручного удаления старых ресурсов.

Оптимизация фильтрации

Параметр dontCacheBustUrlsMatching позволяет избежать излишней перезаписи кэша для ресурсов, чьи URL содержат хеш. Пример:

dontCacheBustUrlsMatching: /\.\w{8}\./

Это предотвращает ненужное обновление кэша при каждом деплое, если файл не изменился.

Исключение ненужных файлов

Sw-precache поддерживает ignoreUrlParametersMatching, который позволяет игнорировать query-параметры при кэшировании. Полезно для:

  • API-запросов с временными токенами
  • Статических ресурсов с версионированием через query

Пример:

ignoreUrlParametersMatching: [/^utm_/]

Все параметры, начинающиеся с utm_, не будут создавать новые кэш-записи, что уменьшает размер кэша и повышает эффективность.

Интеграция с runtime caching

Для динамических ресурсов стоит использовать runtime caching, оставляя staticFileGlobs только для неизменяемых файлов. Пример конфигурации:

runtimeCaching: [{
  urlPattern: /\/api\/.*\/*.json/,
  handler: 'networkFirst'
}]

Такое разделение позволяет минимизировать кэш и одновременно обеспечить актуальность данных, получаемых из сети.

Практические рекомендации

  1. Минимизировать количество файлов в staticFileGlobs, объединяя и минифицируя CSS и JS.
  2. Использовать шаблоны и регулярные выражения, чтобы охватывать все нужные ресурсы без ручного перечисления.
  3. Избегать кэширования больших изображений и видео в статическом кэше — их лучше обрабатывать через runtime caching или CDN.
  4. Проверять размер кэша и лимиты браузеров, чтобы не превышать допустимые значения, иначе сервис-воркер не сможет полностью закэшировать ресурсы.
  5. Автоматизировать процесс сборки, чтобы новые файлы автоматически попадали в staticFileGlobs через скрипты или плагины сборщика.

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

Оглавление