Sin duda, debería configurar encabezados de caché lejanos en sus activos como CSS y JavaScript (e imágenes y fuentes y cualquier otra cosa). Eso le dice al navegador “guarde este archivo básicamente para siempre”. De esa manera, al navegar de una página a otra en un sitio, o volver a visitarlo o actualizar la página, el navegador no tiene que descargarlo nuevamente, lo que produce cargas de página mucho más rápidas. Es enormemente importante para el rendimiento web, ¡así que hágalo!
Pero, ¿cómo obligas al navegador a obtener una versión nueva del archivo? Bueno, hay un montón de maneras. Echa un vistazo a esa publicación de blog para obtener más información. Pero aquí hay uno que he usado recientemente y que quería documentar.
El truco es cambiar la cadena de consulta
Hubo una era en la que la sabiduría prevaleciente era que cambiar la cadena de consulta no era suficiente, pero incluso entonces, las razones por las que no funcionaría eran casos extremos. En estos días, cambiar la cadena de consulta está bien (suponiendo que no cambie el comportamiento predeterminado, los servicios como Cloudflare le permiten hacerlo).
Entonces, un día lo envías así en tu HTML:
<link rel="stylesheet" href="https://css-tricks.com/quick-gulp-cache-busting/style.css?v=1" />Luego cambia esa cadena de consulta para romper el caché cuando lo necesite:
<link rel="stylesheet" href="https://css-tricks.com/quick-gulp-cache-busting/style.css?v=2" />El HTML, por cierto, no se almacena en caché o se almacena en caché durante un período de tiempo mucho más corto, por lo que se verán los cambios en HTML.
a veces lo hago a mano
Durante muchos años, rompí el caché en este mismo sitio configurando una variable de PHP y usándola para romper activos, como…
<?php $ver = 1.0; ?>
<link rel="stylesheet" href="https://css-tricks.com/quick-gulp-cache-busting/style.css?v=<?php echo $ver; ?>" />
<link rel="stylesheet" href="some-other-asset.css?v=<?php echo $ver; ?>" />Oye, eso funciona, pero fui yo quien manipuló esa variable a mano. A veces me olvidaba de hacerlo, e incluso si lo recordaba, me molestaba tener que hacerlo.
Automatización de la eliminación de versiones con Gulp
Estoy usando un proceso de compilación impulsado por Gulp en este momento en este sitio, que hace todas las cosas clásicas: Sass, Babel, concatenación de archivos, recarga en vivo…
Se me ocurrió que también podría hacer que Gulp cambie la cadena de consulta cada vez que se realicen cambios en CSS o JavaScript. JavaScript tiene un .replace() y está disponible en Node/Gulp fácilmente con el complemento gulp-replace.
hago una tarea. Cuando lo llamo, busca en mi archivador de encabezado la cadena cache_bust= más algún valor, y lo reemplaza con una nueva cadena aleatoria basada en la fecha y la hora.
gulp.task("cache-bust-css", function() {
var cbString = new Date().getTime();
return gulp
.src(["header.php"])
.pipe(
replace(/cache_bust=d+/g, function() {
return "cache_bust=" + cbString;
})
)
.pipe(gulp.dest("."));
});Hago lo mismo en una tarea separada cuando los archivos JavaScript se están editando y compilando.
Todavía es un poco tonto
Tenga en cuenta que estoy cambiando la cadena de consulta en todos los activos de CSS cada vez que cambia alguno de ellos. Eso no es tan eficiente como podría ser. Probablemente debería cambiar la cadena de consulta solo en los archivos modificados.
Lo conseguiré eventualmente. A veces, solo tienes que dar pequeños pasos para encontrar mejores soluciones con el tiempo.
¡Esta es solo una forma! Hay otros complementos de Gulp solo para esto. Otros sistemas de construcción tienen diferentes enfoques. Este enfoque resultó funcionar bien para mí y mis necesidades exactas en ese momento. ¡Siéntete libre de compartir tu estrategia!