web-dev-qa-db-fra.com

Comment empêcher la mise en cache de mon fichier Javascript?

J'ai un html simple:

<html>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<script src="test.js"></script>
</body>
</html>

Dans test.js, j’ai modifié une fonction Javascript, mais mon navigateur met ce fichier en cache. Comment désactiver le cache pour le script src?

javascriptcaching
103
Bdfy

Ajouter une chaîne de requête aléatoire à la src

Vous pouvez le faire manuellement en incrémentant la chaîne de requête chaque fois que vous apportez une modification:

<script src="test.js?version=1"></script>

Ou si vous utilisez un langage côté serveur, vous pouvez générer automatiquement ceci:

ASP.NET:

<script src="test.js?rndstr=<%= getRandomStr() %>"></script>

Plus d'informations sur la suppression de cache peuvent être trouvées ici:

https://curtistimson.co.uk/post/front-end-dev/what-is-cache-busting/

155
Curt
<script src="test.js?random=<?php echo uniqid(); ?>"></script>

EDIT: Ou vous pouvez utiliser le temps de modification du fichier pour qu'il soit mis en cache sur le client.

<script src="test.js?random=<?php echo filemtime('test.js'); ?>"></script>
31
Alex Pliutau

Configurez votre serveur Web pour envoyer des en-têtes HTTP de contrôle de mise en cache pour le script.

Faux en-têtes dans les documents HTML:

  1. Ne sont pas aussi bien supportés que de vrais en-têtes HTTP
  2. Appliquer au document HTML, pas aux ressources auxquelles il est lié
12
Quentin

Vous pouvez ajouter un queryString à votre src et le changer uniquement lorsque vous publierez une version mise à jour:

<script src="test.js?v=1"></script>

De cette manière, le navigateur utilisera la version mise en cache jusqu'à ce qu'une nouvelle version soit spécifiée (v = 2, v = 3 ...).

11
daveoncode

Vous pouvez ajouter une chaîne de requête aléatoire (ou chaîne de date/heure) à l'URL qui pointe vers votre script. Ainsi:

<script type="text/javascript" src="test.js?q=123"></script>

Chaque fois que vous actualisez la page, vous devez vous assurer que la valeur de 'q' est modifiée.

6
Bas Slagter