ウェブサイトにアクセスするたびに、Google Chromeに新しいJavaScriptファイルをチェックさせる


25

そのため、Internet Explorerのインターネットオプションに移動すると: ここに画像の説明を入力してください

IEが更新を確認するタイミングの設定を調整できます。 ここに画像の説明を入力してください

Google Chromeで同様のことができますか?現在、JavaScriptファイルを変更してVisual Studioからデバッグすると、Chromeは変更されたバージョンを使用するのではなく、常にキャッシュバージョンを使用します。現在のバージョンを使用できるようにするには、一時的なインターネットファイル/キャッシュを手動でクリアする必要がありますが、これは本当に面倒です。


14
代わりに、Visual Studioが行うキャッシュを無効にしないのはなぜですか?(まじめに、一体誰がキャッシングでIDEを設計しますか?)
jpmc26

2
@ jpmc26キャッシングとは?
EJoshuaS-モニカーの復活

21
最後のコメントはおおまかに言った。それが不明確になった場合、私の謝罪。ブラウザは、サーバーが特定のヘッダーを送り返す場合にのみファイルをキャッシュします。Visual Studioの開発サーバーがデフォルトでキャッシュヘッダーを返送するのは愚かなことです。これらのファイルへの変更が予想されるためです。余分な1秒のページの読み込みは、ブラウザーにキャッシュされている古いJSおよびCSSファイルの問題を処理しない価値があります。無効にする方法があることを心から願っています。
jpmc26

1
Visual Studioオプションが見つかりませんでしたが、開発web.configの変更により、Visual Studioのキャッシュが解決される場合があります。iis.net/configreference/system.webserver/staticcontent/…–
GER

1
Chrome拡張機能「キャッシュキラー」で解決しました。理由はわかりませんが、ctrl + f5が機能しない場合があります
-flagg19

回答:


55

オプション1:キャッシュを一時的に無効にする

  1. 開発者ツールを開く(プレスF12またはメニュー、その他のツール、開発者ツール)
  2. 開発者ツールの設定を開きます(プレスF1またはDevToolsメニュー、設定)
  3. [設定]ペインの[ネットワーク]ヘッダーの下にある[キャッシュを無効にする(DevToolsが開いている間)]をオンにします。

オプション2:セッションのキャッシュを無効にする

--disk-cache-size=1 --media-cache-size=1キャッシュを1バイトに制限するコマンドラインスイッチでChromeを起動し、キャッシュを事実上無効にします。

オプション3:手動強制更新

キャッシュされたコンテンツを無視して、現在のページをリロードします: Shift+ F5または Ctrl+ Shift+r

Chromeキーボードショートカット-Chromeヘルプ(「ウェブページのショートカット」の下)

オプション4:追加の再読み込みオプションソース

開発者ツールを開いた状態で、[再読み込み]ボタンを右クリックして、次の内容を含む再読み込みメニューを表示します。

  • 通常のリロード(Ctrl + R)
  • ハードリロード(Ctrl + Shift + R)
  • 空のキャッシュとハードリロード

1
@Bruno Odd、私はいつもctrl + f5も使っていました。テストしたばかりで、両方が機能しているようです。
イェルーン

オプション2をひねりながら使用することをお勧めします。スイッチを使用してChromeに個別のショートカットを作成し、別の名前を付けます。Windowsタスクバーの別の端に配置します。
クリストファー人質

8

クロムの更新に100%関連するわけではありませんが、さらなる開発のためです。@Domが言ったように、リソースの後に?v =#を追加できます。プロセスを自動化する1つの方法は、上記のファイルのコンテンツをハッシュし、それをバージョンとして使用することです。

これが役立つ場合は、C#(実装用のRazor)でこれを行う方法に関するスニペットコードがあります。

ヘルパー:

public static string HashUrl(string relativeUrl)
    {
        var server = HttpContext.Current.Server;
        if (File.Exists(server.MapPath(relativeUrl)))
        {
            byte[] hashData;
            using (var md5 = MD5.Create())
            using (var stream = File.OpenRead(server.MapPath(relativeUrl)))
                hashData = md5.ComputeHash(stream);

            return relativeUrl.Replace("~", "") + "?v=" + BitConverter.ToString(hashData).Replace("-", "");
        }
        return relativeUrl + "?v=notFound";
    }

実装:

<link rel="stylesheet" href=@Util.HashUrl("~/Controllers/Home/Views/Index.css") />

お役に立てれば

編集---一部のビルドランタイムを要求し、1000個の小さなリソースの場合、約11ミリ秒かかります。

https://en.code-bude.net/2013/08/07/md5-hashes-in-c-benchmark-and-speed-%E2%80%8B%E2%80%8Boptimization/

ここに画像の説明を入力してください https://en.code-bude.net/wp-content/uploads/2013/08/md5_performance_benchmark_2.png


2
このようなリソースのバージョン管理(またはリソース名自体にバージョン/ハッシュを埋め込むこと)は、特に実際の更新を展開する場合に非常に役立ちます。キャッシュが発生している可能性があり、多くのユーザーはキャッシュを更新する方法(または必要性)を知りません。(アプリを作成する)新しく名前が付けられたリソースを要求する場合、キャッシュすることはできません。
TripeHound

1
これは大きなパフォーマンスの低下ではありませんか?リンクがページに挿入されるたびにすべてのcssおよびjsファイルをハッシュします...このためのベンチマークを実行しましたか?
Raidriが復活モニカ言う

2
@Raidriのオンザフライでのハッシュ化は、おそらく良い考えではありません(最初にコメントしたときに、これを行っていることに気づかなかった)。ビルドプロセス中にハッシュまたはバージョンを使用するように参照を更新します。
-TripeHound

@Raidri私はハッシュ20のリソースを備えた比較的小さなアプリケーションを持っていますが、ビルド時間に違いは見られないので、ベンチマークを実際に試みませんでした。また、私はあなたの2番目の文を理解しているのかわかりませんが、リソースはキャッシュされ、ブラウザはハッシュ変更=>リソース自体を変更した場合にのみ再キャッシュします。
フレッドbeuchuchamp

ハッシュはビルド時に計算されるのではなく、ページ生成ごとに計算されます。これはサーバーの問題であり、ブラウザーでのキャッシュとは関係ありません。
Raidriが復活モニカ言う

5

アクセスできないエンドユーザーのコンピューターを強制的に更新したい場合など、これらが不可能な場合は、ブラウザーに識別させるクエリパラメーターとしてスクリプト名にバージョン番号を追加できます。別のファイルとして。すなわち。example.js?v=1。強制的にリロードするたびに数値を変更する必要があることに留意してください。

ローカル開発でもこれを行うことができますが、開発ツールの方法ははるかに効率的です。


3

@Stevenの回答に加えて、Developer Tools Consoleを開いたときに、更新ボタン右クリックしてドロップダウンメニューを使用できます。

このメニューには、「空のキャッシュとハードリロード」のオプションがあります。

あなたが探しているものです。


1
あなたは英語以外のバージョンのChromeを使用していると思います。私は英語版を使用しますが、これは「空のキャッシュとハードリロード」と呼ばれます。
-Nzall

1

サイトを開発している場合、サーバー上でファイルが変更されたときに適切にファイルを再取得するには、Chromeでmust-revalidate設定が必要であることを知っておく必要がCache-Controlあります。

他の回答では、SHIFT-F5を押して独自のバージョンのChromeですべてのファイルを再取得する方法を説明しています。しかし、サイトが変更されるたびにこれを行うようにサイトのすべてのユーザーに伝えるのは合理的ですか?Cache-Control含めるように設定すると、must-revalidateChromeはファイルが変更されたかどうかを確認し、必要に応じて適切にダウンロードします。

このブログ投稿の詳細を参照してください:https : //agiletribe.wordpress.com/2018/01/29/caching-for-chrome/

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.