web-dev-qa-db-ja.com

CRA Reactを使用したキャッシュ無効化

サイトを更新したら、npm run buildを実行し、新しいファイルをサーバーにアップロードします。まだサイトの古いバージョンを探しています。

Reactを使用しないと、キャッシュ無効化を使用してサイトの新しいバージョンを見ることができます。私はこれをします：

前のファイル

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

新しいファイル

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

どうすればこのようなことができますか、reactアプリを作成してキャッシュを無効化するにはどうすればよいですか？

GitHubには、これについて反応アプリを作成するスレッドが多数ありますが、適切な答えや簡単な答えを持っている人はいません。

reactjscachingreact-reduxcreate-react-app
33
Alfrex92

編集：create-react-app v2では、デフォルトでService Workerが無効になっています

この回答はCRA v1にのみ適用されます

これはおそらくWebワーカーが原因です。

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.

Web Workerを削除する場合は、単に行を削除しないでください。登録解除のインポートを行い、登録の代わりにファイルで呼び出します。

import { unregister } from './registerServiceWorker';

そして電話する

unregister()

追伸登録を解除すると、少なくとも1回更新して動作するようになります

34
Kerry Gougeon

create-react-app（およびherokuにデプロイ）を使用するときに同じ問題が発生しました。古いバージョンのアプリが引き続き表示されますか????。

問題はブラウザ側にあるようで、古いindex.htmlを古いjsバンドルでキャッシュします

サーバー側の応答ヘッダーに次を追加することができます。

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

または、heroku create-react-app-buildpackも使用している場合は、static.jsonファイルを更新します

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

この方法で、あなたはまだその貧しいサービスワーカーを維持することができると思いますか????

お役に立てれば...

8
Ryan Chu

ここでの以前の回答のいくつかで述べたように、サービスワーカーと（不足している）キャッシュヘッダーの両方が、古いバージョンのReactアプリを見ることになります。

Reactドキュメントは、キャッシュになると次のように述べます。

Cache-Control: max-age=31536000アセットにbuild/staticを使用し、その他すべてにCache-Control: no-cacheを使用することは、ユーザーのブラウザが常に更新されたindex.htmlファイルをチェックすることを保証する安全で効果的な開始点です。すべてのbuild/staticファイルを1年間キャッシュします。ファイルの内容のハッシュはファイル名に埋め込まれているため、build/staticで1年の有効期限を安全に使用できることに注意してください。

@squarismで述べたように、create-react-appの古いバージョンはデフォルトでService Worker登録のopt-outでしたが、新しいバージョンはopt-in。詳細については official docs をご覧ください。古いバージョンのcreate-react-appから始めて、新しい動作に切り替えたい場合、設定を最新の template に一致させるのは非常に簡単なプロセスです。

関連する質問：

5
bszom

サービスワーカーに関してオプトアウトからオプトインに変更されたようです。 READMEを変更したコミットは次のとおりです。KerryGの答えに似た例があります。

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

2
squarism

.cssファイルや追加の.jsファイル（例：構成ファイル）など、index.htmlで静的に参照されるリソースに問題がある場合は、React環境変数を宣言し、それに固有の値を割り当てて、 index.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 。

1
Michal Ciesielski