Come evitare il caching durante lo sviluppo?

Question

Come evitare il caching durante lo sviluppo?

30 gen 2012, 19:22:02

Visualizzazioni: 70.2K

Voti: 32

Esiste un modo semplice per prevenire qualsiasi tipo di caching durante il test delle modifiche all'aspetto del sito? Uso WP Super Cache. Posso eliminare la sua cache utilizzando l'opzione fornita, cancellare la cache del mio browser, ma alcune modifiche a CSS o widget continuano a non aggiornarsi. Provo altre soluzioni alternative come cambiare browser o computer, ma deve esistere un flusso di lavoro più ottimizzato dove posso assicurarmi di visualizzare le modifiche che ho fatto e non qualche formato precedente memorizzato nella cache. Qual è la soluzione migliore per questo problema?

cboettig

423

css cache strategia di sviluppo

Commenti

Sembra che ci siano anche diversi plugin appositamente per questo riguardo al CSS. È davvero necessario? Questi plugin fanno qualcosa che la pulizia della cache del browser non fa?

cboettig

30 gen 2012 19:53:06

Nel mio caso ho scoperto che dovevo pulire la cache creata dal provider DNS (cloudflare). Grazie comunque a tutti per i suggerimenti qui sotto.

cboettig

31 gen 2012 01:35:31

Uso il browser Chrome; la sua finestra di navigazione in incognito è molto utile quando incontro problemi di cache a livello del browser durante lo sviluppo.

Joseph

8 nov 2013 08:47:02

Spero che questo plugin ti possa aiutare: https://wordpress.org/plugins/prevent-browser-caching/

Kostya Tereshchuk

31 gen 2018 17:41:50

Tutte le risposte alla domanda

Commenti

Molte grazie. Sembra che questo sia anche l'approccio del plugin sopra menzionato. Non ha risolto il problema nel mio caso perché il mio provider DNS (CloudFlare) stava memorizzando nella cache il file css, quindi ho dovuto svuotare la cache lì - immagino non ci sia un modo semplice per aggirare questo problema. In generale però, penso che questa sia la risposta migliore a questo tipo di problema, quindi la segnerò come accettata. Grazie ancora.

cboettig

31 gen 2012 01:33:54

Perché non usi il tuo foglio di stile locale durante lo sviluppo?

fuxia

31 gen 2012 02:59:24

Alcuni servizi di caching cloud memorizzeranno il tuo file in modo persistente per 8+ ore, quindi devi chiedere loro di implementare un servizio migliore per il versioning (alcuni lo fanno), cambiare servizio o smettere di usarli.

Wyck

31 gen 2012 18:38:29

@cboettig CloudFlare ha un'impostazione della modalità sviluppatore che interrompe la memorizzazione nella cache per una finestra di 3 ore. Dopodiché riprende automaticamente la memorizzazione nella cache dopo 3 ore.

Gilbert

25 ago 2014 23:13:49

Dopo aver cercato molte volte una soluzione semplice, ho deciso di trovare qualcosa che funzioni!

Quindi... dopo averci pensato, ho trovato un ottimo modo per sovrascrivere la cache durante lo sviluppo di nuovi siti web... (ed è semplice).

Ciò di cui abbiamo bisogno è dire a WordPress che questa è una nuova versione del CSS in questo modo...

Prima delle modifiche:

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

Dopo le modifiche:

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

Ecco cosa abbiamo aggiunto:

?v='.time()

Spiegazione:
Stiamo fondamentalmente aggiungendo un numero di versione dinamico al file CSS che forza il browser a caricare il nuovo CSS ogni volta che lo aggiorniamo.

Non dimenticare di rimuoverlo dopo aver finito lo sviluppo, altrimenti la tua cache non funzionerà per questo file e verrà ricaricato per gli utenti che ritornano sul sito ancora e ancora.

Questa tecnica funziona per i file CSS e JS - spero sia utile ;)

Sagive

2.78K

18 ago 2014 10:00:48

Commenti

Abbastanza carino, ma ancora meglio, usa semplicemente time() nel 4° parametro che è la versione. Il che ti darebbe: wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );

Dave

13 set 2018 04:41:49

Usare time come 4° parametro potrebbe far sì che Chrome mantenga quella versione. Questo è particolarmente vero se stai memorizzando nella cache tutto il resto mentre lavori su un sito live. In questo modo stai inviando un "nuovo file" a Chrome che verrebbe utilizzato invece di cercare di mantenere quella versione "vecchia" per un certo periodo di tempo (come impostato per altre risorse).

Sagive

13 set 2018 12:24:37

No, funziona bene in Chrome, lo stavo usando proprio ieri.

Dave

14 set 2018 06:34:42

significa che non hai impostato il tempo di cache / scadenza nel tuo htaccess o tramite un plugin. Ma, quello che funziona per te ;)

Sagive

14 set 2018 15:26:27

Potrebbe sembrare eccessivamente semplice, ma perché non disabilitare semplicemente la cache fino a quando non hai completato la parte di sviluppo del tuo sito? È più che semplice attivarla e disattivarla.

mor7ifer

8.61K

30 gen 2012 19:42:16

Commenti

+1 - Io uso la toolbar "Web Developer" per Firefox, permette di disabilitare molto rapidamente la cache (tra le altre cose)

Shane

30 gen 2012 19:44:56

Grazie - è necessario disabilitare solo la cache del browser? WP superCache continuerà a fornire contenuti memorizzati nella cache? Anche il mio servizio DNS memorizza nella cache, quindi non sono sicuro se devo disabilitare ogni cache (WP, browser, DNS, ecc) separatamente.

cboettig

30 gen 2012 19:48:18

Dipende un po', dovrai fare delle prove e capire cosa devi fare per la tua configurazione.

mor7ifer

30 gen 2012 20:23:56

Sono con lui, disabilitalo e basta, è quello che faccio anch'io.

matt

31 gen 2012 01:07:32

So che questa domanda ha già una risposta accettata, ma penso che quella risposta sia ancora troppo complicata per il problema in questione, e potrebbe addirittura essere errata a seconda dell'utente (senza offesa però), quindi ho pensato di condividere comunque come bypasso la cache durante lo sviluppo (non solo con WordPress).

La maggior parte dei browser moderni ha una modalità chiamata modalità di navigazione in incognito. In questa modalità, nulla nel tuo computer viene memorizzato nella cache, quindi ogni ricaricamento è un download completamente nuovo dal server. In Internet Explorer premi Ctrl + Maiusc + P. In Firefox e Chrome, premi Ctrl + Maiusc + N.

Se il tuo browser non ha la modalità incognito, puoi forzare un ricaricamento completo premendo Ctrl + F5 per IE, o Ctrl + Maiusc + R su Firefox e Chrome.

Per quanto riguarda la tua domanda sui file CSS (e in sostanza, tutti i tuoi file di asset, come immagini e file Javascript), quelli non vengono memorizzati nella cache in alcun modo da WP Super Cache. Le tue impostazioni e/o l'uso di questo plugin non influiscono su come quei file vengono serviti. Ciò che memorizza nella cache quei file è il tuo browser, ed è per questo che esegui un ricaricamento completo.

Ciò che fa il plugin è valutare come WordPress genera i tuoi file HTML (tramite PHP) e ne salva una copia, in modo che la prossima volta che qualcuno richiede lo stesso post, pagina o qualsiasi altra cosa, serva la copia, senza dover rivalutare nuovamente l'HTML generato da PHP, risparmiando così tempo di elaborazione e caricando le tue pagine più velocemente. (Spero sia chiaro.)

Il problema è che, se stai aggiungendo un timestamp all'URL dei tuoi file CSS tramite una funzione PHP, quella è una valutazione PHP in HTML, e quella verrà memorizzata nella cache da WP Super Cache. Ogni richiesta allo stesso post avrà lo stesso timestamp perché agli utenti viene servita una copia della valutazione originale del timestamp. (Correggetemi se sbaglio.)

Il modo corretto per bypassare la cache di WP Super Cache è impostare l'opzione Non memorizzare nella cache per utenti conosciuti su true nella pagina delle impostazioni del plugin.

Infine (e questa è una preferenza personale, visto che sono molto preciso quando si tratta di codifica), ricorrere all'uso della modalità incognito o a ricaricamenti forzati non ti obbliga ad aggiungere markup non necessari alle tue pagine HTML. Certo, aggiungere un timestamp aggiunge solo circa 13 byte per file statico per richiesta, ma ehi, come ho detto, sono pignolo su questo tipo di cose. Sono comunque 13 byte non necessari.

Richard Neil Ilagan

141

1 feb 2012 19:55:52

Commenti

Grazie per i consigli utili. Purtroppo nessuna delle risposte qui è corretta nel mio caso, poiché la mia soluzione richiedeva la cancellazione della cache del fornitore del servizio di rete del dominio, Cloudflare, ma molte erano comunque informazioni valide.

cboettig

1 feb 2012 21:50:13

Ciò che ha funzionato per me, eseguendo WordPress su uno stack Bitnami sotto Windows, è stato modificare il mio file php.ini e riavviare il server.

Nella sezione [opcache] ho cambiato opcache.revalidate_freq a 1

opcache.revalidate_freq=1

Successivamente ho riavviato i server e ora le mie pagine mostrano immediatamente le modifiche apportate ai plugin.

Steve B

31

9 ott 2020 12:27:09

Accidenti, ci sono molti modi per rispondere a questa domanda! Prima di tutto, hai chiesto riguardo a due cose diverse: WP Super Cache e file CSS. Questi vengono memorizzati nella cache in modo diverso e in posti diversi, quindi è importante riconoscere dove si trova il tuo problema.

Se il problema è con WP Super Cache, puoi definire la costante DONOTCACHEPAGE nel tuo functions.php durante lo sviluppo per evitare che WP Super Cache memorizzi qualsiasi cosa nella cache. Non dimenticare di rimuoverla al momento del lancio però!

define('DONOTCACHEPAGE', true);

Ogni sito ha anche una chiave unica da aggiungere all'URL per caricare una versione fresca della pagina, che puoi trovare nella scheda "Avanzate", credo.

Analizzando ancora meglio la soluzione, dovresti considerare di impostare un ambiente di sviluppo e un ambiente di produzione, dove il tuo ambiente di sviluppo non ha WP Super Cache abilitato (di nuovo, assumendo che questo sia il tuo problema).

Se il tuo problema è con i file CSS/JS, allora vedi la risposta di toscho e il commento successivo di m0r7if3r sopra.

Matthew Boynes

7.12K

31 gen 2012 00:01:26

HyperCache disabilita la cache quando sei loggato come amministratore. Non sono sicuro se WP Super Cache abbia la stessa funzionalità.

fxfuture

1.34K

30 gen 2012 23:48:04

Commenti

C'è un'opzione per quello, sì.

Matthew Boynes

30 gen 2012 23:53:08

Se stai utilizzando Chrome (che ti consiglio vivamente), apri Inspect Element, clicca sull'icona delle impostazioni nell'angolo in basso a destra e sotto "Network" seleziona "Disable Cache".

moettinger

402

31 gen 2012 17:37:50

Come detto per wp super cache, ma per la cache generale di WP in wp-config.php Cambia con questo:

define( 'WP_CACHE', false );

Riferimento: codex.wordpress.org

wpcoder

111

4 mar 2017 03:41:47

Commenti

Questa è stata davvero l'unica soluzione al problema. Grazie!

User

9 apr 2020 01:33:12

Puoi utilizzare questo snippet https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Genererà una nuova versione dei file CSS e JS del tuo tema attivo ogni volta che carichi la pagina

Mark

1

20 ott 2017 06:28:18

Commenti

Per favore, pubblica la risposta qui, includendo tutto il codice rilevante. Utilizza siti esterni solo come riferimento. Il tuo post dovrebbe fornire una risposta completa senza la necessità di visitare altri siti; se il sito terzo diventa inaccessibile, la tua risposta diventerebbe inutile.

cybmeta

20 ott 2017 11:22:30

fuxia 107K · Accepted Answer · 2012-01-30T19:33:31Z

Aggiungi il filemtime() del tuo foglio di stile come parametro versione. Supponiamo che il tuo foglio di stile predefinito sia in css/default.css e css/default.min.css (non style.css). Quando registriamo un foglio di stile su wp_loaded (non init), possiamo passare una versione come quarto parametro. Sarà l'ultima ora di modifica e quindi cambierà ogni volta che modifichiamo il file.

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

// Sovrascritto?
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 stai utilizzando Node.js e Grunt, consiglio vivamente Browsersync. Monitorerà i tuoi file e li aggiornerà istantaneamente ogni volta che vengono modificati. Può anche sincronizzare la posizione di scorrimento, l'invio di moduli e altro ancora tra più browser aperti. Davvero fantastico.