Forcer Google Chrome à rechercher de nouveaux fichiers JavaScript chaque fois que j'accède à un site Web

25

Donc, si je vais aux options Internet dans Internet Explorer: entrez la description de l'image ici

Je peux ajuster les paramètres lorsque IE vérifie les mises à jour: entrez la description de l'image ici

Puis-je faire quelque chose de similaire dans Google Chrome? À l'heure actuelle, lorsque je modifie mon fichier JavaScript et que je débogue à partir de Visual Studio, Chrome utilise toujours la version mise en cache plutôt que la version modifiée. Afin de pouvoir utiliser la version actuelle, je dois vider manuellement mes fichiers / cache Internet temporaires, ce qui est vraiment ennuyeux.

EJoshuaS - Réintégrer Monica
la source
14
Pourquoi ne désactivez-vous pas la mise en cache effectuée par Visual Studio à la place? (Sérieusement, qui diable conçoit un IDE avec mise en cache?)
jpmc26
2
@ jpmc26 Quelle mise en cache?
EJoshuaS
21
J'ai formulé mon dernier commentaire sans serrer; mes excuses si cela n'a pas été clair. Les navigateurs ne mettent en cache les fichiers que si le serveur renvoie des en-têtes spécifiques. Il est stupide pour le serveur de développement de Visual Studio de renvoyer les en-têtes de cache par défaut, car des modifications de ces fichiers doivent être attendues . Une partie supplémentaire de chargement de la page vaut bien la peine de ne pas traiter les problèmes de fichiers JS et CSS obsolètes mis en cache dans le navigateur. J'espère sincèrement qu'il existe un moyen de le désactiver.
jpmc26
1
Impossible de trouver des options Visual Studio, mais un changement de développement web.config peut résoudre la mise en cache dans Visual Studio. iis.net/configreference/system.webserver/staticcontent/…
GER
1
L'extension Chrome "Cache Killer" l'a résolu pour moi, je ne sais pas pourquoi mais ctrl + f5 parfois ne fonctionne pas pour moi
flagg19

Réponses:

55

Option 1: désactiver temporairement le cache

  1. Ouvrir les outils de développement (appuyez sur F12ou Menu, plus d'outils, outils de développement)
  2. Ouvrez les paramètres des outils de développement (appuyez sur F1ou sur le menu DevTools, Paramètres)
  3. Cochez "Désactiver le cache (lorsque DevTools est ouvert)" sous l'en-tête Réseau du volet Préférences

Option 2: désactiver le cache pour la session

Démarrez Chrome avec les commutateurs de ligne de commande --disk-cache-size=1 --media-cache-size=1qui limiteront les caches à 1 octet, désactivant efficacement le cache.

Option 3: Actualisation forcée manuelle

Recharger la page actuelle en ignorant le contenu mis en cache: Shift+ F5ou Ctrl+ Shift+r

Raccourcis clavier de Chrome - Aide Chrome (sous "Raccourcis de page Web")

Option 4: Options de rechargement supplémentaires ( source )

Avec les outils de développement ouverts, cliquez avec le bouton droit sur le bouton Recharger pour afficher un menu de rechargement avec les éléments suivants:

  • Recharge normale (Ctrl + R)
  • Rechargement dur (Ctrl + Maj + R)
  • Cache vide et rechargement dur
Steven
la source
1
@Bruno Odd, j'ai aussi toujours utilisé ctrl + f5. Juste testé et les deux semblent fonctionner.
Jeroen
Je suggère d'utiliser l'option 2, avec une touche. Créez un raccourci distinct vers Chrome avec les commutateurs et nommez-le différemment. Placez-le à différentes extrémités de votre barre des tâches Windows.
Christopher Hostage
8

Il peut ne pas être lié à 100% à l'actualisation de chrome, mais pour un développement ultérieur. Comme l'a dit @Dom, vous pouvez ajouter un? V = # après votre ressource. Une façon d'automatiser le processus consiste à hacher le contenu dudit fichier et à l'utiliser comme version.

J'ai un extrait de code sur la façon de le faire en C # (Razor pour la mise en œuvre) si cela peut aider.

Assistant:

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

La mise en oeuvre:

<link rel="stylesheet" [email protected]("~/Controllers/Home/Views/Index.css") />

J'espère que cela t'aides

EDIT --- Certains ont demandé un runtime de build et 1000 petites ressources, cela prend environ 11 ms.

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

entrez la description de l'image ici https://en.code-bude.net/wp-content/uploads/2013/08/md5_performance_benchmark_2.png

Fred beauchamp
la source
2
La gestion de versions de ressources comme celle-ci (ou en incorporant la version / le hachage dans le nom de la ressource lui-même) peut être très utile, en particulier lors du déploiement de mises à jour dans le monde réel, où - contrairement à ce que disent les règles sur l'en-tête de contrôle du cache - de toutes les manières de mise en cache peut se produire, et de nombreux utilisateurs ne sauront pas (ou la nécessité) d'actualiser le cache. Si vous (créez votre application) demandez une ressource nouvellement nommée, elle ne peut pas être mise en cache.
TripeHound
1
N'est-ce pas une grosse perte de performances? Hachage de chaque fichier css et js chaque fois qu'un lien est inséré dans une page ... Avez-vous exécuté des tests de performances pour cela?
Raidri dit Réintégrer Monica le
2
@Raidri Hashing à la volée n'est probablement pas une bonne idée (je n'avais pas remarqué qu'il faisait cela lorsque j'ai commenté pour la première fois). La mise à jour des références pour utiliser un hachage ou une version pendant le processus de génération est.
TripeHound
@Raidri J'ai une application assez petite avec près de 20 ressources que je hache et je n'ai pas vu de différence dans le temps de construction, donc je n'ai pas vraiment essayé de la comparer. De plus, je ne suis pas sûr de comprendre votre deuxième phrase, mais les ressources sont mises en cache et le navigateur ne les remet en cache que si le hachage change => si vous modifiez la ressource elle-même.
fred beauchamp
Le hachage n'est pas calculé au moment de la génération mais à chaque génération de page. C'est un problème de serveur et n'a rien à voir avec la mise en cache dans le navigateur.
Raidri dit Réintégrer Monica le
5

Dans d'autres cas où cela peut ne pas être possible, par exemple en voulant forcer une actualisation sur l'ordinateur d'un utilisateur final auquel vous n'avez pas accès, vous pouvez ajouter un numéro de version au nom du script en tant que paramètre de requête permettant au navigateur d'identifier en tant que fichier différent . c'est à dire. example.js?v=1. Gardez à l'esprit que vous devrez modifier le nombre à chaque rechargement pour le forcer.

Vous pouvez également le faire avec le développement local, mais la méthode des outils de développement est beaucoup plus efficace.

Dom
la source
3

en plus de la réponse @Steven, lorsque vous ouvrez la console des outils du développeur , vous pouvez cliquer avec le bouton droit sur le bouton d'actualisation et utiliser le menu déroulant.

Dans ce menu, vous obtenez une option pour "Cache vide et rechargement dur" .

C'est ce que vous cherchez.

Leze
la source
1
Je suppose que vous utilisez une version non anglaise de Chrome. J'utilise la version anglaise, et elle s'appelle "Cache vide et rechargement dur".
Nzall
1

Si vous développez le site, vous devez savoir que Chrome nécessite le must-revalidateparamètre Cache-Controlafin de récupérer correctement les fichiers lorsqu'ils sont modifiés sur le serveur.

Les autres réponses vous indiquent comment appuyer sur SHIFT-F5 pour forcer votre propre version de Chrome à récupérer tous les fichiers. Mais est-il raisonnable de dire à tous les utilisateurs du site de le faire à chaque fois que le site change? Si vous définissez l' Cache-Controlinclusion, must-revalidateChrome vérifiera si des fichiers ont été modifiés, puis les téléchargera correctement en cas de besoin.

Voir les détails sur cet article de blog: https://agiletribe.wordpress.com/2018/01/29/caching-for-chrome/

AgilePro
la source