Como Burlar Caches: Versionamento

RevalidarComo dito na página de Proxies Reversos, a nossa infraestrutura faz otimizações fundamentais (leia na página de Proxies) que podem te atrapalhar na hora de desenvolver em termos de cache. O cache padrão segura arquivos estáticos muito acessados por 240 minutos antes de revalidá-los, o que é um problema para um website/app em desenvolvimento.

No entanto, resolver é muito fácil! Basta adicionar o sufixo (query string) ?ver=1 no final da URL do arquivo para burlar o cache – sim, só isso!

Plataformas profissionais já fazem isso por padrão, como o WordPress que adiciona sua versão como query string em arquivos estáticos.
Veja o exemplo do .CSS principal do website da Infinite:

URL ORIGINAL (COM CACHE + MINIFICAÇÃO)
https://wiki.goinfinite.net/antigo/hood/website.css

URL COM VERSIONAMENTO (SEM CACHE OU MINIFICAÇÃO)
https://wiki.goinfinite.net/antigo/hood/website.css?ver=4.5.2

O mesmo se aplica para imagens, javascript ou PDFs.

"Mas eu não consigo adicionar o versionamento (?ver=1) no final da URL!"

Se forem imagens ou PDF's, basta renomear o arquivo.
Se forem códigos CSS ou JS, você poderá usar a opção Custom CSS & JS de seu tema ou instalar um plugin/módulo para sua plataforma. Nós indicamos alguns:

WordPress

Simple Custom CSS and JS - https://br.wordpress.org/plugins/custom-css-js/
Permite adicionar códigos CSS & JS customizados no website sem ser cacheado. É uma boa alternativa ao uso de Child Themes e não deixa o website lento.

Royal Custom CSS for Page and Post - https://br.wordpress.org/plugins/rt-custom-css-page-and-post/
Permite adicionar códigos CSS de acordo com a página/post. Ajuda a deixar o arquivo .CSS principal menor.

Magento

1. Navegue até o arquivo local.xml de seu tema no diretório que se parece com este:
app/design/frontend/DESENVOLVEDORA/SEUTEMA/layout
2. Encontre as linhas que se parecem com estas:
css/custom.css
3. Adicione o versionamento logo após a extensão .css do arquivo que deseja não ter cache, ficando assim:
css/custom.css?ver=1

Joomla

Custom CSS & Javascript
http://extensions.joomla.org/extension/custom-css
http://extensions.joomla.org/extension/add-custom-javascript
Permite adicionar códigos CSS & JS customizados no website sem ser cacheado em Joomla v3.

Add Custom CSS - http://joomla.impression-estudio.gr/add-custom-css/download.php
Permite adicionar códigos CSS customizados no website sem ser cacheado em Joomla v2.

OpenCart

Custom Section Pro - http://www.opencart.com/index.php?route=extension/extension/info&extension_id=11878&filter_search=custom%20css&filter_license=0&filter_download_id=23
Permite adicionar códigos CSS & JS customizados no website sem ser cacheado em OpenCarts v1+.

[OCMOD] Custom JavaScript & CSS
http://www.opencart.com/index.php?route=extension/extension/info&extension_id=20565&filter_username=viethemes
http://www.opencart.com/index.php?route=extension/extension/info&extension_id=20566&filter_search=custom%20css&filter_license=0
Permite adicionar códigos CSS & JS customizados no website sem ser cacheado em OpenCarts v2+.

Drupal

CSS Injector - https://www.drupal.org/project/css_injector
Permite adicionar códigos CSS customizados no website sem ser cacheado.

PrestaShop

CSS Editor - https://www.prestashop.com/forums/topic/303224-module-css-editor/
Permite adicionar códigos CSS & JS customizados no website sem ser cacheado. Compatível com versões 1.5 e 1.6 do PrestaShop.

Artigos Populares