Chromeで動作するアプリについて不正なキャッシュが残り続けてしまう

Question

Chromeで動作するアプリで昔のキャッシュが残り続け, 開発の邪魔になる

表題の通りです.
「閲覧履歴の消去」からキャッシュをクリアする事で解決しますが, 結構頻発したので, 何か対策などあれば教えていただけると幸いです.

例1. Webpack

Webpackでビルドされた新たなJSファイルが読み込まれず, フロントエンドの挙動が昔のJSファイルのまま.

例2. Eel

pythonのGUIライブラリであるEelにおいても同様の現象が発生.
htmlファイルを書き換えたにも関わらず, UIは編集前のhtmlファイルのまま.

Answer 1

CTL+SHIFT+R?

Comments

[ShoKitami]

確かにスーパーリロード使えば問題なさそうですね.
Eelとかだと通用しないと思いますが...

手っ取り早く再読み込みするには, その方法がかなり有用そうです.

Answer 2

よくある手法としては、「生成したファイルのハッシュ値などをファイル名に追加することで、中身が変わるたびにファイル名を変更して実質的にキャッシュを無効化する」という方法があります。

Webpackではwebpack-manifest-pluginがあります。

Comments

[ShoKitami]

なるほど...
ブラウザ側の設定でどうこうするのもちょっと難しそうですし, 開発環境側のファイル名を直接変えてしまった方が早いですかね...

ご回答ありがとうございます.

Answer 3

開発時だけの問題なら開発者ツールの設定でキャッシュしないようにも出来ると思いますが、それでは無理そうですか？

Comments

[ShoKitami]

今のところは仰る通り, 開発時だけの問題ですね...

開発者ツールの「Network」タブ内に「Disable Cache(while Devtool is opened)」というのがあったので, 当面はこれを有効にしていけそうです.
ありがとうございました.