Як уникнути завантаження кешованих файлів скриптів і стилів?

Повне пояснення

Що це і навіщо

Кешування статичних файлів (скриптів, стилів) зменшує час завантаження сторінки, але у разі оновлення коду браузер може продовжувати використовувати стару версію. Щоб уникнути цього, треба забезпечити зміну URL‑адреси при кожному релізі.

Ключові принципи

• Cache busting – додавання унікального параметра (hash, timestamp) до URL.
• Cache‑control headers – max-age, no-cache, must-revalidate.
• Service‑worker – контроль кешу на стороні клієнта.

Як це працює

1. При збірці проекту інструмент (Webpack, Vite, Next.js) генерує файл з хешем у назві.
2. HTML посилається на цей файл: <script src="/static/js/app.abc123.js"></script>.
3. Коли код змінюється, генерується новий hash (app.def456.js). Браузер бачить інший URL і завантажує новий файл.

Практика та реалізація

• Webpack: output.filename = '[name].[contenthash].js'.
• Vite: автоматично додає [hash] у назву файлів.
• Next.js: next.config.js → output: 'standalone', кешування за замовчуванням.

Тестування

import { render } from '@testing-library/react';
const { container } = render(<App />);
expect(container.querySelector('script[src*=".js"]')).toHaveAttribute('src', /\.abc123\.js$/);

Безпека та приватність

Уникайте Cache-Control: no-store для всіх ресурсів, бо це знижує продуктивність. Використовуйте immutable для файлів, що не змінюються.

Оптимізація

• Preload: <link rel="preload" href="/static/js/app.abc123.js" as="script">.
• HTTP/2 push: сервер може надсилати ресурси разом із HTML.

Часті помилки

1. Залишаєте статичні файли без хешу → браузер кешує.
2. Неправильний Cache-Control → ресурси не оновлюються.
3. Service‑worker кешує старі файли → потрібно правильно обробляти activate.

Cheatsheet

• Hash: [contenthash] → змінюється при змінах.
• Headers: Cache-Control: public, max-age=31536000, immutable для статичних.
• No-cache: Cache-Control: no-cache, must-revalidate для динамічних.

Follow‑up питання

• Як працює service-worker у контексті кешування?
• Які переваги має HTTP/2 push над preload?