Qual é o papel do hash nos nomes dos ficheiros, por exemplo, no contexto do uso do Vue CLI?

O papel do hash nos nomes de ficheiros (por exemplo, app.[hash].js) no contexto do uso do Vue CLI é o seguinte:

• Gestão de cache: O navegador armazena em cache ficheiros de recursos estáticos (CSS, JS, fontes, imagens) para acelerar o recarregamento de páginas. Quando o conteúdo do ficheiro muda, um novo hash é gerado, e o nome do ficheiro muda. Isto faz com que o navegador considere o ficheiro como novo e o recarregue, em vez de usar a versão em cache obsoleta.

• Prevenção de conflitos: Em implantações ou compilações múltiplas da aplicação, o uso de um hash único garante que diferentes versões do mesmo ficheiro não se misturem ou sobrescrevam acidentalmente.

• Garantia de atualidade: Os utilizadores recebem sempre a versão mais atualizada da aplicação, pois as alterações no código levam automaticamente à criação de novos ficheiros com nomes únicos.

No Vue CLI, os hashes são integrados no processo de compilação através do Webpack. A configuração padrão do Webpack inclui o uso de hashes nos nomes dos ficheiros para recursos de saída.

// Exemplo de parte da configuração do Webpack que mostra o uso do hash
module.exports = {
  output: {
    filename: 'js/[name].[chunkhash:8].js', // Uso de chunkhash para ficheiros JS
    chunkFilename: 'js/[name].[chunkhash:8].js' // Uso de chunkhash para chunks
    // ...outras configurações
  },
  // ...outras configurações
};

chunkhash (ou contenthash) é usado para ficheiros JS e CSS, pois só muda quando o conteúdo do ficheiro muda, não quando outros ficheiros na mesma compilação mudam. hash pode ser usado para todos os recursos, mas muda a cada alteração em qualquer parte da compilação, o que nem sempre é ótimo para cache.

Em resumo, o hash nos nomes de ficheiros é um mecanismo chave para uma gestão eficaz de cache e para garantir a integridade e atualidade dos recursos estáticos em aplicações web modernas, desenvolvidas com frameworks como Vue e ferramentas de compilação como Webpack.