Limpieza automática de caché en la build de React

Ya debes saber que en los navegadores existe un problema con el caché de archivos estáticos. La esencia del problema es que para mejorar el rendimiento, el navegador almacena en caché archivos de estilos, scripts e imágenes.

Esto significa que si en el hosting cambias algo en tus scripts o estilos, los cambios solo aparecerán para los nuevos visitantes del sitio. Los visitantes antiguos, que ya estuvieron en el sitio anteriormente, verán una versión del código almacenada en caché. Esto, por supuesto, es inaceptable.

Afortunadamente, en React este problema se resuelve automáticamente. Su solución consiste en que los archivos de la build, además del nombre y la extensión, tienen una cadena aleatoria, que se llama hash. Este hash corresponde al contenido del archivo. Esto significa que al cambiar el código en el archivo, también cambiará el hash en su nombre. De esta manera, el navegador pensará que es un archivo nuevo y lo descargará.

Podemos observar los hashes de los archivos al incluirlos en index.html: