Tableless

Busca Menu

Cache busting: entrega inteligente de assets

Seja o primeiro a comentar por

Definição

Cache busting nada mais é do que uma técnica para contornar o problema do carregamento de versões antigas dos assets armazenados em cache no navegador do cliente.

Problema

Na verdade, essa é uma questão de longa data. Muitos desenvolvedores utilizam-se do incremento de variáveis com códigos aleatórios no final das chamadas (querystrings) dos assets para contornar o problema, o que, de acordo com Steve Souders, guru em performance de sites na web, não é uma boa prática.

<link rel="stylesheet" href="assets/main.css?v=786523"> <!-- NÃO RECOMENDADO! -->

Segundo Souders, o uso de querystrings não é bom porque faz com que normalmente o browser recarregue o asset da origem. Para o ambiente de desenvolvimento isso seria o ideal. Para o usuário final isso não seria bom, pois o comportamento de seu navegador seria alterado em termos do número de conexões que são abertas, ignorando o uso do cache e comprometendo a performance de carregamento da página.

Solução

Para resolver o problema sem a utilização de querystrings, o ideal é que todos os arquivos de assets que estão sendo requisitados na página sejam renomeados. Logicamente que as chamadas para esses assets renomeados também precisam ser atualizadas na página. Sabemos que fazer esse processo manualmente seria algo árduo, quase insano. Então como fazê-lo de forma elegante, automatizada?

A fórmula mágica para que isso aconteça de maneira prática é o grunt-cache-bust, um plugin para o Grunt.

Show me the code

Vou supor que você já conhece o Grunt e que há uma index.html na raiz de seu projeto, ok? Sendo assim, irei focar apenas na utilização do plugin.

A princípio você só precisa seguir 4 passos básicos para usar o grunt-cache-bust:

1. Instale o plugin usando o seguinte comando:

npm install grunt-cache-bust --save-dev

2. Em seu Gruntfile.js, adicione a seguinte propriedade ao objeto passado como parâmetro em grunt.initConfig:

cacheBust: {
  options: {
    encoding: 'utf8',
    length: 16
  },
  scripts: {
    files: [{
      src: ['index.html']
    }]
  }
}

3. Ainda em seu Gruntfile.js, adicione a seguinte linha para ativar o plugin:

grunt.loadNpmTasks('grunt-cache-bust');

4. Tudo certo, agora é só rodar a task e voilà!

grunt cacheBust

Resultado

Lembra que na raíz de seu projeto há uma index.html? Então, basicamente a task vai varrer esse documento buscando por chamadas de assets (CSS, JS, imagens e favicons), copiar esses arquivos com um novo nome e atualizar o source de cada chamada encontrada com o novo nome do arquivo. Esse novo nome terá o formato {nome}.{hash}.{extensão}, onde {hash} seria um código aleatório.

index.html antes:

<script src="assets/main.js"></script>

index.html depois:

<script src="assets/main.6419373d85d7afe3.js"></script>

Lindo, né?

Vale lembrar que o plugin irá ignorar automaticamente chamadas que apontam para CDNs.

A propriedade options do plugin oferece uma porção de possibilidades interessantes que flexibilizam a utilização do cache busting, como por exemplo manter ou não os arquivos originais dos assets requisitados, escolher o algoritmo e tamanho das hashes, ignorar chamadas de assets através de regex, etc. Enfim, considere dar uma boa olhada na documentação oficial do plugin.

Conclusão

Cache busting é algo realmente útil no ciclo de desenvolvimento web. Chega de Cmd+Shift+R ou Ctrl+F5, né?

Se você tem alguma outra solução para essa questão, utilizando Gulp ou outra ferramenta, conta pra gente aqui nos comentários. A comunidade agradece! ;D

Publicado no dia