Wie erzwinge ich den CSS -Cache auf der Client -Seite?

magento.stackexchange https://magento.stackexchange.com/questions/60

  •  16-10-2019
  •  | 
  •  

Frage

Nehmen wir an, dass wir viel Funktionalität für das Modul (Vorlagen, Layouts, CSS) geändert haben und diese Änderungen an der Produktionsstelle verschieben werden, aber viele Kunden haben CSS in ihren Browsern zwischengespeichert. Hier ist also eine Frage. So erzwingen Sie den CSS -Cache des Client -Clients und vermeiden Sie die Umbenennung von Dateien (styles.css -> styles-v2.css). Es gibt einen logischen Weg, aber es funktioniert nicht in Magento, da sie die vorhandene Datei überprüft (auf die Art und Weise, wie diese Methode für JS -Dateien funktioniert), siehe unten:

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

Irgendwelche Ideen?

War es hilfreich?

Lösung

Eine Möglichkeit, damit umzugehen, besteht darin, das Verschmelzung von CSS zu ermöglichen. Dann konnten Sie einfach den Cache löschen und eine neue zusammengeführte Datei würde mit einem neuen Dateinamen erstellt.

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

Soweit ich weiß, bleibt der Hash -Code der fusionierten CSS -Datei auch dann gleich, selbst wenn sich die zugrunde liegenden Dateien geändert haben. Nur wenn sich der Satz von zusammengeführten Dateien neu addiert, ändert sich der Hash. -- @Alex

Eine andere Möglichkeit, damit umzugehen, ist, anstatt das Layout.xml zu verwenden.

Legen Sie sie einfach in Ihre page/html/head.phtml

Oder erstellen Sie einen Block, der a enthält <style> Tag mit der Versionsnummer und stecken Sie es in den XML in Ihrem Kopf, damit Sie sie nur auf bestimmte Seiten laden und dennoch die Verwendung der XML -Layouts festhalten können.

Andere Tipps

Sie können das OpenSource -Modul verwenden AOE_JSCSSTSTAMP Dies fügt den zusammengeführten CSS -Dateien Zeitstempelinformationen hinzu. Zeitstempel für einfache (nicht verabscheutende) CSS-Dateien sind Noch nicht unterstützt Dies wäre jedoch leicht zu implementieren.

Es gibt eine kostenlose Erweiterung von Github 'Magento Cachebuster', der genau dies tut. Es re

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

Das Modul bietet CacheBusting, indem das von Magento erstellte URI für> statische Dateien automatisch geändert wird, indem der Zeitstempel der Datei zum Dateinamen hinzugefügt wird:

Vor: http://www.example.com/js/varien/js.jsNach: http://www.example.com/js/varien/js.1324429472.js

Ich benutze meinen eigenen Verlängerungsspeedster dafür. Das grundlegende Prinzip ist jedoch, dass der Name der fusionierten CSS- und JS -Dateien den Zeitstempel der letzten geänderten Datei enthält - siehe Mage_Core_Model_Design_Package::getMergedCssUrl(). Jedes Mal, wenn Sie eines der CSS -Dateien bearbeiten, wird ein neuer Dateiname erstellt, wodurch Browser die neue Datei anfordern, anstatt die zwischengespeicherte Version wiederzuverwenden. Da Ihr Kopfblock zwischengespeichert werden kann, ist eine Magento -Cache -Aktualisierung erforderlich.

Ich habe auch einen Cache -Buster für CSS -Dateien implementiert. Der beste Weg, denke ich, ist zu verlängern Mage_page_block_html_head und überfahren Sie die Funktion unten und aktualisieren Sie $ Skinitems Array mit Ihren 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 die Inspiration von hier. Quelle

Es gibt eine einfache, aber mühsame Problemumgehung, für die keine Plugins erforderlich sind und nur integrierte Magento -Funktionen verwendet - nützlich, wenn Sie dies nur auf einer vorhandenen Website schnell tun müssen, ohne zu riskieren, mehr 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 fusionierte CSS -Dateiname ein Hash aller Dateien ist, die zusammengeführt werden, fügen Sie einfach eine extra leere CSS -Datei in das Thema mit einem Datumsstempel für einen Namen hinzu.

So:

  1. Schalten Sie CSS -Dateien in Konfiguration> Erweitert> Entwickler ein
  2. In Ihren Themenlayouts finden Sie, wo Sie CSS -Dateien zum Kopf hinzufügen (normalerweise Seite.xml) und eine zusätzliche Stylesheet -Datei hinzufügen, so lange Sie möchten, wie eindeutig der Name 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 die Dateiinhalte habe ich gerade einen Kommentar abgegeben, für wofür die Datei statt

Drücken Sie nun das Live und spülen Sie den Magento -Cache, die fusionierte CSS -Datei hat jetzt einen anderen Namen und Ihre Caches werden zerbrochen!

Es ist umständlich, da jedes Mal, wenn Sie den Cache sprengen möchten, den Sie für den Dateinamen ändern müssen, aber es erfordert nichts anderes als eingebaute Magento -Funktionen. Es ist also praktisch, wenn Sie sich festhalten und eine schnelle Lösung benötigen!

=> Anstatt diesen Code zu verwenden:

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

=> Versuchen Sie, diesen Code zu verwenden:

<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 ...

Ich habe ein Modul gefunden, das eine Abfragezeichenfolge bis zum Ende aller CSS und JS in XML -Layouts angehängt hat. Die Abfragezeichenfolge ist vom Administrator konfiguriert.

https://github.com/mklooss/loewenstark_head

Die Grundidee besteht darin, überschreiben _prepareStaticAndSkinElements Um eine Abfragezeichenfolge einzuschließen, wie im unten gezeigten Modul angegeben.

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

Wenn ich die vorgeschlagene Lösung in Ihrer Frage verstehe, können Sie dies mit einem leichten Mod für eine Kerndatei tun (Bearbeiten Sie die Kerndatei nicht wirklich):

Magier/page/block/html/head.php

Fügen Sie so etwas wie? V = 1 in Zeile 198 hinzu, sodass alle CSS -Dateien dies angehängt haben:

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

Ich denke, Fooman Speedster hat fortgeschritten (http://www.magentocommerce.com/magento-connect/foomanspeedsteradvanced-4030.html) könnte eine Lösung sein:

"Vollautomatisiert nach der Installation, mit automatischer Versioning, wenn JavaScript/CSS -Dateien aktualisiert werden."

Ich habe dafür ein kostenloses Modul gebaut:

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

Bitte lassen Sie mich wissen, ob es nicht wie erwartet funktioniert, aber ich habe es erstellt, damit 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 nur den Hash der kombinierten Datei, wenn sich der Dateiname eines der enthaltenen Dateien geändert hat.

AKTUALISIEREN

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

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

Es gibt ein wirklich schönes Modul von Fabrizio Branca, das genau das tut, was Sie interessiert. Es heißt, es heißt AOE_JSCSSTSTAMP . Was es macht? Es fügt sowohl CSS- als auch JS -Ressourcen einen Zeitstempel hinzu. Wenn Sie CSS/JS -Cache spülen, werden die Zeitstempel neu erstellt.

Der Browser wird einen unterschiedlichen Dateinamen sehen - deshalb wird die Ressourcen wieder beladen und mit dem frischesten anstelle von zwischen dem Browser zwischengespeicherten Ressourcen serviert.

Bearbeiten Sie einfach die Methode getcsssjshtml in Mage_page_block_html_head, Fügen Sie eine solche Zeichenfolge für ein paar Tage nach der Bearbeitung von CSS 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
        );

Wenige Jahre später und keine nützliche Erweiterung, die keine Dateien verschmilzt und einfach ist, habe ich meine eigene erstellt. Die Hauptidee ist, dass nach dem Spülen von Cache den Zeitstempel aktualisiert wird. Mit anderen Worten - wenn Sie einige ändern css/js, Nur Flush -Cache und Zeitstempel werden aktualisiert.

Quellcode ist da -> https://github.com/archonkulis/ansolutions_cssjstimestamp

Arbeitet weiter 1.9+ Ausführung. Ich bin mir jedoch nicht sicher über ältere Versionen, sollte aber auch höchstwahrscheinlich auch funktionieren.

Machen Sie eine Kopie Ihres Themas mit einem neuen Namen (themev2) - sowohl Haut als auch App/Design usw. und wählen Sie das neue Thema in Admin.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit magento.stackexchange
scroll top