Остановка кэширования RequireJS: методы без переименования

Быстрый ответ

Для отключения кэширования скриптов в RequireJS примените параметр urlArgs, добавив к URL скриптов уникальный идентификатор, такой как временная метка:

require.config({
  urlArgs: "bust=" + (new Date()).getTime()
});

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

Настройка RequireJS для гарантированного предотвращения кэширования

Применение urlArgs для исключения кэширования

Параметр urlArgs – надёжный инструмент в борьбе с кэшированием скриптов. Используйте динамическое значение, например, номер версии или временную метку:

require.config({
  urlArgs: "version=1024"
});

Подробнее об этом расскажет наш спикер на видео

Версионирование для управления кэшем в рабочей среде

В рабочей среде в качестве urlArgs используйте номер версии или сборки для контролируемого отключения кэширования:

require.config({
  urlArgs: "version=3.14"
});

Проблемы инструментов разработки Chrome

Во время процесса разработки использование временной метки для urlArgs не рекомендуется, поскольку это может вызвать путаницу с Chrome Developer Tools. Лучше применять настройки сервера или использовать сервер разработки, поддерживающий HTTP 304 ответы:

// urlArgs здесь не помеха. Это особенность Chrome.

Структуризация каталогов ресурсов в рабочей среде

Размещайте ресурсы в каталогах, сгруппированных по версиям, чтобы облегчить поддержку рабочей среды и отказаться от urlArgs:

require.config({
  baseUrl: "/assets/v3.14/js/"
});

Оптимизация

Обновление номеров сборок

Попробуйте оптимизировать процесс сборки с помощью динамической подстановки номеров версий. Позвольте системе сборки вставить актуальные номера версий в конфигурацию RequireJS:

require.config({
  // Система сборки заменит @@version@@ актуальной версией
  urlArgs: "version=@@version@@"
});

Визуализация

Демонстрация принципа работы без кэширования скриптов с использованием RequireJS:

"Настройки конфигурации": {
    "cacheBusting": "Включено 🔄"
}

// Пользователь обновляет страницу
Пользовательское действие: [Нажатие F5 🖱️]

// С включенным cacheBusting
Результат: [
    "Загружается новый Скрипт 1...",
    "Загружается новый Скрипт 2...",
    "Загружается новый Скрипт 3..."
]

// Без использования cacheBusting
Результат без cacheBusting: [
    "Загружен кэшированный Скрипт 1...",
    "Загружен кэшированный Скрипт 2...",
    "Загружен кэшированный Скрипт 3..."
]

Поддерживайте актуальное состояние вашего веб-приложения с помощью своевременных обновлений!

Искусство управления кэшем

Управление кэшем на стороне сервера

Правильно настроенные HTTP-заголовки позволят достичь эффективной работы серверного кэша. Корректно выбранные значения для Cache-Control и ETag могут значительно улучшить производительность.

HTTP-кэширование

Для управления закэшированным контентом воспользуйтесь инструментами HTTP-кэширования через HTTP-заголовки:

// В этом блоке ничего нет, пропустите. Все в руках у мастера HTTP-заголовков. 😉

Эффективное сжатие ресурсов

Применение gzip-сжатия снизит время загрузки и уменьшит нагрузку на пропускную способность сети:

// Здесь могла быть ваша реклама, но у нас gzip, так что всё летит быстро и без задержек!

Полезные материалы

1. API RequireJS — тонкости настройки RequireJS.
2. Как предотвратить кэширование загружаемых скриптов RequireJS — диалоги и советы о предотвращении кэширования в сообществе.
3. Кэширование HTTP – MDN — управление кэшем через HTTP.
4. Проблемы с RequireJS на GitHub — обсуждение проблем кэша в репозитории RequireJS.
5. Как сократить ненужные сетевые запросы — улучшение производительности благодаря кэшированию.
6. Оптимизация RequireJS — советы по оптимизации процесса сборки.