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

Ответ 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-реагировать-приложение и хотите переключиться на новое поведение.

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

• Как избежать кеширования для create-реакции-приложения
• ReactJS: Как запретить браузеру кэшировать статические файлы?
• как очистить кеш браузера в реагировать

Ответ 4

Похоже, что они изменились с отказа от участия в отношении работника службы. Вот коммит, который изменил README, и он имеет примеры, похожие на ответ Керри G:

https://github.com/facebook/create-react-app/commit/1b2813144b3b0e731d8f404a8169e6fa5916dde4#diff-4e6ec56f74ee42069aac401a4fe448ad

Ответ 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.