Wie vermeidet man Caching während der Entwicklung?

31

Gibt es eine einfache Möglichkeit, um jegliches Caching beim Testen der Darstellung von Änderungen an der Site zu verhindern? Ich benutze WP Super Cache. Ich kann den Cache mit der angegebenen Option löschen, den Cache für meinen Browser löschen und trotzdem werden einige Änderungen an CSS oder Widgets nicht aktualisiert. Ich versuche andere Workarounds wie das Wechseln zwischen Browsern oder Computern, aber es muss einen optimierten Workflow geben, in dem ich sicherstellen kann, dass ich die vorgenommenen Änderungen und nicht ein zwischengespeichertes früheres Format ansehe. Was ist die beste Lösung dafür?

cboettig
quelle
Es scheint auch mehrere Plugins zu geben, die dies nur für CSS tun. Ist das wirklich nötig? Tun diese Plugins etwas, was das Löschen des Browser-Cache nicht bewirkt?
Cboettig
In meinem Fall stellte sich heraus, dass ich den vom DNS-Anbieter erstellten Cache löschen musste (Cloudflare). Vielen Dank an alle für die Vorschläge unten.
Cboettig
Ich verwende den Chrome-Browser. Das Inkognito-Fenster ist praktisch, wenn ich während der Entwicklung auf Cache-Probleme auf Browserebene stoße.
Joseph Kulandai
Hoffe, dieses Plugin wird Ihnen helfen: wordpress.org/plugins/prevent-browser-caching
Kostya Tereshchuk

Antworten:

32

Fügen Sie das filemtime()Ihres Stylesheets als Versionsparameter hinzu. Nehmen wir an, Ihr Standard-Stylesheet befindet sich in css/default.cssund css/default.min.css( nichtstyle.css ). Wenn wir ein Stylesheet auf wp_loaded( nichtinit ) registrieren , können wir eine Version als vierten Parameter übergeben. Dies ist die letzte geänderte Zeit und wird daher jedes Mal geändert, wenn wir die Datei ändern.

$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 );
});

Wenn Sie Node.js und Grunt verwenden, empfehle ich Browsersync . Es überwacht Ihre Dateien und aktualisiert sie sofort, wenn sie sich ändern. Es kann auch die Bildlaufposition synchronisieren, Formulare übermitteln und vieles mehr in mehreren offenen Browsern. Sehr cool.

fuxia
quelle
Danke vielmals. Dies scheint auch der Ansatz des obigen Plugins zu sein. Das Problem konnte in meinem Fall nicht behoben werden, da mein DNS-Anbieter (CloudFlare) die CSS-Datei zwischengespeichert hat, sodass ich den Cache dort leeren musste - ich schätze, es gibt keinen einfachen Weg, dies zu umgehen. Im Allgemeinen denke ich jedoch, dass dies die beste Antwort auf diese Art von Problem ist, daher werde ich als akzeptiert markieren. Danke noch einmal.
Cboettig
Warum verwenden Sie Ihr lokales Stylesheet nicht während der Entwicklung?
Fuxia
Einige Cloud-Caching-Dienste speichern Ihre Datei mindestens 8 Stunden im Cache. Sie müssen sie daher entweder auffordern, einen besseren Dienst für die Versionierung zu implementieren (manche tun dies), Dienste zu ändern oder sie nicht mehr zu verwenden.
Wyck
@cboettig CloudFlare hat eine Dev-Modus-Einstellung, die das Caching für ein 3-Stunden-Fenster beendet. Nach 3 Stunden wird das Caching automatisch fortgesetzt.
Gilbert
7

Nachdem ich viele Male nach einer einfachen Lösung gesucht hatte, entschied ich mich, etwas zu finden, das funktioniert!

Also ... nachdem ich darüber nachgedacht hatte, fand ich eine großartige Möglichkeit, das Caching zu überschreiben, während ich neue Websites entwickelte ... (und es ist einfach).

Was wir brauchen, ist zu sagen, wp das ist eine neue CSS-Version wie diese ...

Vor Änderungen:

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

Nach Änderungen:

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

Folgendes haben wir hinzugefügt:

?v='.time()

Erläuterung:
Wir fügen der CSS-Datei im Grunde genommen eine dynamische Versionsnummer hinzu, die den Browser zwingt, die neue CSS jedes Mal zu laden, wenn wir sie aktualisieren.

Vergessen Sie nicht, es zu entfernen, nachdem Sie mit dem Entwickeln fertig sind. Andernfalls funktioniert das Zwischenspeichern für diese Datei nicht und wird für wiederkehrende Benutzer immer wieder geladen.

Diese Technik funktioniert für CSS & JS-Dateien - hoffe, das hilft;)

Sagive SEO
quelle
Ziemlich schön, aber besser noch, benutze einfach time () im 4. Parameter, der Version ist. Was würden Sie geben:wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );
Dave
Wenn Sie die Zeit als vierten Parameter verwenden, kann Chrome diese Version beibehalten. Dies gilt insbesondere dann, wenn Sie alles andere zwischenspeichern, während Sie an einer Live-Site arbeiten. Auf diese Weise senden Sie eine "neue Datei" an Chrome, die er verwenden würde, anstatt zu versuchen, diese "alte" Version für einen bestimmten Zeitraum (wie für andere Ressourcen festgelegt) beizubehalten.
Sagive SEO
Nein, funktioniert gut in Chrom, ich habe es gestern benutzt.
Dave
Das bedeutet, dass Sie in Ihrem htaccess oder über ein Plugin keine Cache- / Ablaufzeit festgelegt haben. Aber was auch immer für Sie funktioniert;)
Sagive SEO
6

Dies mag übermäßig einfach erscheinen, aber wie wäre es, wenn Sie nur das Caching deaktivieren, bis Sie mit dem Entwicklungsteil Ihrer Site fertig sind? Das Ein- und Ausschalten ist mehr als einfach.

mor7ifer
quelle
2
+1 - Ich benutze die "Web Developer" -Symbolleiste für Firefox, mit der Sie den Cache (unter anderem) sehr schnell deaktivieren können
Shane
Danke - muss nur der Cache des Browsers deaktiviert werden? Wird WP superCache weiterhin zwischengespeicherten Inhalt bereitstellen? Sogar meine DNS-Dienst-Caches, daher bin ich mir nicht sicher, ob ich jeden Cache (WP, Browser, DNS usw.) separat deaktivieren muss.
Cboettig
Sorta hängt davon ab, Sie müssen damit herumspielen und herausfinden, was Sie für Ihre Konfiguration tun müssen.
Mor7ifer
Ich bin mit ihm, deaktiviere es einfach, das ist was ich tue.
Matt
4

Ich weiß, dass dieser Frage eine Antwort zugestimmt wurde, aber ich denke, dass diese Antwort für das vorliegende Problem immer noch zu kompliziert ist und je nach Benutzer möglicherweise falsch ist (aber keine Beleidigung) wie ich Caching umgehe, wenn ich meinen Entwickler mache (nicht nur mit Wordpress).

Die meisten modernen Browser haben einen Inkognito-Modus . In diesem Modus wird nichts auf Ihrem Computer zwischengespeichert, sodass jede Aktualisierung ein neuer Schieferdownload vom Server ist. Im Internet Explorer drücken Sie Ctrl + Shift + P. In Firefox und Chrome drücken Sie Ctrl + Shift + N.

Wenn Ihr Browser nicht über den Inkognito-Modus verfügt, können Sie normalerweise ein hartes Neuladen erzwingen, indem Sie Ctrl + F5auf IE oder Ctrl + Shift + Rauf Firefox und Chrome drücken .

Ihre Frage zu den CSS-Dateien (und im Wesentlichen zu allen Asset-Dateien wie Bildern und Javascript-Dateien) wird von WP Super Cache in keiner Weise zwischengespeichert. Ihre Einstellungen und / oder die Verwendung dieses Plugins haben keinen Einfluss darauf, wie diese Dateien bereitgestellt werden. Was diese Dateien zwischenspeichert, ist Ihr Browser , und das ist der Grund, warum Sie ein hartes Neuladen durchführen.

Das Plugin wertet aus, wie Wordpress Ihre HTML-Dateien erstellt (über PHP), und speichert eine Kopie, sodass diese beim nächsten Abruf desselben Beitrags, derselben Seite oder was auch immer der Kopie zur Verfügung gestellt wird und nicht muss Werten Sie das von PHP generierte HTML erneut aus, und sparen Sie dadurch Rechenzeit. Dadurch werden Ihre Seiten viel schneller geladen. (Ich hoffe das ist klar.)

Das Problem mit dieser ist, wenn Sie sich schlagend auf einem Zeitstempel auf dem CSS - Dateien URL über eine PHP - Funktion, die ist eine PHP - Auswertung in HTML, und das wird von WP Super Cache zwischengespeichert werden. Jede Anfrage an denselben Beitrag hat denselben Zeitstempel, da den Benutzern eine Kopie der ursprünglichen Zeitstempelauswertung zugestellt wird. (Korrigieren Sie mich, wenn ich falsch liege.)

Die richtige Möglichkeit, das Zwischenspeichern von WP Super Cache zu umgehen, besteht darin, die Option Don't cache for known usersauf trueder Einstellungsseite des Plugins festzulegen.

Schließlich (und dies ist eine persönliche Präferenz, da ich in Bezug auf das Codieren ein echter Stickler bin) müssen Sie nicht unnötige Markups auf Ihren HTML-Seiten hinzufügen, wenn Sie inkognito oder erzwungenes, hartes Neuladen verwenden. Das Hinzufügen eines Zeitstempels fügt natürlich nur ungefähr 13 Bytes pro statische Datei und Anforderung hinzu, aber hey, wie gesagt, ich bin ein Verfechter dieser Art von Dingen. Es sind immer noch 13 Bytes unnötig.

Richard Neil Ilagan
quelle
Danke für die nützlichen Tipps. Leider ist in meinem Fall keine der Antworten richtig, da meine Lösung das Löschen des Caches des Domain Network Service Providers Cloudflare erforderte, aber viele waren immer noch gute Informationen.
cboettig
2

Meine Güte, viele Möglichkeiten, diese zu beantworten! Zuallererst haben Sie nach zwei verschiedenen Dingen gefragt: WP Super Cache und CSS-Dateien. Diese werden an verschiedenen Stellen unterschiedlich zwischengespeichert, daher ist es wichtig zu erkennen, wo sich Ihr Problem befindet.

Bei WP Super Cache können Sie die Konstante DONOTCACHEPAGEin Ihrer functions.php während der Entwicklung definieren, um zu verhindern, dass WP Super Cache irgendetwas zwischenspeichert. Vergessen Sie nicht, dies beim Start zu entfernen!

define('DONOTCACHEPAGE', true);

Jede Site hat auch einen eindeutigen Schlüssel, den Sie an die URL anhängen können, um eine neue Version der Seite zu laden, die Sie meines Erachtens auf der Registerkarte "Erweitert" finden.

Um eine noch bessere Lösung zu finden, sollten Sie eine Entwicklungsumgebung und eine Produktionsumgebung einrichten, in der WP Super Cache für Ihre Entwicklungsumgebung nicht aktiviert ist (vorausgesetzt, dies ist Ihr Problem).

Wenn Ihr Problem mit CSS / JS-Dateien besteht, lesen Sie die Antwort von toscho und den nachfolgenden Kommentar von m0r7if3r oben.

Matthew Boynes
quelle
1

HyperCache deaktiviert das Caching, wenn Sie als Administrator angemeldet sind. Nicht sicher, ob WP Super Cache die gleiche Funktionalität hat.

fxfuture
quelle
Dafür gibt es eine Option, ja.
Matthew Boynes
1

Wenn Sie Chrome verwenden (was ich sehr empfehle), öffnen Sie den Inspector, klicken Sie auf das Einstellungssymbol in der unteren rechten Ecke und wählen Sie unter "Netzwerk" die Option "Cache deaktivieren".

moettinger
quelle
0

Wie gesagt für wp super cache, aber für allgemeines WP caching in wp-config.php Change to this:

define( 'WP_CACHE', false );

Referenz: codex.wordpress.org

wpcoder
quelle
-1

Sie können dieses Snippet https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1 verwenden

Jedes Mal, wenn Sie die Seite laden, wird eine neue Version Ihres aktiven Themas css und js generiert

Kennzeichen
quelle
Bitte posten Sie die Antwort hier mit dem entsprechenden Code. Verwenden Sie externe Websites nur als Referenz. Ihr Beitrag sollte eine vollständige Antwort enthalten, ohne dass Sie eine andere Website aufrufen müssen. Wenn die Website eines Drittanbieters
ausfällt