JavaScript - フロントエンド開発。ローカルの静的ファイルは頻繁に変更されます。プレビュー中にキャッシュの問題を解決するにはどうすればよいですか?

Question

弊社ではプロジェクトをSVNからローカルにダウンロードし、ローカルで修正してからサーバーにアップロードします。
現在の問題は、いくつかのスタイルがローカルで変更されたり、外部にリンクされた js がブラウザーでプレビューされると、キャッシュの理由で変更が表示されず、キャッシュを手動でクリアするしかないことです。ただし、変更する場合はさらに面倒です。頻繁にあります。 fis にタイムスタンプを追加する方法を見てみると、プロジェクトはデプロイまたは更新時にのみ再構成されるようです。このようなローカルな変更を行うための良い方法はありますか?

Answer 1

Chrome 開発ツール > ネットワーク > キャッシュを無効にします。下の図を参照してください

Answer 2

CSSファイルとJSファイルの後にバージョン番号を追加します

Answer 3

ページを更新するたびにこのプラグインのボタンをクリックするだけで、Chrome のクリーン キャッシュ プラグインを使用できます。Chrome の更新ボタンは必要ありません。

Answer 4

webpack や gulp などのビルド ツールを使用することをお勧めします。プロジェクトをビルドするときは、ファイルの後にバージョン番号を入力してブラウザー リクエストをトリガーします。

Answer 5

フロントエンドコードの開発とデプロイ

Answer 6

以下に示すように、変更するたびにファイルの後にタイムスタンプを追加して、リクエストされたファイルが新しく変更されたファイルであることを確認できます
<link rel="stylesheet" href="css/main.css?i=2017051101" >
<script src="js/config.js?i=2017051101"></script>

Answer 7

ページ上のボタンを強制的に更新できます
ボタンバインディングイベント location.reload()

Answer 8

CMD + SHIFT + R