Битые CSS и JS

Битый CSS или JavaScript — не просто запись 404 в консоли. Без стилей страница теряет читаемость, без скрипта ломаются меню, формы и аналитика. Частая причина — новый файл с хешем опубликован, а HTML, CDN или service worker ещё ссылается на удалённый предыдущий chunk.

ПричинаПризнакИсправление
Старый HTML в кэшеЗапрашивает прошлый hashИнвалидировать HTML вместе с релизом
Неверный public path404 на вложенном URLИсправить путь в конфигурации сборки
Рано удалённый chunkОшибка после обновления вкладкиХранить несколько версий ассетов
Виджет недоступен403/5xx чужого доменаПроверить необходимость и fallback

Проверка релиза

Откройте страницу в новом профиле браузера и посмотрите Network для CSS и JS. Сравните URL в HTML с manifest текущей сборки: так видно, какой компонент устарел. Проверяйте не только главную, но форму и вложенный маршрут — ошибки publicPath часто проявляются именно там.

# Нормальный ответ для ассета
curl -I https://example.ru/_nuxt/app.abc123.js
# HTTP/2 200
# content-type: application/javascript

Не лечите проблему минификацией или отключением кэша навсегда. Для файлов с хешем допустим долгий cache-control, а HTML должен получать новую ссылку на них при релизе. Service worker обновляйте отдельно: старый worker способен отдавать уже несуществующий shell приложения. Размер ресурсов покажет Page size, а доступность страницы — бесплатная проверка.

Вопросы и ответы

304 означает, что CSS или JS сломан?

Нет, 304 означает, что браузер использует валидную кэшированную копию после проверки свежести. Проблема появляется, когда HTML просит файл, которого сервер или CDN уже не знает. Смотрите связку URL, статуса и версии релиза, а не один код ответа.

Нужно ли отключить кэш для всех ассетов?

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

Почему ошибка видна только после обновления страницы?

Открытая вкладка могла сохранить старый runtime, который пытается догрузить прежний chunk после нового релиза. Храните старые ассеты некоторое время и обрабатывайте ошибку загрузки чанка. Это мягче, чем заставлять пользователя увидеть пустой экран.

Достаточно ли проверить главную после деплоя?

Нет, главная часто использует меньше кода, чем каталог, форма или кабинет. Выберите несколько критичных пользовательских сценариев и вложенный маршрут. Такой smoke тест быстрее выявляет неверный путь, отсутствующий chunk и ошибку стороннего виджета.