Параметр stripPrefix и stripPrefixMulti

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

stripPrefix

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

Синтаксис:

swPrecache.write('service-worker.js', {
  staticFileGlobs: ['public/**/*.{js,html,css,png}'],
  stripPrefix: 'public/'
});

Принцип работы:

  • Если файл на диске находится по пути public/js/app.js, с учетом stripPrefix: 'public/' в кэше будет зарегистрирован путь /js/app.js.
  • Все файлы, пути которых начинаются с указанного префикса, автоматически получают этот префикс удаленным.
  • Удобно использовать при деплое на сервер, где корневая папка сайта отличается от локальной директории разработки.

Особенности:

  • Работает только с одним префиксом.
  • Не поддерживает одновременное удаление нескольких префиксов.
  • Путь префикса чувствителен к слешам: public/ и public — разные значения. Последний слеш часто важен для корректного формирования путей.

stripPrefixMulti

Параметр stripPrefixMulti решает проблему необходимости удаления нескольких префиксов одновременно. Он представляет собой объект, где ключи — это префиксы файловой системы, а значения — строки, которые будут использоваться вместо удаляемых префиксов. Таким образом обеспечивается более гибкое управление URL в кэше.

Синтаксис:

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/js/**/*.js',
    'dist/css/**/*.css',
    'assets/images/**/*.{png,jpg}'
  ],
  stripPrefixMulti: {
    'dist/': '',
    'assets/': 'static/'
  }
});

Принцип работы:

  • Файл dist/js/app.js попадет в кэш как /js/app.js.
  • Файл assets/images/logo.png будет зарегистрирован в кэше как /static/images/logo.png.
  • Позволяет формировать дружелюбные URL, которые соответствуют структуре развернутого приложения.

Преимущества по сравнению с stripPrefix:

  • Возможность удалять несколько префиксов одновременно.
  • Можно не только удалять, но и заменять префиксы на другие пути.
  • Удобно использовать при сборке сложных проектов с несколькими исходными директориями.

Замечания по использованию:

  • Если одновременно указаны stripPrefix и stripPrefixMulti, приоритет отдается stripPrefixMulti.
  • Для каждого ключа объекта stripPrefixMulti важна точная запись пути, включая слеши.
  • Значение ключа может быть пустой строкой (удалить префикс) или конкретным путем для замены.

Практические советы

  1. Организация структуры проекта: Для проектов с несколькими исходными директориями рекомендуется сразу использовать stripPrefixMulti, чтобы избежать конфликта префиксов и ручного исправления путей после сборки.
  2. Согласованность путей: Всегда проверять, что слеши в начале и конце префикса соответствуют фактической структуре каталогов. Ошибки в слешах могут приводить к неверным URL в кэше.
  3. Комбинация с staticFileGlobs: Лучше заранее продумывать шаблоны для staticFileGlobs, чтобы исключить лишние файлы и корректно использовать stripPrefixMulti.

Примеры реальных сценариев

Сценарий 1: Одноуровневая папка сборки

swPrecache.write('service-worker.js', {
  staticFileGlobs: ['build/**/*.{js,css,html}'],
  stripPrefix: 'build/'
});
  • Локальные пути: build/index.html, build/js/main.js
  • Пути в кэше: /index.html, /js/main.js

Сценарий 2: Несколько исходных директорий

swPrecache.write('service-worker.js', {
  staticFileGlobs: [
    'dist/**/*.{js,css}',
    'assets/**/*.{png,jpg,gif}'
  ],
  stripPrefixMulti: {
    'dist/': '',
    'assets/': 'images/'
  }
});
  • Локальные пути: dist/js/app.js, assets/icons/icon.png
  • Пути в кэше: /js/app.js, /images/icons/icon.png

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

Оглавление