Los cambios en los archivos CSS no se reflejan después de la implementación

Question

Estoy trabajando en una aplicación web JSF. Cada vez que cambio archivos CSS y despliegue el programa por primera vez, los cambios en los archivos CSS no se reflejan. Lo probé en diferentes situaciones. ¿Cómo es esto causado y cómo puedo resolverlo?

Answer 1

sí cuando se presiona Ctrl + F5 se carga

Entonces, sólo se ha servido de la caché del navegador. Eso está perfectamente bien. Ahorra ancho de banda de red en un entorno de producción real. Pero puedo imaginar que esto es perturbador durante el desarrollo o cada vez que traes actualizaciones a la producción. Durante el desarrollo, solo aprendería a acostumbrarme a la tecla Ctrl + F5. Pero para la producción realmente le gustaría resolverlo ya que el usuario final puede no estar al tanto de ese "truco".

Un enfoque común es agregar un número de versión como parámetro de solicitud al recurso CSS.

<link rel="stylesheet" href="style.css?v=1.0" /> 

Cada vez cuando se haga importantes cambios en el CSS, entonces que le gustaría incrementar el número de versión antes de traer a la actualización en producción.

<link rel="stylesheet" href="style.css?v=1.1" /> 

Esto obligará al navegador a volver a cargar la hoja de estilo.

Otro enfoque es utilizar el tiempo de inicio del servidor para esto. Como está utilizando JSF, esto podría hacerse fácilmente con un java.util.Date declarado como un bean administrado con ámbito de aplicación en faces-config.xml.

<managed-bean> 
    <description>Startup date</description> 
    <managed-bean-name>startup</managed-bean-name> 
    <managed-bean-class>java.util.Date</managed-bean-class> 
    <managed-bean-scope>application</managed-bean-scope> 
</managed-bean> 

continuación, puede utilizar Date#getTime() para obtener la marca de tiempo:

<link rel="stylesheet" href="style.css?#{startup.time}" /> 

Esto se generará en el HTML como:

<link rel="stylesheet" href="style.css?1314105929937" /> 

Se va a cambiar cada vez que se reinicia el servidor o vuelva a implementar la aplicación web, por lo que el navegador se verá obligado a volver a cargar el recurso (¡incluso cuando no se haya cambiado!) tenga esto en cuenta si el almacenamiento en caché y el uso del ancho de banda es una preocupación norte). La misma técnica es aplicable a otros recursos estáticos como JavaScripts e imágenes.

Cuando ya está en JSF 2.x, puede usar la función integrada "versionamiento de la biblioteca de recursos" para eso. Véase también What is the JSF resource library for and how should it be used?

Answer 2

Tuve los mismos problemas al cambiar los archivos css y necesitaba actualizar el sitio, era bastante molesto y muy incoveniente.

Eventualmente me encontré con esta pequeña "herramienta", un archivo javascript, que necesita implementar en su proyecto. A partir de ese momento ya no necesita actualizar el sitio, solo necesita guardar su archivo css, y los cambios se adoptarán automáticamente después de 2,3 segundos.

Aquí está el enlace: http://cssrefresh.frebsite.nl/

Por cierto, truco muy útil desde BalusC, como siempre;)