Wie erzwinge ich das Leeren des CSS-Cache auf der Clientseite?

61

Angenommen, wir haben viele Funktionen für das Modul (Vorlagen, Layouts, CSS) geändert und werden diese Änderungen auf die Produktionssite verschieben, aber viele Kunden haben CSS in ihren Browsern zwischengespeichert. Also hier ist eine Frage. So erzwingen Sie das Leeren des CSS-Cache des Clients und vermeiden das Umbenennen von Dateien ( styles.css-> styles-v2.css). Es gibt einen logischen Weg, aber er funktioniert in Magento nicht, da er die vorhandene Datei überprüft (wie diese Methode für JS-Dateien funktioniert), siehe unten:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>  

Irgendwelche Ideen?

Nick
quelle

Antworten:

37

Eine Möglichkeit, damit umzugehen, besteht darin, das Zusammenführen von CSS zu ermöglichen. Dann könnten Sie einfach den Cache leeren und eine neue zusammengeführte Datei mit einem neuen Dateinamen erstellen.

System -> Configuration -> Developer -> CSS settings -> Merge CSS Files

Soweit ich weiß, bleibt der Hash-Code der zusammengeführten CSS-Datei selbst dann unverändert, wenn sich die zugrunde liegenden Dateien geändert haben - nur wenn neue Dateien zum Satz zusammengeführter Dateien hinzugefügt werden, ändert sich der Hash. -- @Alex

Eine andere Möglichkeit, damit umzugehen, ist die Verwendung der Datei layout.xml.

steck sie einfach in deine page/html/head.phtml

Oder erstellen Sie einen Block, der ein <style>Tag mit der Versionsnummer enthält, und fügen Sie ihn in das XML-Format in Ihrem Kopf ein, damit Sie ihn nur auf bestimmten Seiten laden und weiterhin die XML-Layouts verwenden können.

Rick Kuipers
quelle
10
Soweit mir bekannt ist, bleibt der Hash-Code der zusammengeführten CSS-Datei selbst dann unverändert, wenn sich die zugrunde liegenden Dateien geändert haben - nur wenn neue Dateien zum Satz zusammengeführter Dateien hinzugefügt werden, ändert sich der Hash.
Alex
@Alex wusste das nicht, macht Sinn.
Rick Kuipers
4
Ich habe mir das in letzter Zeit noch nicht angesehen, aber in der Vergangenheit scheint die Zusammenstellung von CSS / JS Ihrer Site tatsächlich zusätzliches Gewicht zu verleihen, wenn Sie verschiedene CSS / JS auf verschiedenen Seiten laden. Es wurde eine andere kompilierte Version pro einzigartigem Satz von Skripten erstellt. Dies bedeutet, dass größere Dateien, die kompiliert werden, im Wesentlichen mehrmals heruntergeladen werden.
Peter O'Callaghan
@cags - Ja, im Grunde ist es unter diesen Bedingungen die einzige Geschwindigkeitsverbesserung, alle CSS / JS-Dateien einmal herunterzuladen und zu minimieren.
Fiasco Labs
Dies kann manchmal das CSS-Verhalten ändern, zumindest für mich in Magento 1.9.2.1
Goose am
19

Sie können das OpenSource-Modul Aoe_JsCssTstamp verwenden, das den zusammengeführten CSS-Dateien Zeitstempelinformationen hinzufügt. Zeitstempel für einfache (nicht zusammengeführte) CSS-Dateien werden noch nicht unterstützt , dies wäre jedoch einfach zu implementieren.

Alex
quelle
10

Es gibt eine kostenlose Erweiterung für den Github 'Magento Cachebuster', die genau dies tut. Es ist re

https://github.com/gknoppe-guidance/magento-cachebuster

Das Modul bietet Cachebusting, indem es den von Magento für> statische Dateien erstellten URI automatisch ändert, indem es den Zeitstempel der Datei zum Dateinamen hinzufügt:

Vorher: http://www.example.com/js/varien/js.js Nachher: http://www.example.com/js/varien/js.1324429472.js

Kimberly Thomas
quelle
2
Dieses Modul analysiert den HTML-Code für jede Antwort, um die Zeitstempel hinzuzufügen, die möglicherweise die Leistung beeinträchtigen könnten. github.com/fbrnc/Aoe_JsCssTstamp macht dasselbe auf performantere Weise, aber es muss das Designpaketmodell neu geschrieben werden, um dies zu erreichen, während Cachebuster nur einen Beobachter verwendet.
Fabian Schmengler
10

Ich benutze dafür meine eigene Erweiterung Speedster Advanced. Das Grundprinzip ist jedoch, dass der Name der zusammengeführten CSS- und JS-Dateien den Zeitstempel der zuletzt geänderten Datei enthält - siehe Mage_Core_Model_Design_Package::getMergedCssUrl(). Jedes Mal, wenn Sie eine der CSS-Dateien bearbeiten, wird ein neuer Dateiname erstellt, sodass Browser die neue Datei anfordern, anstatt die zwischengespeicherte Version erneut zu verwenden. Da Ihr Headblock möglicherweise zwischengespeichert wird, ist eine Magento-Cache-Aktualisierung erforderlich.

Kristof bei Fooman
quelle
Fooman Speedster bekommt meine Stimme große Erweiterung
Bobadevv
8

Ich habe auch einen Cache-Buster für CSS-Dateien implementiert. Am besten erweitern Sie Mage_Page_Block_Html_Head und überschreiben die folgende Funktion. Aktualisieren Sie das Array $ skinItems mit den gewünschten Änderungen.

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $designPackage = Mage::getDesign();
    //$skinItems: contains all css
    foreach ($skinItems as $params => $rows) {
        foreach ($rows as $key=>$name) {
            $file = $designPackage->getFilename($name, array('_type' => 'skin'));
            $skinItems[$params][$key] = $name . "?fmt=" . filemtime($file);
        }
    }
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);

}

Habe mich von hier inspirieren lassen. Quelle

Ahad Ali
quelle
1
Dies funktioniert nicht, die Skin-Dateien werden immer auf base / default zurückgesetzt, da der Dateiname mit der angehängten Abfragezeichenfolge nicht gefunden wird.
BlueC
Ihre Kommentare "Der Dateiname wird mit der angehängten Abfragezeichenfolge nicht gefunden" sind genau das, was wir wollen und was den Cache sprengen und den Cache-Server zwingen wird, eine neue Kopie abzurufen.
Ahad Ali
1
Nein, so funktioniert das überhaupt nicht. Sie ändern die Werte der Elemente im $ skinItems-Array und übergeben diese zurück an die übergeordnete _prepareStaticAndSkinElements () -Methode. Diese übergeordnete Methode ruft Mage :: getDesign () -> getSkinUrl () für jedes geänderte Element auf, das dann immer auf base / default zurückgreift, da die Dateien mit dem angehängten? Fmt = xxx im Dateisystem nicht gefunden werden können.
BlueC
Nicht sicher über seine Umsetzung, aber die Inspiration an der Unterseite bezogen auf jeden Fall funktioniert genau so , wie Sie würden hoffen, github.com/mklooss/Loewenstark_Head
Goose
8

Es gibt eine einfache, aber umständliche Problemumgehung, die keine Plugins erfordert und nur integrierte Magento-Funktionen verwendet - nützlich, wenn Sie dies auf einer vorhandenen Site schnell erledigen müssen, ohne das Risiko eingehen zu müssen, weiteren Code zu installieren.

Die Idee ist, dass Sie das zusammengeführte CSS-System verwenden können, um einen Cache-Busting-Dateinamen zu generieren.

Da der Name der zusammengeführten CSS-Datei ein Hash aller zusammengeführten Dateien ist, fügen Sie dem Design einfach eine zusätzliche leere CSS-Datei mit einem Datumsstempel für einen Namen hinzu.

Damit:

  1. Aktivieren Sie die Option CSS-Dateien zusammenführen unter Konfiguration> Erweitert> Entwickler
  2. Suchen Sie in Ihren Design-Layouts, wo Sie CSS-Dateien zum Kopf hinzufügen (normalerweise page.xml) und fügen Sie eine zusätzliche Stylesheet-Datei hinzu. Nennen Sie sie beliebig, solange der Name eindeutig ist, z <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
  3. Erstellen Sie in Ihrem Skin-CSS-Ordner eine neue CSS-Datei mit diesem Namen. Für den Dateiinhalt habe ich nur einen Kommentar eingefügt, in dem steht, wozu die Datei dient

Schieben Sie das jetzt live und leeren Sie den Magento-Cache. Die zusammengeführte CSS-Datei hat nun einen anderen Namen und Ihre Caches werden gelöscht!

Es ist umständlich, da Sie jedes Mal, wenn Sie den Cache auflösen möchten, diesen Dateinamen ändern müssen. Es sind jedoch nur integrierte Magento-Funktionen erforderlich. Es ist also praktisch, wenn Sie nicht weiterkommen und eine schnelle Lösung benötigen!

benz001
quelle
7

=> Anstatt diesen Code zu verwenden:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>

=> Versuchen Sie diesen Code zu benutzen:

<reference name="head">
    <block type="core/text" name="foocss">
        <action method="setText">
            <css><![CDATA[<link rel="stylesheet" type="text/css" href="foo.css?1" media="all" />]]></css>
        </action>
    </block>
</reference>

Aber es ist nicht sehr schön ...

Erfan
quelle
Interessante Idee :)
Nick
Dies ist eine hervorragende Idee für eine kurzfristige Überprüfung.
Jay El-Kaake,
4

Ich habe ein Modul gefunden, das eine Abfragezeichenfolge an das Ende von CSS und JS in XML-Layouts anfügt. Die Abfragezeichenfolge kann vom Administrator konfiguriert werden.

https://github.com/mklooss/Loewenstark_Head

Die Grundidee besteht darin _prepareStaticAndSkinElements, eine Abfragezeichenfolge zu überschreiben , wie in dem unten gezeigten Modul ausgeführt.

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $version = Mage::getStoreConfig("design/head/meta_version_tag");
    $format = sprintf($format, "%s?v{$version}", "%s");
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);
}
Gans
quelle
3

Wenn ich die vorgeschlagene Lösung in Ihrer Frage verstehe, können Sie dies mit einem kleinen Mod an einer Kerndatei tun ( bearbeiten Sie die Kerndatei nicht wirklich ):

Mage / Page / Block / Html / Head.php

Fügen Sie in Zeile 198 so etwas wie? V = 1 hinzu, damit an alle CSS-Dateien Folgendes angehängt wird:

$html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?v=1"%s />' . "\n",
kevando
quelle
2

Ich habe dafür ein kostenloses Modul gebaut:

http://www.magentocommerce.com/magento-connect/frontend-flush-2048.html

Bitte lassen Sie mich wissen, wenn es nicht wie erwartet funktioniert, aber ich habe es so erstellt, dass die kombinierten js- und css-Dateien einen anderen Hash haben, wenn sich der Inhalt einer der verketteten Dateien geändert hat. Standardmäßig ändert Magento den Hash der kombinierten Datei nur, wenn sich der Dateiname einer der enthaltenen Dateien geändert hat.

AKTUALISIEREN

Ich habe auch ein kostenloses und einfaches Minify-Modul für diejenigen von euch erstellt, die daran glauben.

http://www.magentocommerce.com/magento-connect/minify-7771.html

Anton Evers
quelle
Dieses Modul funktioniert nicht ...
SIBHI S
2

Es gibt ein wirklich nettes Modul von Fabrizio Branca, das genau das macht, woran Sie interessiert sind. Es heißt AOE_JsCSSTStamp . Was es macht? Es fügt CSS- und JS-Ressourcen einen Zeitstempel hinzu. Wenn Sie den CSS / JS-Cache leeren, werden die Zeitstempel neu erstellt.

Im Browser wird ein anderer Dateiname angezeigt. Aus diesem Grund werden die Ressourcen erneut heruntergeladen und es wird der neueste bereitgestellt, anstatt im Browser zwischengespeichert zu werden.

versedi
quelle
1

Bearbeiten Sie einfach die Methode getCssJsHtml in Mage_Page_Block_Html_Head , fügen Sie nach der CSS-Bearbeitung für einige Tage eine Zeichenfolge wie diese hinzu, und das ist alles ... es funktioniert einfach

// static and skin css
        $html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?foo=WHAT_YOU_WANT_HERE"%s />' . "\n",
            empty($items['js_css']) ? [] : $items['js_css'],
            empty($items['skin_css']) ? [] : $items['skin_css'],
            $shouldMergeCss ? [Mage::getDesign(), 'getMergedCssUrl'] : null
        );
Arno
quelle
1

Einige Jahre später habe ich meine eigene Erweiterung erstellt, die keine sinnvolle Erweiterung findet, mit der Dateien nicht zusammengeführt werden können. Die Hauptidee ist, dass nach dem Leeren des Caches der Zeitstempel aktualisiert wird. Mit anderen Worten: Wenn Sie Änderungen vornehmen css/js, werden nur der Cache und der Zeitstempel aktualisiert.

Der Quellcode ist hier -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Funktioniert auf 1.9+ Version. Bei älteren Versionen bin ich mir nicht sicher, sollte aber höchstwahrscheinlich auch funktionieren.

user3722573
quelle
-2

Erstellen Sie eine Kopie Ihres Themas mit einem neuen Namen (themev2) - sowohl Skin als auch App / Design usw. Wählen Sie dann das neue Thema in admin aus.

Der Phil Lee
quelle
nein, das machst du nie. Das ist wirklich eine schlechte Methode
Marius
Warum nicht? Auf diese Weise können Sie schnell zur alten Version zurückkehren, wenn mit der neuen Version etwas schief geht. Wenn Sie lange Browser-Caching-Zeiten und / oder CDNs für Ihre CSS verwenden (und js, die möglicherweise auch gelöscht / ungültig gemacht werden müssen), ist dies bei weitem der einfachste Weg.
Die Phil Lee
Wenn etwas schief geht, machen Sie einen Rollback, der einen anderen (den alten) Dateinamen enthalten sollte. Daher ist eine Änderung der Konfiguration (als Paket / Theme gelesen) nicht erforderlich
Fabian Blechschmidt
Ich weiß nicht, wie Sie Bereitstellungen durchführen, aber auf diese Weise muss ich den alten Themenordner beibehalten, bis ich den Wert für das Paket / Thema ändere, oder ein Skript erstellen, das den Wert bei der Installation aktualisiert. Wenn ich für verschiedene Zeiträume unterschiedliche Themen festgelegt habe, sind diese möglicherweise betroffen. Das Duplizieren vieler Dateien ist bei weitem der einfachste Weg. Beispiel: Die Installation von github.com/jreinke/magento-suffix-static-files ist viel einfacher. Alles, was Sie tun müssen, ist, nach jedem Deployment eine Nummer im Backend zu ändern.
Marius
Denk nicht mal so!
Rinto George