Google Chrome muss bei jedem Zugriff auf eine Website nach neuen JavaScript-Dateien suchen


25

Wenn ich in Internet Explorer zu den Internetoptionen gehe: Bildbeschreibung hier eingeben

Ich kann die Einstellungen anpassen, wenn der IE nach Updates sucht: Bildbeschreibung hier eingeben

Kann ich in Google Chrome etwas Ähnliches tun? Wenn ich momentan meine JavaScript-Datei ändere und in Visual Studio debugge, verwendet Chrome immer die zwischengespeicherte Version, anstatt die geänderte Version zu verwenden. Um die aktuelle Version nutzen zu können, muss ich meine temporären Internetdateien / den Cache manuell löschen, was sehr ärgerlich ist.


14
Warum deaktivieren Sie nicht stattdessen das von Visual Studio ausgeführte Caching? (Im Ernst, wer zum Teufel entwirft eine IDE mit Caching?)
jpmc26

2
@ jpmc26 Was für ein Caching?
EJoshuaS - Wiedereinsetzung von Monica

21
Ich sprach meinen letzten Kommentar locker aus; Ich entschuldige mich, wenn das unklar gemacht hat. Browser zwischenspeichern Dateien nur, wenn der Server bestimmte Header zurücksendet. Es ist dumm, wenn der Entwicklungsserver von Visual Studio standardmäßig Cache-Header zurücksendet, da Änderungen an diesen Dateien zu erwarten sind . Es lohnt sich, die Seite für eine zusätzliche Sekunde zu laden, um Probleme durch veraltete JS- und CSS-Dateien, die im Browser zwischengespeichert werden, zu vermeiden. Ich hoffe aufrichtig, dass es eine Möglichkeit gibt, es zu deaktivieren.
jpmc26

1
Es wurden keine Visual Studio-Optionen gefunden, aber eine Änderung in der web.config kann das Caching in Visual Studio beheben. iis.net/configreference/system.webserver/staticcontent/…
GER

1
Chrome-Erweiterung "Cache Killer" hat es für mich gelöst, ich weiß nicht warum, aber Strg + F5 funktioniert manchmal nicht für mich
flagg19

Antworten:


55

Option 1: Cache vorübergehend deaktivieren

  1. Öffnen Sie die Entwicklertools (Presse F12oder Menü, Weitere Tools, Entwicklertools).
  2. Öffnen Sie die Developer Tools-Einstellungen (Presse F1oder DevTools-Menü, Einstellungen)
  3. Aktivieren Sie "Cache deaktivieren (während DevTools geöffnet ist)" im Bereich "Einstellungen" unter "Netzwerk"

Option 2: Cache für Sitzung deaktivieren

Starten Sie Chrome mit den Befehlszeilenschaltern, --disk-cache-size=1 --media-cache-size=1die die Caches auf 1 Byte begrenzen und den Cache effektiv deaktivieren.

Option 3: Manuelle Aktualisierung erzwingen

Lädt die aktuelle Seite neu und ignoriert den zwischengespeicherten Inhalt: Shift+ F5oder Ctrl+ Shift+r

Chrome- Tastenkürzel - Chrome-Hilfe (unter "Webseiten-Tastenkürzel")

Option 4: Zusätzliche Nachladeoptionen ( Quelle )

Klicken Sie bei geöffneten Entwicklertools mit der rechten Maustaste auf die Schaltfläche "Neu laden", um ein Neu laden-Menü mit den folgenden Optionen anzuzeigen:

  • Normales Nachladen (Strg + R)
  • Festes Nachladen (Strg + Umschalt + R)
  • Cache leeren und neu laden

1
@Bruno Seltsam, ich habe auch immer Strg + F5 benutzt. Gerade getestet und beide scheinen zu funktionieren.
Jeroen

Ich schlage vor, Option 2 mit einem Twist zu verwenden. Erstellen Sie mit den Schaltern eine separate Verknüpfung zu Chrome, und benennen Sie sie anders. Legen Sie es an verschiedenen Enden Ihrer Windows-Taskleiste ab.
Christopher Hostage

8

Dies hängt möglicherweise nicht zu 100% mit der Chromaktualisierung zusammen, sondern dient der weiteren Entwicklung. Wie @Dom sagte, können Sie nach Ihrer Ressource ein? V = # hinzufügen. Eine Möglichkeit, den Prozess zu automatisieren, besteht darin, den Inhalt der Datei zu hashen und diesen als Version zu verwenden.

Ich habe einen Snippet-Code dazu in C # (Razor für die Implementierung), wenn dies helfen kann.

Helfer:

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";
    }

Implementierung:

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

Hoffe das hilft

BEARBEITEN --- Einige haben nach einer Build-Laufzeit gefragt und für 1000 kleine Ressourcen dauert es ungefähr 11 ms.

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

Bildbeschreibung hier eingeben https://en.code-bude.net/wp-content/uploads/2013/08/md5_performance_benchmark_2.png


2
Eine solche Versionierung von Ressourcen (oder das Einbetten der Version / des Hashs in den Ressourcennamen selbst) kann sehr hilfreich sein, insbesondere bei der Bereitstellung von Updates in der realen Welt, bei denen - anders als in den Regeln für Cache-Control-Header festgelegt - alles möglich ist Möglicherweise tritt ein Caching-Fehler auf, und viele Benutzer wissen nicht, wie der Cache aktualisiert werden muss (oder wie er aktualisiert werden muss). Wenn Sie (Ihre App erstellen) nach einer neu benannten Ressource fragen, kann diese möglicherweise nicht zwischengespeichert werden.
TripeHound

1
Ist das nicht ein großer Leistungsverlust? Hashing jeder CSS- und JS-Datei jedes Mal, wenn ein Link in eine Seite eingefügt wird ... Haben Sie Benchmarks für diese ausgeführt?
Raidri sagt Reinstate Monica

2
@Raidri Fliegendes Hashing ist wahrscheinlich keine gute Idee (ich hatte nicht bemerkt, dass es dies tat, als ich es zum ersten Mal kommentierte). Das Aktualisieren von Referenzen zur Verwendung eines Hashes oder einer Version während des Erstellungsprozesses ist.
TripeHound

@Raidri Ich habe eine ziemlich kleine Anwendung mit meaby 20 Ressourcen, die ich hashe, und ich habe keinen Unterschied in der Build-Zeit gesehen, also habe ich nicht wirklich versucht, es zu vergleichen. Ich bin mir auch nicht sicher, ob ich Ihren zweiten Satz verstehe, aber die Ressourcen werden zwischengespeichert und der Browser zwischenspeichert sie nur, wenn sich der Hash ändert => wenn Sie die Ressource selbst ändern.
Fred Beauchamp

Der Hash wird nicht zum Erstellungszeitpunkt berechnet, sondern bei jeder Seitenerstellung. Das ist ein Serverproblem und hat nichts mit Caching im Browser zu tun.
Raidri sagt Reinstate Monica

5

In anderen Fällen, in denen dies möglicherweise nicht möglich ist, z. B. wenn Sie eine Aktualisierung auf dem Computer eines Endbenutzers erzwingen möchten, auf den Sie keinen Zugriff haben, können Sie eine Versionsnummer an den Skriptnamen als Abfrageparameter anhängen, um den Browser zu identifizieren es als eine andere Datei . dh example.js?v=1. Denken Sie daran, dass Sie die Nummer bei jedem Neuladen ändern müssen, um es zu erzwingen.

Sie könnten dies auch mit lokaler Entwicklung tun, aber die Dev-Tools-Methode ist viel effizienter.


3

Zusätzlich zu @Steven answer können Sie nach dem Öffnen der Developer Tools Console mit der rechten Maustaste auf die Schaltfläche "Aktualisieren" klicken und das Dropdown-Menü verwenden.

In diesem Menü erhalten Sie eine Option für "Cache leeren und neu laden" .

Ist das, wonach Sie suchen.


1
Ich gehe davon aus, dass Sie eine nicht englische Version von Chrome verwenden. Ich benutze die englische Version und sie heißt "Empty Cache and Hard reload".
Nzall

1

Wenn Sie die Site entwickeln, sollten Sie wissen, dass Chrome die must-revalidateEinstellung erfordert, damit Cache-ControlDateien ordnungsgemäß abgerufen werden, wenn sie auf dem Server geändert werden.

In den anderen Antworten erfahren Sie, wie Sie mit UMSCHALT + F5 Ihre eigene Chrome-Version zwingen, alle Dateien erneut abzurufen. Aber ist es sinnvoll, alle Benutzer der Site dazu aufzufordern, wenn sich die Site ändert? Wenn Sie "Einschließen" festlegen Cache-Control, must-revalidateprüft Chrome, ob Dateien geändert wurden, und lädt sie bei Bedarf ordnungsgemäß herunter.

Details finden Sie in diesem Blog-Beitrag: https://agiletribe.wordpress.com/2018/01/29/caching-for-chrome/

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.