comment mettre en cache les images et css, js?

Question

Je voudrais avoir des images, CSS et JavaScript côté client mis en cache sur leur navigateur lorsqu'ils chargent une page Web. Il y a tellement de différents types de mise en cache, je suis confus quant à ceux à utiliser avec asp.net mvc.

Serait-il également possible d'avoir leurs navigateurs vérifient pour les versions nouvelles ou modifiées de ces fichiers?

Merci!

Answer 1

Les navigateurs prennent en charge automatiquement pour vous, en fait. Vous devez sortir de votre façon de les mettre en cache pas css, js, html et images.

Je ne suis pas familier avec ASP MVC, mais je pense qu'ils type de cache que vous pensez est la mise en cache opcode pour votre créé côté serveur dynamique de sortie?

Answer 2

Vous devez définir les en-têtes de contrôle de cache sur le serveur. Vous pouvez le faire en collant dans votre web.config:

<system.webServer>
  <staticContent>
     <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
  </staticContent>
</system.webServer>

raconterait le navigateur maintenant de vérifier même pour le nouveau contenu sur quoi que ce soit statique pendant 30 jours.

Pour votre deuxième question, prévoir un mécanisme d'ajouter un querystring au contenu. Dans mon projet actuel, nous compressons et combinons et javascript et css dans le cadre de la construction. Lors de mettre des liens dans la page est ressemble à:

<script src="/Resources/Javascript/Combined.js?v=2.2.0.1901" type="text/javascript"></script>

Le querystring est le nombre Major.Minor.0.Changeset et des changements à tout moment, nous poussons une construction, ce qui provoque le client à nouveau chercher. La même chose se produit sur les feuilles de style dans leur élément <link>.

Answer 3

et @Salsa Creasey @ Paul sont à la fois exact que les navigateurs gérer 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 avez besoin de mettre à jour les fichiers que vous avez aucune garantie que le navigateur du client vérifiera une version mise à jour. Dans de nombreux cas, ils ne font que cela après un montant fixe de temps a passé qui peut créer une expérience utilisateur minables.

Il y a un certain nombre de questions déjà posées sur ce site à la façon de traiter les alertes les navigateurs client actualiser le cache . Bref, ils comptent tous sur le changement du lien lorsque vous modifiez le contenu du fichier.

Vous pouvez ajouter un paramètre à l'URL qui ne sera utilisé à des fins de mise en cache tels que:

<script src="/myJavascript.js?version=4"></script>

Ensuite, il suffit de changer le numéro de version lorsque vous modifiez le contenu et la nécessité de forcer un rafraîchissement côté client ala cette réponse .

Answer 4

Jetez un oeil à la réponse Je posté ici pour une solution qui maximise l'avantage d'utiliser la mise en cache et évite tout problème avec les utilisateurs besoin de 'dur' refresh ( 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, ce qui est vraiment le but. Le calcul de la valeur de hachage est super rapide, et il est mis en mémoire cache sur le serveur si le rendu des pages ne sont pas sensiblement ralenti. L'ensemble est mesurée 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 à partir de fichiers CSS car ils ne sont pas le serveur généré sur mon site (encore).

Answer 5

Il est préférable de faire dans IIS ou dans votre fichier de configuration - assurez-vous que votre CSS / JS / images sont configurées pour ne jamais expirer

.

Lorsque vous les faites référence à partir de votre code, je suggère une version ou annexant date de construction au nom du fichier, par exemple script.js? 20100120, de sorte que lorsque vous venez autour de les changer, il vous suffit de changer la version pour forcer un rafraîchissement de tous les navigateurs qui ont mises en cache il.

Answer 6

mise en cache côté client est géré automatiquement par les navigateurs lorsque vous définir correctement en-têtes Cache-Control et définir web.config. Comme ça:

<system.webServer>
    <staticContent>
        <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="00.00:10:00" />
    </staticContent>
</system.webServer>