comment mettre en cache css, images et js?
Je voudrais avoir des images, css et javascript mis en cache côté client sur leur navigateur lorsqu'ils chargent une page web. Il y a tellement de différents types de mise en cache que je suis confus quant à ceux avec lesquels utiliser asp.net mvc.
Serait-il également possible que leurs navigateurs vérifient les versions nouvelles ou modifiées de ces fichiers?
Merci!
6 réponses
Les navigateurs s'en occupent automatiquement, en fait. Vous devez sortir de votre chemin pour les amener à ne pas mettre en cache css, js, html et images.
Je ne suis pas si familier avec ASP MVC, mais je pense qu'ils type de mise en cache que vous pensez est la mise en cache de l'opcode pour votre sortie dynamique créée côté serveur?
Vous devez définir les en-têtes de contrôle du cache sur le serveur. Vous pouvez le faire en collant ceci dans votre web.configuration:
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
</staticContent>
</system.webServer>
Cela indiquerait au navigateur maintenant de vérifier même le nouveau contenu sur tout ce qui est statique pendant 30 jours.
Pour votre deuxième question, fournissez un mécanisme d'ajout d'une chaîne de requête au contenu. Dans mon projet actuel, nous compressons et combinons et javascript et css dans le cadre de la construction. Lorsque vous mettez des liens dans la page ressemble à:
<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script>
La chaîne de requête est le principal.Mineur.0.Changeset number et change chaque fois que nous poussons une construction, provoquant le client à la récupérer. La même chose se produit exactement sur les feuilles de style dans leur élément <link>
.
@Paul Creasey et @Salsa ont tous deux raison de dire que les navigateurs gèrent la mise en cache par défaut tant que le lien est le même.
Comme vous l'avez mentionné, cela pose un problème lorsque vous devez mettre à jour ces fichiers car vous n'avez aucune garantie que le navigateur du client vérifiera une version mise à jour. Dans de nombreux cas, ils ne le font qu'après un laps de temps fixe qui peut créer une expérience utilisateur minable.
Il y a un certain nombre de questions déjà posées sur ce site gérer l'alerte des navigateurs clients pour actualiser le cache . En bref, ils comptent tous sur la modification du lien lorsque vous modifiez le contenu du fichier.
Vous pouvez ajouter un paramètre à L'URL qui ne sera utilisé qu'à des fins de mise en cache telles que:
<script src="/myJavascript.js?version=4"></script>
Ensuite, il suffit de changer le numéro de version lorsque vous modifiez le contenu et que vous devez forcer une actualisation côté client ala cette réponse .
Jetez un oeil à la réponse que j'ai posté ici pour une solution qui maximise l'avantage de l'utilisation de la mise en cache, et évite tout problème avec les utilisateurs à actualiser " dur " ( Ctrl+F5 ).
, Il utilise un hachage MD5 du contenu lui-même dans l'URL, de sorte que l'URL reste la même tant que le fichier est le même, qui est vraiment l'objectif. Le calcul du hachage est super rapide, et il est mis en cache en mémoire sur le serveur, de sorte que le rendu de la page n'est pas sensiblement ralenti. Le tout est exprimé en microsecondes, et les avantages ont été (sur mon site pour les plongeurs) impressionnant jusqu'à présent. Je l'applique à toutes les images, CSS et JS à l'exception des images provenant des fichiers CSS car elles ne sont pas générées par le serveur sur mon site (encore.)
Ceci est mieux fait dans IIS ou dans votre fichier de configuration-assurez-vous que vos css/js/images sont définies pour ne jamais expirer.
Lorsque vous les référencez à partir de votre code, je suggère d'ajouter une version ou une date de construction au nom de fichier, par exemple script.js?20100120, de sorte que lorsque vous venez de les changer, il vous suffit de changer la version pour forcer une actualisation de tous les navigateurs qui l'ont mis en cache.
La mise en cache côté Client est gérée automatiquement par les navigateurs lorsque vous définissez correctement cache-en-têtes de contrôle et définir web.config. Comme ça:
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" />
</staticContent>
</system.webServer>