Разрушение кэша с помощью CRA React

Когда я обновил свой сайт, запустите npm, запустите build и загрузите новые файлы на сервер. Я все еще ищу старую версию своего сайта.

Без React я вижу новую версию моего сайта с очисткой кеша. Я делаю это:

Предыдущий файл

<link rel="stylesheet" href="/css/styles.css">

Новый файл

<link rel="stylesheet" href="/css/styles.css?abcde">

Как я могу сделать что-то подобное или добиться разрушения кэша с помощью приложения create response?

В GitHub приложения create response есть множество тем по этому поводу, но ни у кого нет правильного/простого ответа.

Ответ 1

РЕДАКТИРОВАТЬ: по умолчанию в create-реагировать-приложение v2 рабочий сервис отключен

Этот ответ относится только к CRA v1

Это, вероятно, из-за вашего веб-работника.

Если вы посмотрите в свой файл index.js, вы можете увидеть

registerServiceWorker();

Никогда не задавался вопросом, что он сделал? Если мы посмотрим на файл, из которого он был импортирован, мы увидим

// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read {URL}
// This link also includes instructions on opting out of this behavior.

Если вы хотите удалить веб-работника, не просто удалите строку. Импортируйте незарегистрированный и вызывайте его в своем файле вместо реестра.

import { unregister } from './registerServiceWorker';

и скажи позвони

unregister()

PS Когда вы отмените регистрацию, потребуется хотя бы одно обновление, чтобы оно заработало

Ответ 2

У меня была такая же проблема, когда я использую приложение create-react-app response create-react-app (и развертывание в heroku). Он продолжает показывать старую версию моего приложения 😡.

Я нашел проблему, похоже, на стороне браузера, она кэширует мой старый index.html с его устаревшим пакетом js

Возможно, вы захотите добавить следующее в заголовок ответа на стороне сервера

"Cache-Control": "no-store, no-cache"

или если вы также используете heroku create-react-app-buildpack react create-react-app-buildpack, обновите файл static.json

"headers": { 
    "/**": { 
        "Cache-Control": "no-store, no-cache" 
    } 
}

Я думаю, что таким образом вы все равно можете сохранить этого плохого обслуживающего работника 😂, а последний контент будет отображаться при загрузке N + 1 (второе обновление)

Надеюсь это поможет...

Ответ 3

Как уже упоминалось в некоторых предыдущих ответах здесь, как работник службы, так и (отсутствие) заголовков кэша могут сговориться против вас, когда дело доходит до просмотра старых версий вашего приложения React.

В документах React говорится о кэшировании:

Использование Cache-Control: max-age=31536000 для вашего build/static активы, и Cache-Control: no-cache для всего остального является безопасным и эффективная отправная точка, которая гарантирует, что ваш пользовательский браузер будет всегда проверяйте наличие обновленного файла index.html и кэшируете все файлы build/static за один год. Обратите внимание, что вы можете использовать один год истек на build/static безопасно, потому что содержимое файла хэш встроен в имя файла.

Как уже упоминалось в @squarism, в старых версиях create-реагировать-приложение по умолчанию было отказаться от регистрации сервисного работника, в то время как в более новых версиях отказано. Подробнее об этом можно прочитать в официальных документах. Это довольно простой процесс, чтобы сопоставить вашу конфигурацию с последним шаблоном, если вы начали со старой версии create-реагировать-приложение и хотите переключиться на новое поведение.

Смежные вопросы:

Ответ 5

Если ваша проблема связана с ресурсами, на которые статически ссылаются в index.html, такими как файлы .css или дополнительные файлы .js (например, файлы конфигурации), вы можете объявить переменную среды React, присвоить ей уникальное значение и сослаться на него в своем индексе. HTML файл.

В вашем скрипте сборки (bash):

REACT_APP_CACHE_BUST={e.g. build number from a CI tool} npm run build

В вашем index.html:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css?cachebust=%REACT_APP_CACHE_BUST%" />

Имя переменной должно начинаться с REACT_APP_. Подробнее о переменных среды в React: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables.