Почему при разработке ничего не берется из кэша?

Введение в проблему с кэшированием при разработке

Вопрос о том, почему при разработке «ничего не берется из кэша», обычно возникает, когда разработчик видит, что его изменения в коде (HTML, CSS, JavaScript) не сразу отображаются в браузере, даже после перезагрузки страницы. На самом деле, кэш работает всегда — проблема в том, что кэширование браузера и CDN-кэши сохраняют старые версии файлов, и это мешает разработке. Разберём основные причины и решения.

Причины проблем с кэшированием при разработке

1. Браузерный кэш

Браузер сохраняет статические ресурсы (CSS, JS, изображения) локально, чтобы ускорить последующие загрузки. При разработке это приводит к тому, что изменения не видны сразу, так как браузер продолжает использовать кэшированные файлы.

2. Кэширование на стороне сервера или CDN

Серверные конфигурации (например, nginx, Apache) или CDN могут устанавливать длительные сроки жизни кэша (Cache-Control заголовки) для статических ресурсов. Например:

location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

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

3. Инструменты сборки и их кэширование

Современные инструменты, такие как Webpack, Vite, Parcel, могут использовать кэши для ускорения сборок. Иногда их кэш становится «невалидным» и не обновляет выходные файлы, что приводит к использованию старых версий в браузере.

4. Service Workers

Если в проекте используются Service Workers, они могут кэшировать ресурсы для работы офлайн. В режиме разработки они продолжают отдавать старые файлы из своего кэша.

Решения для разработки

1. Отключение кэша в браузере

Большинство браузеров позволяют отключать кэш в инструментах разработчика:

• В Chrome: вкладка Network → галочка Disable cache.
• Или используйте режим Incognito.

2. Использование параметров для инвалидации кэша

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

<script src="app.js?v=12345"></script>

В современных сборках это делается автоматически через хэширование имён файлов (например, app.a1b2c3.js).

3. Настройка серверных заголовков для разработки

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

// Пример для Node.js/Express
app.use((req, res, next) => {
  if (process.env.NODE_ENV === 'development') {
    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, private');
  }
  next();
});

4. Очистка кэша инструментов сборки

Иногда нужно очистить кэш сборщика:

• Для Webpack: удалить папку dist и/или использовать webpack --watch с настройкой output.clean.
• Для Vite: vite --force для принудительной пересборки.

5. Управление Service Workers

В режиме разработки отключите Service Workers или используйте их обновление:

// В коде регистрации Service Worker
if ('serviceWorker' in navigator && process.env.NODE_ENV === 'production') {
  navigator.serviceWorker.register('/sw.js');
}

6. Использование «живой перезагрузки» (Live Reload)

Инструменты вроде Vite или webpack-dev-server автоматически внедряют механизмы обхода кэша через WebSocket, обновляя страницу при изменениях.

Практический пример настройки Vite для разработки

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

// vite.config.js
export default {
  server: {
    headers: {
      'Cache-Control': 'no-store',
    },
  },
  build: {
    // Для продакшена: хэши имён файлов
    rollupOptions: {
      output: {
        entryFileNames: '[name]-[hash].js',
        chunkFileNames: '[name]-[hash].js',
        assetFileNames: '[name]-[hash].[ext]',
      },
    },
  },
};

Заключение

Проблемы с кэшированием при разработке — это обычное явление, вызванное оптимизациями для продакшена. Ключевое — понимать источники кэширования (браузер, сервер, сборщик) и уметь ими управлять. В продакшене кэш нужен для производительности, а в разработке — для скорости итераций. Используйте правильные настройки среды, инструменты разработчика и современные сборщики, чтобы минимизировать эти проблемы. Если кратко: в разработке кэш часто отключают или обходят, чтобы сразу видеть изменения.