¿Cuál es la mejor manera de versionar CSS y URL JS?

26

Según las mejores prácticas de Yahoo para acelerar su sitio , ofrecemos contenido estático de un CDN utilizando encabezados de caducidad de caché en el futuro lejano. Por supuesto, necesitamos actualizar ocasionalmente estos archivos "estáticos", por lo que actualmente agregamos una versión infija como parte del nombre de archivo (según la suma SHA1 del contenido del archivo). Así:

styles.min.css

Se convierte en:

styles.min.abcd1234.css

Sin embargo, administrar los archivos versionados puede volverse tedioso, y me preguntaba si una notación de argumento GET podría ser más limpia y mejor:

styles.min.css?v=abcd1234

¿Cuál usas y por qué? ¿Hay consideraciones relacionadas con el navegador o el proxy / caché que debería tener en cuenta?

static-content cache-control David Eyk
fuente
La razón por la que pregunto es que parece recordar haber escuchado una razón para NO usar el estilo de argumento GET, pero no puedo recordar por qué.
David Eyk
¿El uso del argumento GET no requiere servir la hoja de estilo con algún tipo de script del lado del servidor (y ya no sería estático)?
Lotus Notes
@Lotus: puede enviar los argumentos GET y se ignorarán silenciosamente si nada los está buscando.
David Eyk

Respuestas:

10

De acuerdo con Make the Web Faster de Google, muchas páginas con parámetros de consulta no son almacenadas en caché por muchos proxies HTTP.

La mayoría de los servidores proxy, especialmente Squid hasta la versión 3.0, no almacenan en caché los recursos con un "?" en su URL incluso si un Cache-control: publicencabezado está presente en la respuesta. Para habilitar el almacenamiento en caché del proxy para estos recursos, elimine las cadenas de consulta de las referencias a los recursos estáticos y, en su lugar, codifique los parámetros en los nombres de los archivos.

Entonces styles.min.abcd1234.csses la solución preferida. Puede utilizar un mecanismo de reescritura de URL apropiado para que styles.min.abcd1234.csssea ​​más fácil de implementar de forma styles.min.css?v=abcd1234transparente.

Si solo admite HTTPS, ese consejo no se aplica, ya que los servidores proxy normalmente no pueden almacenar en caché las páginas que se sirven a través de SSL.

Hasta Ulen
fuente
2
Me pregunto si la información sobre el almacenamiento en caché de cadenas de consulta y los servidores proxy está un poco anticuada. Los documentos de Google ya no hacen referencia a cadenas de consulta y servidores proxy en este contexto. Aunque los ejemplos aún implican cambiar el nombre del archivo en sí. Según los informes, Squid 2.7 (2008) y 3.1 (2010) admiten el almacenamiento en caché de cadenas de consulta de forma predeterminada, y las versiones anteriores podrían configurarse para admitir esto.
MrWhite
15

Usando el control de versiones de estilo GET, desde un caché en blanco, múltiples URL, por ejemplo, style.css?v=123y style.css?v=456, devolverían el mismo contenido. Sin embargo, no puedo ver que esto sea problemático, especialmente porque solo vincularías a uno a la vez.

Creo que encontrará el estilo GET mucho más fácil de mantener. No necesita archivos separados: solo cambie la URL y los navegadores buscarán el CSS nuevamente.

ACTUALIZACIÓN: en futuras investigaciones, parece que el uso de una cadena de consulta puede detener que los navegadores almacenen en caché los archivos. Sin embargo, si está devolviendo encabezados adecuados, como Expireseste no es un problema.

ACTUALIZACIÓN 2: la respuesta aceptada señala que algunos servidores proxy no almacenan en caché los archivos con una cadena de consulta. Sin embargo, esto se basa en información antigua; El problema particular que mencionan en Squid se solucionó hace 7 años. Impresionante Webs hizo una buena redacción sobre esto.

Cabra descontento
fuente
Esa es la advertencia que estaba tratando de recordar. Gracias por el enlace.
David Eyk
1

Ambos funcionarán igual de bien, ya que una cadena de consulta se considera parte de la URL y, al cambiarla, está cambiando el nombre del recurso, lo que hace que el navegador obtenga una nueva copia del archivo.

Le digo que use el método que le resulte más fácil de mantener.

John Conde
fuente
0

esta no es una respuesta a la pregunta anterior , quiero una mejor solución, así que pregunto aquí mismo

Ambos métodos requerirían modificaciones en los archivos a los que se refieren los archivos css y js. En efecto, requeriría un reinicio del servidor de aplicaciones después de realizar los cambios.

¿Hay alguna manera mejor de manejar las versiones de archivos estáticos sin tener que reiniciar el servidor de aplicaciones?

se descarta lo siguiente en la solución

  • cambiar los nombres de archivo css y js
  • pasando un paremeter de consulta en la url

la solución tampoco debería afectar la configuración del control de caché o caduca.

Gracias

Santhosh S
fuente
1
Parece que eres nuevo aquí. Esta es una buena pregunta. Debería publicarlo como tal, quizás vinculando de nuevo a esta pregunta como referencia. He marcado esto para la atención del moderador para que puedan ayudarlo.
David Eyk
Como David señaló, este sitio no es como otros foros. Si tiene una nueva pregunta que hacer, siéntase libre de hacer clic en el botón "hacer una pregunta"
Mark Henderson
Esta es una aclaración útil. Si cambia su hoja de estilo, sería preferible mantener el nombre y la referencia al mismo, en lugar de actualizar cientos de referencias en todo el sitio.
Mark Stosberg