React SPA force load新しいJSビルド（モバイルを含む）

Question

私は現在、プロダクション用のスクリプトをビルドするたびに新しいJSをロードしません。

私はcreate-react-appを使用しています。それを動作させる唯一の方法は、キャッシュを手動でクリアすることです。

私はwindow.location.reload(true)を入れようとしましたが、それでも最新のJSをフェッチしません。

、その後、私はそれらの

<meta http-equiv="cache-control" content="max-age=0" /> 
<meta http-equiv="cache-control" content="no-cache" /> 
<meta http-equiv="expires" content="0" /> 
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 
<meta http-equiv="pragma" content="no-cache" /> 

何も作業していない私のindex.htmlでこれを入れてみてください。

ブラウザでは、特にモバイル用の新しいJS（Chrome Android、Firefox）は読み込まれません。

私はCloudflareを使用していますが、すでにpurge cacheを試しています。

ブラウザに新しいスクリプトを読み込ませるためのその他のソリューションはありますか？

おかげ

Answer 1

一般的な方法は、ブラウザが消灯し、それが前にあったものとは完全に異なるファイルであると信じるものを取り出してJSファイルに一意のハッシュを置くことです。

あなたはWebPACKのを使用している場合、あなたはあなたの出力JSファイル名に[hash]を追加することができます（私はあなたが作成-反応するアプリであると仮定して）：

output: { 
    filename: 'bundle.[hash].js', 
}, 

Answer 2

私は信じてキャッシュ属性のみとなり効果index.htmlそれは依存ファイルではありません。これをjavaスクリプトファイルで行うには、レスポンスヘッダにこれらの値を書き込むために何かサーバ側で行う必要があります。あなたは、あなたのスクリプトの末尾にクエリ文字列を追加してみてください

<script src='/dist/main.js?v=123'></script> 

ようなものを参照し、リリースごとにそのバージョン番号をインクリメントすることができます。

大胆な感じがある場合は、ファイル名にhashingを追加できます。これには、ejectingの設定がcreate-react-appから設定されている可能性があります。また、取り除かずにウェブパックの設定をカスタマイズするという、いくぶん厄介なものの1つに目を通すこともできます。methods