Problema de cache nos navegadores
O navegador faz cache de arquivos de estilo CSS, scripts JavaScript e imagens conectados. Fazer cache significa que os arquivos conectados são baixados pelo navegador apenas na primeira vez que o usuário acessa o site. Em acessos subsequentes, esses arquivos já não serão baixados novamente, sendo retirados do cache do navegador.
O cache é útil. Ele foi criado para aumentar a velocidade de carregamento do site. Afinal, é mais rápido para o navegador pegar um arquivo de seu próprio armazenamento do que baixá-lo toda vez da internet.
No entanto, a velocidade tem um custo: o inconveniente durante o desenvolvimento. A questão é que se você alterar algo no seu código e depois publicar as alterações na hospedagem - todos os usuários que já acessaram seu site terão uma cópia antiga do código em cache.
Primeira solução para o problema
Para combater esse comportamento, é necessário renomear os arquivos alterados a cada vez. Na prática, isso não é conveniente, portanto um truque esperto é usado. Sua essência consiste no fato de que, ao conectar o arquivo, após o nome do arquivo colocamos um ponto de interrogação, um sinal de igual e o número da versão do seu script. Essa construção é chamada de parâmetro GET.
A presença de um parâmetro GET no nome do arquivo "não estraga" o caminho do ponto de vista do servidor, continuando a apontar para o mesmo arquivo. Mas, do ponto de vista do navegador, alterar o parâmetro GET força o navegador a considerar o caminho do arquivo como alterado e baixar o arquivo novamente.
Para combater o cache, quando você fizer alterações no seu arquivo de código, você precisará aumentar o valor do parâmetro GET em um. Veja um exemplo de aplicação dessa abordagem:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css?v=1">
<script src="script.js?v=1"></script>
</head>
<body>
</body>
</html>
Segunda solução para o problema
Existe também uma abordagem mais avançada. Ela consiste em adicionar strings aleatórias aos nomes dos arquivos, por exemplo, assim:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
<script src="script.1d12c304c284a752cb9a.js"></script>
</head>
<body>
</body>
</html>
Essas strings são chamadas de hashes. Um hash representa uma string única. Ele é calculado a partir do conteúdo do arquivo de uma maneira especial. Isso significa que a cada texto corresponde um hash único. Se o texto do arquivo for alterado, então o hash será diferente e precisaremos alterá-lo no nome do arquivo.
Claro, calcular hashes e renomear arquivos manualmente é uma tarefa nada agradável. Portanto, essa abordagem só é usada quando temos alguma ferramenta que permite calcular automaticamente os hashes e renomear os arquivos, bem como alterar os nomes dos arquivos para os novos nos arquivos HTML. Tudo isso pode ser feito pelo Webpack. Iremos aprender isso ao longo de todo o tutorial.
