.net - desde - cómo almacenar en caché css, images y js?

no cache css

Question

Me gustaría tener imágenes, CSS y javascript en caché del lado del cliente en su navegador cuando cargan una página web. Hay tantos tipos diferentes de almacenamiento en caché que no estoy seguro de cuáles usar con asp.net mvc.

¿También sería posible hacer que sus navegadores comprueben si hay versiones nuevas o modificadas de estos archivos?

¡Gracias!

Answer 1

@Paul Creasey y @Salsa son correctos en cuanto a que los navegadores manejarán el almacenamiento en caché por defecto siempre que el enlace sea el mismo.

Como mencionó, esto plantea un problema cuando necesita actualizar esos archivos, ya que no tiene garantía de que el navegador del cliente verifique si hay una versión actualizada. En muchos casos, solo lo hacen después de que ha transcurrido un período de tiempo fijo que puede crear una experiencia de usuario pésima.

Hay una serie de preguntas que ya se han hecho en este sitio sobre cómo manejar la alerta a los navegadores del cliente para actualizar el caché . En resumen, todos confían en cambiar el enlace cuando cambias los contenidos del archivo.

Puede agregar un parámetro a la URL que solo se usará para el almacenamiento en caché, como por ejemplo:

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

Luego simplemente cambie el número de versión cuando cambie los contenidos y necesite forzar una actualización del lado del cliente a esta respuesta .

Answer 2

Debe establecer encabezados de control de caché en el servidor. Puedes hacer esto pegando esto en tu web.config:

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

Esto le diría al navegador que incluso compruebe si hay contenido nuevo en cualquier elemento estático durante 30 días.

Para su segunda pregunta, proporcione algún mecanismo para agregar una cadena de consulta al contenido. En mi proyecto actual, comprimemos y combinamos y javascript y css como parte de la compilación. Al poner enlaces en la página se ve así:

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

La cadena de consulta es el número Major.Minor.0.Changeset y cambia cada vez que empujamos una compilación, haciendo que el cliente la recupere. Lo mismo sucede exactamente en las hojas de estilo en su elemento <link> .

Answer 3

Eche un vistazo a la respuesta que publiqué aquí para obtener una solución que maximiza el beneficio de usar el almacenamiento en caché y evita cualquier problema con la necesidad de que los usuarios realicen una actualización ''difícil'' ( Ctrl + F5 ).

Utiliza un hash MD5 del contenido en sí mismo en la URL, de modo que la URL permanece igual siempre que el archivo sea el mismo, que es realmente el objetivo. El cálculo del hash es súper rápido y se almacena en caché en la memoria del servidor para que el procesamiento de la página no disminuya notablemente. Todo se mide en microsegundos, y los beneficios han sido increíbles hasta ahora (en mi sitio para buceadores ). Lo aplico a todas las imágenes, CSS y JS, con la excepción de las imágenes de los archivos CSS, ya que no están generadas en el servidor en mi sitio (todavía).

Answer 4

Esto se realiza mejor en IIS o en su archivo de configuración: asegúrese de que sus CSS / JS / imágenes estén configuradas para que nunca caduquen.

Cuando los referencia desde su código, sugiero agregar una versión o fecha de compilación al nombre del archivo, por ejemplo, script.js? 20100120, de modo que cuando llegue a cambiarlos, solo tenga que cambiar la versión para forzar una actualización. de todos los navegadores que lo han guardado en caché.

Answer 5

Los navegadores manejan automáticamente el almacenamiento en memoria caché del lado del cliente cuando configura correctamente los encabezados de control de caché y establece web.config. Como eso :

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

Answer 6

Los navegadores se encargan de esto de forma automática, en realidad. Tienes que salir de tu camino para que NO cache css, js, html e imágenes.

No estoy tan familiarizado con ASP MVC, pero creo que el tipo de almacenamiento en caché en el que estás pensando es el almacenamiento en caché de código de operación para tu servidor de salida dinámico creado.