Limpeza automática de cache na build do React

Você já deve saber que nos navegadores existe um problema de cache de arquivos estáticos. A essência do problema é que, para melhorar o desempenho, o navegador armazena em cache arquivos de estilo, scripts e imagens.

Isso significa que se no hospedagem você alterar algo em seus scripts ou estilos, as mudanças aparecerão apenas para os novos visitantes do site. Visitantes antigos, que já estiveram no site anteriormente, verão a versão em cache do código. Isto, é claro, é inaceitável.

Felizmente, no React esse problema é resolvido automaticamente. A solução consiste no fato de que os arquivos da build, além do nome e extensão, possuem uma string aleatória, chamada de hash. Este hash corresponde ao conteúdo do arquivo. Isso significa que ao alterar o código no arquivo, o hash em seu nome também mudará. Dessa forma, o navegador pensará que é um novo arquivo e o baixará.

Podemos observar os hashes dos arquivos quando eles são incluídos no index.html:

index.html<script defer="defer" src="/static/js/main.3dd63bcb.js"></script>
<link href="/static/css/main.f855e6bc.css" rel="stylesheet">