Параметр maximumFileSizeToCacheInBytes

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

Назначение и область применения

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

Пример: если maximumFileSizeToCacheInBytes установлен в 2 * 1024 * 1024 (2 МБ), файлы больше 2 МБ автоматически игнорируются и не попадают в кэш.

Синтаксис и использование

Параметр передается в объект конфигурации при вызове функции генерации сервис-воркера:

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

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.js',
    'dist/**/*.css',
    'dist/**/*.html'
  ],
  maximumFileSizeToCacheInBytes: 2 * 1024 * 1024 // 2 МБ
});

Пояснения:

  • staticFileGlobs — массив шаблонов файлов для кэширования.
  • maximumFileSizeToCacheInBytes — максимальный размер файла в байтах. Файлы, превышающие это значение, исключаются из кэша.

Влияние на производительность

Ограничение размера файлов предотвращает:

  • Перегрузку кэша: большие файлы могут занимать значительное место в IndexedDB или Cache API.
  • Длительное время установки сервис-воркера: при кэшировании больших файлов процесс установки может замедлиться.
  • Снижение скорости отклика при старте приложения: сервис-воркер будет пытаться закэшировать все файлы, что увеличивает время первой загрузки.

Выбор оптимального значения зависит от:

  1. Объема данных на сайте: страницы с большими медиаресурсами требуют осторожности.
  2. Типа ресурсов: статические JavaScript и CSS-файлы обычно меньше медиаконтента, их можно кэшировать полностью.
  3. Платформы и ограничений браузеров: у каждого браузера есть свои лимиты на размер кэша, поэтому чрезмерно большие значения могут вызвать ошибки.

Особенности работы

  • Если файл превышает лимит, он не кэшируется, и в логе сборки Sw-precache можно увидеть предупреждение.
  • Параметр применим только к файлам, перечисленным в staticFileGlobs. Динамические запросы через runtimeCaching на него не влияют.
  • Размер файла измеряется в байтах, без сжатия. Даже если файл сжимается при передаче по сети (gzip), исходный размер учитывается.

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

  • Для большинства проектов оптимальным считается значение от 1 до 5 МБ.
  • Для крупных ресурсов (видео, большие изображения) лучше использовать отдельные стратегии кэширования или CDN, чтобы не перегружать сервис-воркер.
  • Проверять размер файлов перед сборкой можно с помощью Node.js скриптов или утилит вроде fs.statSync, чтобы гарантировать, что все нужные файлы попадают в кэш.

Пример интеграции с gulp

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

gulp.task('generate-service-worker', function(callback) {
  swPrecache.write('dist/service-worker.js', {
    staticFileGlobs: [
      'dist/**/*.html',
      'dist/**/*.js',
      'dist/**/*.css'
    ],
    maximumFileSizeToCacheInBytes: 2 * 1024 * 1024 // 2 МБ
  }, callback);
});

В этом примере сервис-воркер будет автоматически кэшировать все файлы HTML, JS и CSS размером до 2 МБ. Более крупные файлы будут проигнорированы без нарушения сборки.

Оглавление