Cum eviți utilizarea cache-ului în timpul dezvoltării?

Question

Cum eviți utilizarea cache-ului în timpul dezvoltării?

30 ian. 2012, 19:22:02

Vizualizări: 70.2K

Voturi: 32

Există o modalitate simplă de a preveni orice tip de cache în timp ce testezi aspectul modificărilor pe site? Folosesc WP Super Cache. Pot șterge cache-ul acestuia folosind opțiunea furnizată, pot șterge cache-ul browserului meu, și totuși unele modificări la CSS sau widget-uri nu se actualizează. Încerc alte soluții alternative precum schimbarea browserelor sau a calculatoarelor, dar trebuie să existe un flux de lucru mai simplificat prin care să mă asigur că văd modificările pe care le-am făcut și nu un format anterior stocat în cache. Care este cea mai bună soluție pentru aceasta?

cboettig

423

css cache strategie dezvoltare

Comentarii

Se pare că există și mai multe plugin-uri special pentru a face asta cu CSS. Este cu adevărat necesar? Fac aceste plugin-uri ceva ce ștergerea cache-ului browserului nu face?

cboettig

30 ian. 2012 19:53:06

În cazul meu, am aflat că a trebuit să șterg cache-ul creat de furnizorul de DNS (cloudflare). Totuși, mulțumesc pentru sugestiile oferite mai jos.

cboettig

31 ian. 2012 01:35:31

Eu folosesc browserul Chrome; Ferestrele sale incognito sunt foarte utile când întâmpin probleme legate de cache la nivel de browser în timpul dezvoltării.

Joseph

8 nov. 2013 08:47:02

Sper că acest plugin te va ajuta: https://wordpress.org/plugins/prevent-browser-caching/

Kostya Tereshchuk

31 ian. 2018 17:41:50

Toate răspunsurile la întrebare

Comentarii

Mulțumesc mult. Se pare că aceasta este și abordarea pluginului menționat mai sus. În cazul meu nu a rezolvat problema deoarece furnizorul meu de DNS (CloudFlare) stoca în cache fișierul css, așa că a trebuit să golesc cache-ul acolo — presupun că nu există o soluție simplă pentru asta. În general, cred că acesta este cel mai bun răspuns pentru acest tip de problemă, așa că voi marca ca acceptat. Mulțumesc din nou.

cboettig

31 ian. 2012 01:33:54

De ce nu folosești fișierul tău local de stiluri în timpul dezvoltării?

fuxia

31 ian. 2012 02:59:24

Unele servicii de caching în cloud vor stoca fișierul tău în cache pentru 8+ ore, așa că fie trebuie să le ceri să implementeze un serviciu mai bun pentru versionare (unele fac asta), să schimbi serviciile, sau să nu le mai folosești.

Wyck

31 ian. 2012 18:38:29

@cboettig CloudFlare are o setare de mod dezvoltator care va opri caching-ul pentru o fereastră de 3 ore. După aceea, caching-ul va relua automat după 3 ore.

Gilbert

25 aug. 2014 23:13:49

După ce am căutat de multe ori o soluție simplă, am decis să găsesc ceva care chiar funcționează!

Așa că... după ce m-am gândit la asta, am găsit o metodă foarte bună de a suprascrie caching-ul în timp ce dezvoltăm site-uri noi... (și este ușor).

Ceea ce avem nevoie este să-i spunem lui WP că aceasta este o nouă versiune de CSS, astfel...

Înainte de modificări:

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

După modificări:

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

Iată ce am adăugat:

?v='.time()

Explicație:
Practic, adăugăm un număr de versiune dinamic la fișierul CSS, ceea ce forțează browserul să încarce noul CSS de fiecare dată când îl actualizăm.

Nu uitați să eliminați această modificare după ce terminați dezvoltarea, altfel caching-ul nu va funcționa pentru acest fișier și se va reîncărca pentru utilizatorii care revin pe site.

Această tehnică funcționează atât pentru fișierele CSS, cât și pentru cele JS - sper că vă este de folos ;)

Sagive

2.78K

18 aug. 2014 10:00:48

Comentarii

Destul de frumos, dar și mai bine, folosește pur și simplu time() în al 4-lea parametru care este versiunea. Ceea ce ar da: wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );

Dave

13 sept. 2018 04:41:49

Folosirea time() ca al 4-lea parametru ar putea determina Chrome să rețină acea versiune. Acest lucru este valabil mai ales dacă folosești caching pentru toate celelalte resurse în timp ce lucrezi la un site live. În acest fel, transmiți un "fișier nou" către Chrome, pe care acesta l-ar folosi în loc să încerce să păstreze versiunea "veche" pentru o anumită perioadă de timp (așa cum este setat pentru alte resurse).

Sagive

13 sept. 2018 12:24:37

Nu, funcționează bine în Chrome, l-am folosit ieri.

Dave

14 sept. 2018 06:34:42

asta înseamnă că nu ai setat timpul de cache / expirare în fișierul tău htaccess sau printr-un plugin. Dar, orice funcționează pentru tine ;)

Sagive

14 sept. 2018 15:26:27

Acest lucru poate părea excesiv de simplu, dar ce zici să dezactivezi caching-ul până când termini partea de dezvoltare a site-ului tău? Este foarte ușor să îl activezi sau să îl dezactivezi.

mor7ifer

8.61K

30 ian. 2012 19:42:16

Comentarii

+1 - Eu folosesc toolbar-ul "Web Developer" pentru Firefox, care îți permite să dezactivezi foarte rapid cache-ul (printre altele)

Shane

30 ian. 2012 19:44:56

Mulțumesc - este necesar doar să dezactivez cache-ul browserului? WP Super Cache va continua să ofere conținut din cache? Chiar și serviciul meu de DNS cache-ază, așa că nu sunt sigur dacă trebuie să dezactivez fiecare cache (WP, browser, DNS etc) separat.

cboettig

30 ian. 2012 19:48:18

Depinde, va trebui să experimentezi și să afli ce trebuie să faci pentru configurația ta.

mor7ifer

30 ian. 2012 20:23:56

Sunt de acord cu el, doar dezactivează-l, asta fac și eu.

matt

31 ian. 2012 01:07:32

Știu că această întrebare are deja un răspuns acceptat, dar cred că acel răspuns este încă prea complicat pentru problema în cauză și poate fi chiar incorect în funcție de utilizator (fără supărare), așa că am vrut totuși să împărtășesc cum ocolesc caching-ul în timpul dezvoltării (nu doar în WordPress).

Majoritatea browserelor moderne au un mod numit mod incognito. În acest mod, nimic nu este stocat în cache pe computerul tău, așa că fiecare reîmprospătare este o descărcare proaspătă de pe server. În Internet Explorer apeși Ctrl + Shift + P. În Firefox și Chrome, apeși Ctrl + Shift + N.

Dacă browserul tău nu are mod incognito, poți forța de obicei o reîmprospătare completă apăsând Ctrl + F5 pentru IE sau Ctrl + Shift + R în Firefox și Chrome.

În ceea ce privește întrebarea ta despre fișierele CSS (și, în esență, toate fișierele de resurse, cum ar fi imaginile și fișierele JavaScript), acestea nu sunt stocate în cache în niciun fel de WP Super Cache. Setările tale și/sau utilizarea acestui plugin nu afectează modul în care aceste fișiere sunt servite. Ceea ce stochează aceste fișiere în cache este browserul tău, și de aceea faci o reîmprospătare completă.

Ceea ce face plugin-ul este să evalueze cum WordPress construiește fișierele tale HTML (prin PHP) și să stocheze o copie, astfel încât data viitoare când cineva solicită același articol, pagină sau orice altceva, să servească copia și să nu mai fie nevoie să reevalueze HTML-ul generat de PHP din nou, economisind astfel timp de calcul și încărcând paginile mult mai rapid. (Sper că este clar.)

Problema cu asta este că, dacă adaugi un timestamp la URL-ul fișierelor CSS prin intermediul unei funcții PHP, acesta este o evaluare PHP în HTML și va fi stocat în cache de WP Super Cache. Fiecare solicitare pentru același articol va avea același timestamp, deoarece utilizatorilor li se servește o copie a evaluării originale a timestamp-ului. (Corectează-mă dacă greșesc.)

Modul corect de a ocoli caching-ul WP Super Cache este să setezi opțiunea Don't cache for known users la true în pagina de setări a plugin-ului.

În final (și aceasta este o preferință personală, deoarece sunt foarte meticulos când vine vorba de codare), recurgerea la utilizarea modului incognito sau a reîmprospătărilor forțate nu te va obliga să adaugi markup inutil pe paginile tale HTML. Desigur, adăugarea unui timestamp adaugă doar aproximativ 13 octeți per fișier static pe solicitare, dar, hei, cum am spus, sunt meticulos cu astfel de lucruri. Totuși sunt 13 octeți inutili.

Richard Neil Ilagan

141

1 feb. 2012 19:55:52

Comentarii

Mulțumesc pentru sfaturile utile. Din păcate, niciunul dintre răspunsurile de aici nu este corect în cazul meu, deoarece soluția mea a necesitat golirea cache-ului furnizorului de servicii de rețea de domenii, Cloudflare, dar multe au fost totuși informații bune.

cboettig

1 feb. 2012 21:50:13

Ceea ce a funcționat pentru mine, rulând WordPress pe un stack Bitnami sub Windows, a fost să editez fișierul php.ini și să repornesc serverul.

În secțiunea [opcache], am schimbat opcache.revalidate_freq la 1:

opcache.revalidate_freq=1

Apoi am repornit serverele și acum paginile mele afișează imediat modificările aduse plugin-urilor.

Steve B

31

9 oct. 2020 12:27:09

Uau, sunt multe moduri de a răspunde la această întrebare! În primul rând, ai menționat două lucruri diferite: WP Super Cache și fișierele CSS. Acestea sunt stocate în cache în locuri diferite, așa că este important să identifici unde este problema ta.

Dacă problema este legată de WP Super Cache, poți defini constanta DONOTCACHEPAGE în fișierul tău functions.php în timpul dezvoltării pentru a preveni WP Super Cache să stocheze orice în cache. Nu uita să o elimini după ce lansezi site-ul!

define('DONOTCACHEPAGE', true);

De asemenea, fiecare site are o cheie unică care poate fi adăugată la URL pentru a încarca o versiune proaspătă a paginii, pe care o poți găsi în fila "Advanced", cred eu.

Pentru o soluție și mai bună, ar trebui să configurezi un mediu de dezvoltare și un mediu de producție, unde mediul de dezvoltare nu are WP Super Cache activat (presupunând că aceasta este problema ta).

Dacă problema ta este legată de fișierele CSS/JS, atunci consultă răspunsul lui toscho și comentariul ulterior al lui m0r7if3r de mai sus.

Matthew Boynes

7.12K

31 ian. 2012 00:01:26

HyperCache dezactivează caching-ul când ești autentificat ca administrator. Nu sunt sigur dacă WP Super Cache are aceeași funcționalitate.

fxfuture

1.34K

30 ian. 2012 23:48:04

Comentarii

Există o opțiune pentru asta, da.

Matthew Boynes

30 ian. 2012 23:53:08

Dacă folosești Chrome (pe care îl recomand), deschide Inspectorul, dă click pe pictograma de setări din colțul dreapta jos și sub secțiunea "Network" selectează "Disable Cache".

moettinger

402

31 ian. 2012 17:37:50

Așa cum s-a menționat pentru wp super cache, dar pentru caching-ul general în WP în wp-config.php Schimbă în aceasta:

define( 'WP_CACHE', false );

Referință: codex.wordpress.org

wpcoder

111

4 mar. 2017 03:41:47

Comentarii

Aceasta a fost de fapt singura soluție la problemă. Mulțumesc!

User

9 apr. 2020 01:33:12

Puteți folosi acest fragment de cod https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Acesta va genera o nouă versiune a fișierelor CSS și JS ale temei active de fiecare dată când încărcați pagina

Mark

1

20 oct. 2017 06:28:18

Comentarii

Te rog, postează răspunsul aici, inclusiv tot codul relevant. Folosește site-uri externe doar pentru referință. Postarea ta ar trebui să ofere un răspuns complet fără a fi nevoie să accesezi alte site-uri; dacă site-ul terț dispare, răspunsul tău va deveni inutil.

cybmeta

20 oct. 2017 11:22:30

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

Adaugă filemtime() pentru fișierul tău de stiluri ca parametru de versiune. Să presupunem că fișierul tău implicit de stiluri este în css/default.css și css/default.min.css (nu style.css). Când înregistrăm un fișier de stiluri în wp_loaded (nu init), putem pasa o versiune ca al patrulea parametru. Aceasta va fi data ultimei modificări și, prin urmare, se va schimba de fiecare dată când modificăm fișierul.

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

// Suprascris?
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 );
});

Dacă folosești Node.js și Grunt, recomand cu tărie Browsersync. Acesta va monitoriza fișierele tale și le va actualiza instantaneu ori de câte ori se modifică. Poate de asemenea sincroniza poziția de scroll, trimiterea formularelor și multe altele între mai multe browsere deschise. Foarte cool.