Como você evita o armazenamento em cache durante o desenvolvimento?

31

Existe uma maneira simples de impedir todo o armazenamento em cache ao testar a aparência das alterações no site? Eu uso o WP Super Cache. Posso excluir seu cache usando a opção fornecida, excluir o cache do meu navegador e, ainda assim, algumas alterações no CSS ou nos widgets não são atualizadas. Eu tento outras soluções alternativas, como alternar navegadores ou computadores, mas deve haver um fluxo de trabalho mais alinhado ao fluxo, para garantir que estou visualizando as alterações que fiz e não algum formato anterior armazenado em cache? Qual é a melhor solução para isso?

cboettig
fonte
Parece que também existem vários plugins para fazer isso em CSS. Isso é realmente necessário? Esses plug-ins fazem algo que a limpeza do cache do navegador não faz?
cboettig
No meu caso, tive que limpar o cache criado pelo provedor de DNS (cloudflare). Obrigado a todos pelas sugestões abaixo.
cboettig
Eu uso o navegador Chrome; Sua janela anônima é útil, quando me deparo com problemas de cache no nível do navegador durante o desenvolvimento.
Joseph Kulandai
Espero que este plugin o ajude: wordpress.org/plugins/prevent-browser-caching
Kostya Tereshchuk

Respostas:

32

Adicione o filemtime()da sua folha de estilo como parâmetro de versão. Digamos que sua folha de estilo padrão esteja em ( css/default.csse não ). Quando registramos uma folha de estilo ( não ), podemos passar uma versão como quarto parâmetro. Essa será a hora da última modificação e, portanto, será alterada toda vez que alterarmos o arquivo.css/default.min.cssstyle.csswp_loadedinit

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

Se você estiver usando o Node.js e o Grunt, recomendo fortemente o Browsersync . Ele observará seus arquivos e os atualizará instantaneamente sempre que eles forem alterados. Ele também pode sincronizar a posição de rolagem, envios de formulários e muito mais em vários navegadores abertos. Muito legal.

fuxia
fonte
Muito Obrigado. Parece que esta também é a abordagem do plugin acima. Ele não resolveu o problema no meu caso, porque meu provedor DNS (CloudFlare) estava armazenando em cache o arquivo css, então tive que limpar o cache lá - acho que não há uma maneira simples de contornar isso. Em geral, porém, acho que essa é a melhor resposta para esse tipo de problema, então vou marcar como aceito. Obrigado novamente.
cboettig
Por que você não usa sua folha de estilo local durante o desenvolvimento?
fuxia
Alguns serviços de armazenamento em cache na nuvem armazenam seu arquivo em cache por mais de 8 horas, portanto, você precisa solicitá-los para implementar um serviço melhor para controle de versão (alguns fazem isso), alterar serviços ou parar de usá-los.
Wyck
O @cboettig CloudFlare possui uma configuração de modo de desenvolvimento que interromperá o cache por uma janela de 3 horas. Em seguida, retoma o cache automaticamente após 3 horas.
Gilbert
7

Depois de procurar uma solução simples muitas vezes, decidi encontrar algo que funcionasse!

então ... depois de pensar nisso, encontrei uma ótima maneira de substituir o cache ao desenvolver novos sites ... (e é fácil).

O que precisamos é dizer ao wp que esta é uma nova versão CSS como esta ...

Antes das alterações:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

Após as alterações:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

Isto é o que adicionamos:

?v='.time()

Explicação:
Basicamente, estamos adicionando um número de versão dinâmico ao arquivo css, o que força o navegador a carregar o novo css toda vez que o atualizamos.

Não se esqueça de removê-lo após o término do desenvolvimento, caso contrário, o armazenamento em cache não funcionará para esse arquivo e será carregado para os usuários que retornam repetidamente.

Essa técnica funciona para arquivos css & js - espero que ajude;)

Sagive SEO
fonte
Muito bom, mas melhor ainda, basta usar time () no quarto parâmetro, que é a versão. Que lhe daria:wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );
Dave
Usar o tempo como o quarto parâmetro pode custar ao chrome manter essa versão. Isso é especialmente verdadeiro se você estiver armazenando tudo em cache enquanto trabalha em um site ativo. Dessa forma, você está enviando um "novo arquivo" para o chrome, que ele usaria em vez de tentar manter a versão "antiga" por um período de tempo (conforme definido para outros recursos).
Sagive SEO
Não, funciona bem no chrome, eu estava usando ontem.
Dave
isso significa que você não definiu o tempo de cache / expiração no seu htaccess ou através de um plug-in. Mas, o que quer que funcione para você;)
Sagive SEO
6

Isso pode parecer muito simples, mas que tal desabilitar o cache até você terminar a parte de desenvolvimento do seu site? É mais do que simples ligar e desligar.

mor7ifer
fonte
2
+1 - eu uso "Web Developer" barra de ferramentas para o Firefox, permite-lhe muito rapidamente desativar cache (entre outras coisas)
Shane
Obrigado - só é necessário desativar o cache do navegador? O WP superCache ainda resultará no fornecimento de conteúdo em cache? Até meu serviço DNS é armazenado em cache, por isso não tenho certeza se preciso desativar todos os cache (WP, navegador, DNS, etc.) separadamente.
cboettig
O Sorta depende, você terá que brincar com ele e descobrir o que precisa fazer para a sua configuração.
precisa saber é o seguinte
Estou com ele, apenas desative-o, é o que eu faço.
Matt
4

Sei que essa pergunta teve uma resposta aceita, mas acho que essa resposta ainda é muito complicada para o problema em questão e pode estar incorreta, dependendo do usuário (sem ofensas), então pensei em compartilhar como ignoro o cache quando faço meu dev (não apenas com o Wordpress).

A maioria dos navegadores modernos tem algo chamado modo de navegação anônima . Nesse modo, nada no seu computador é armazenado em cache; portanto, toda atualização é um novo download do servidor. No Internet Explorer, você pressiona Ctrl + Shift + P. No Firefox e Chrome, você pressiona Ctrl + Shift + N.

Se o seu navegador não tiver o modo de navegação anônima, normalmente você poderá forçar uma recarga forçada pressionando Ctrl + F5no IE ou Ctrl + Shift + Rno Firefox e Chrome.

Quanto à sua pergunta sobre os arquivos CSS (e essencialmente, todos os seus arquivos de ativos, como imagens e arquivos Javascript), eles não são armazenados em cache de forma alguma pelo WP Super Cache. Suas configurações e / ou uso deste plug-in não afetam a forma como esses arquivos são veiculados. O que está armazenando em cache esses arquivos é o seu navegador , e é por isso que você faz uma recarga pesada.

O que o plug-in faz é avaliar como o Wordpress constrói seus arquivos HTML (via PHP) e armazena uma cópia, para que da próxima vez que alguém solicite a mesma publicação, página ou qualquer outra coisa, ele sirva a cópia e não precise reavaliar o HTML gerado pelo PHP novamente e, portanto, economizar tempo de computação, carregando suas páginas muito mais rapidamente. (Espero que esteja claro.)

O problema é que, se você digitar um carimbo de data e hora no URL dos seus arquivos CSS por meio de uma função PHP, isso é uma avaliação do PHP para HTML e será armazenada em cache pelo WP Super Cache. Cada solicitação para a mesma postagem terá o mesmo registro de data e hora, pois os usuários recebem uma cópia da avaliação original do registro de data e hora. (Corrija-me se eu estiver errado.)

A maneira correta de caching de desvio WP Super Cache é para definir a opção Don't cache for known userspara truea página de configuração do plugin.

Finalmente (e essa é uma preferência pessoal, como sou um defensor real da codificação), recorrer ao uso de recarregamentos forçados no modo anônimo ou forçado não exigirá que você adicione marcações desnecessárias em suas páginas HTML. É claro que adicionar um carimbo de data / hora adiciona apenas 13 bytes por arquivo estático por solicitação, mas, como eu disse, sou um defensor desse tipo de coisa. Ainda são 13 bytes desnecessários.

Richard Neil Ilagan
fonte
Obrigado pelas dicas úteis. Infelizmente, nenhuma das respostas aqui está correta no meu caso, já que minha solução exigia a limpeza do cache do provedor de serviços de rede de domínio, cloudflare, mas muitas ainda eram boas informações.
22412 cboettig
2

Puxa, muitas maneiras de responder a este! Em primeiro lugar, você perguntou sobre duas coisas diferentes: WP Super Cache e arquivos CSS. Eles são armazenados em cache de maneira diferente, em lugares diferentes; portanto, é importante reconhecer onde está o seu problema.

Se o WP Super Cache, você pode definir a constante DONOTCACHEPAGEem seu functions.php durante o desenvolvimento para impedir que o WP Super Cache armazene em cache qualquer coisa. Não se esqueça de remover isso no lançamento!

define('DONOTCACHEPAGE', true);

Cada site também possui uma chave exclusiva para anexar ao URL para carregar uma versão nova da página, que você pode encontrar na guia "Avançado", acredito.

Dividindo-o em uma solução ainda melhor, considere configurar um ambiente de desenvolvimento e um ambiente de produção, nos quais seu ambiente de desenvolvimento não tenha o WP Super Cache ativado (novamente, assumindo que esse é o seu problema).

Se o seu problema for com arquivos CSS / JS, consulte a resposta toscho e o comentário subsequente por m0r7if3r acima.

Matthew Boynes
fonte
1

O HyperCache desativa o armazenamento em cache quando você está conectado como administrador. Não tenho certeza se o WP Super Cache tem a mesma funcionalidade.

fxfuture
fonte
Existe uma opção para isso, sim.
precisa saber é o seguinte
1

Se você estiver usando o Chrome (o que eu sugiro), abra o Inspector, clique no ícone de configurações no canto inferior direito e, em "Rede", selecione "Desativar cache".

moettinger
fonte
0

Como dito para o super cache wp, mas para o cache geral do WP, wp-config.php mude para:

define( 'WP_CACHE', false );

Referência: codex.wordpress.org

wpcoder
fonte
-1

Você pode usar este snippet https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Ele irá gerar uma nova versão do seu tema ativo css e js toda vez que você carregar a página

Marca
fonte
Por favor, poste a resposta aqui, incluindo todo o código relevante. Use sites externos apenas para referência. Sua postagem deve fornecer uma resposta completa sem a necessidade de ir para outro site; se o site de terceiros cair, sua resposta será
inútil