Come forzare la cache CSS a filo sul lato client?

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

16-10-2019
|

Domanda

Supponiamo che abbiamo cambiato un sacco di funzionalità per il modulo (modelli, layout, CSS) e ci accingiamo a spostare questi cambiamenti al sito di produzione, ma un sacco di clienti hanno cache CSS nei loro browser. Così qui è una domanda. Come forzare il colore di client della cache CSS e rinominare file evitano (styles.css -> styles-v2.css). C'è un modo logico, ma non funziona in Magento, perché controlla file esistente (dal modo in cui questo metodo funziona per i file JS), vedere di seguito:

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

Tutte le idee?

Soluzione

Un modo per affrontare questo sta permettendo la fusione di CSS. Poi si può solo cancellare la cache e un nuovo file risultante dalla concentrazione sarebbe creata con un nuovo nome di file.

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

Per quanto ne so, il codice hash dei soggiorni di file CSS unite lo stesso anche se i file sottostanti modificati - solo se i nuovi file vengono aggiunti alla l'insieme di file uniti, l'hash cambia. - @alex

Un altro modo di affrontare questo è invece di utilizzare il layout.xml,

basta metterli nel vostro page/html/head.phtml

O creare un blocco che contiene un tag <style> con numero di versione e metterlo nel XML nella tua testa in modo da poter avere caricare solo su pagine specifiche e ancora attaccata ad utilizzare i layout XML.

Altri suggerimenti

È possibile utilizzare la OpenSource modulo Aoe_JsCssTstamp che aggiunge informazioni timestamp ai file CSS uniti. Timestamp per i file CSS normali (non-fuse) sono non ancora supportato però ma questo sarebbe facile da implementare.

V'è un'estensione gratuita su GitHub 'Magento cachebuster' che fa esattamente questo. Si ri

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

Il modulo fornisce busting della cache modificando automaticamente l'URI creato da Magento per> file statici aggiungendo il timestamp del file al nome del file:

Prima: http://www.example.com/js/varien/js.js Dopo: http://www.example.com/js/varien/js.1324429472.js

Io uso il mio proprio interno Speedster avanzato per questo. Ma il principio di base è che il nome del file CSS e JS unite include il timestamp dell'ultimo file modificato - vedi Mage_Core_Model_Design_Package::getMergedCssUrl(). Ogni volta che si modifica una delle css file un nuovo nome di file viene creato causando browser per richiedere il nuovo file invece di riutilizzare la versione in cache. Dal momento che il blocco di testa potrebbe essere memorizzato nella cache è necessario un aggiornamento della cache di Magento.

Inoltre ho implementato un fenomeno cache per file CSS. Il modo migliore credo sia di estendere Mage_Page_Block_Html_Head e sopra cavalcare la funzione qui sotto e update $ skinItems array con le modifiche desiderate.

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

}

Si è l'ispirazione da qui. Fonte

V'è un semplice ma ingombrante soluzione che non richiede alcun plugin e utilizza solo costruito in capacità di Magento -. Utile se si ha solo a che fare in fretta su un sito esistente senza voler rischiare di installare ulteriori codice

L'idea è che si può utilizzare il sistema CSS fusione per generare un nome di file di cache busting.

Come il nome del file CSS fusione è un hash di tutti i file che vengono uniti insieme è sufficiente aggiungere un extra file vuoto css nel tema con un indicatore di data per un nome.

Attiva file Merge CSS in Configurazione> Avanzate> Developer
Nel tuo layout a tema trovare dove si aggiungono file CSS per la testa (in genere page.xml) e aggiungere un foglio di stile in più, lo chiamano tutto quello che vuoi fino a quando il nome è univoco per esempio <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
Nella tua pelle CSS cartella di creare un nuovo file css con quel nome, per il contenuto del file ho appena messo un commento che dice ciò che il file è per

Ora spinta che dal vivo e svuotare la cache di Magento, il file css unito ora avrà un nome diverso e il vostro cache verrà sballato!

E 'ingombrante, come ogni volta che si desidera busto la cache è necessario modificare che il nome del file, ma richiede altro che costruito nel funzionalità di Magento quindi è utile se ci si trova bloccati e hanno bisogno di una soluzione rapida!

=> Invece di usare questo codice:

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

=> Prova ad usare questo codice:

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

Ma non è molto bello ...

ho trovato un modulo che aggiungere una stringa di query per la fine di tutti i CSS e JS nei layout xml. La stringa di query è configurabile da admin.

https://github.com/mklooss/Loewenstark_Head

L'idea di base è quella di ignorare _prepareStaticAndSkinElements per includere una stringa di query, come fatto nel modulo, illustrato di seguito.

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

Se ho capito la soluzione proposta nella sua interrogazione, è possibile farlo con un leggero mod per un file core ( in realtà non modifica il file core ):

Mage / Pagina / blocchi / Html / head.php

aggiungere qualcosa di simile v = 1 alla linea 198 in modo che tutti i file css hanno questo aggiunto:

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

Credo Fooman Speedster avanzata ( http: //www.magentocommerce. com / magento-connect / Fooman-speedsteradvanced-4030.html ) potrebbe essere una soluzione:

"Completamente automatizzato una volta installato, con versioning automatico quando Javascript / file CSS vengono aggiornati"

Ho costruito un modulo gratuito per questa:

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

Per favore fatemi sapere se non funziona come previsto, ma ho costruito in modo che i js combinati ei file css avranno un hash diverso se il contenuto di uno dei file concatenati è cambiato. Per impostazione predefinita Magento cambia solo l'hash del file combinato, se il nome del file di uno dei file inclusi è cambiata.

UPDATE

Ho anche fatto un modulo minify gratuito e semplice per quelli di voi che credono in esso.

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

C'è davvero un bel modulo creato da Fabrizio Branca che fa esattamente la cosa che ti interessa. Si chiama AOE_JsCSSTStamp . Cosa fa? Si aggiunge un timestamp sia CSS e JS risorse. Quando si filo CSS / cache JS poi i timestamp vengono ricreati.

Il browser vedrà nome diverso - è per questo che sarà riscaricare di nuovo le risorse ed essere servita con i più freschi uno invece di cache nel browser.

Basta modificare il metodo di getCssJsHtml in Mage_Page_Block_Html_Head , aggiungere una stringa come questo per un paio di giorni dopo il css modifica e questo è tutto ... funziona semplicemente

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

Alcuni anni più tardi, e non trovando alcuna estensione utile che non unire i file ed è semplice, ho creato la mia. L'idea principale è che dopo il lavaggio cache, aggiornerà il timestamp. Quindi, in altre parole -. Quando si cambia un po 'css/js, solo la cache a livello e timestamp saranno aggiornati

Il codice sorgente è qui -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Opere su 1.9 + di versione. Non sei sicuro di anziani versioni, però, ma molto probabilmente dovrebbe funzionare così.

Fare una copia del vostro tema con un nuovo nome (themev2) -. La pelle e app / disegno, ecc Poi scegliere il nuovo tema in admin

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a magento.stackexchange