Cómo forzar caché CSS a ras en el lado del cliente?

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

16-10-2019
|

Pregunta

Supongamos que hemos cambiado un montón de funcionalidades para el módulo (plantillas, diseños, CSS) y vamos a mover estos cambios en el sitio de producción, pero una gran cantidad de clientes han almacenado en caché CSS en sus navegadores. Así que aquí es una pregunta. Cómo forzar caché CSS y cambiar el nombre de archivo del cliente evite ras (styles.css -> styles-v2.css). Hay una manera lógica, pero no funciona en Magento, porque comprueba archivo existente (por la forma en que este método funciona para archivos JS), véase a continuación:

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

¿Alguna idea?

Solución

Una forma de tratar este está permitiendo la fusión de CSS. Posteriormente, se podría simplemente borrar la memoria caché y un nuevo archivo fusionado se crearía con un nuevo nombre de archivo.

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

Por lo que yo sé, el código hash de las estancias de archivos CSS fusionadas al mismo incluso si los archivos subyacentes cambian - sólo si se agregan nuevos archivos a el conjunto de archivos combinados, el hash cambia. - @Alex

Otra forma de hacer frente a esto es en lugar de utilizar el layout.xml,

simplemente los puso en su page/html/head.phtml

O crear un bloque que contiene una etiqueta <style> con número de versión y ponerlo en el XML en su cabeza para que pueda hacer que cargue sólo en páginas específicas y todavía se pegan a la utilización de los diseños de XML.

Otros consejos

Puede utilizar el módulo OpenSource Aoe_JsCssTstamp que añade información de fecha y hora a los archivos CSS fusionadas. Las marcas de tiempo para los archivos CSS de fricción (no fusionadas) son aún no apoya sin embargo pero esto sería fácil de implementar.

Hay una extensión libre en github 'Magento Cachebuster' que hace exactamente esto. Se re

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

El módulo proporciona cachebuster alterando automáticamente el URI creado por Magento para> archivos estáticos mediante la adición de la marca de tiempo del archivo al nombre de archivo:

Antes: http://www.example.com/js/varien/js.js Después: http://www.example.com/js/varien/js.1324429472.js

Uso mi propia extensión Speedster avanzada para esto. Pero el principio básico es que el nombre de los archivos CSS y JS fusionadas incluye la marca de tiempo del último archivo modificado - ver Mage_Core_Model_Design_Package::getMergedCssUrl(). Cualquier vez que se edita cualquiera de los archivos CSS un nuevo nombre de archivo se crea causando navegadores para solicitar el nuevo archivo en lugar de volver a utilizar la versión en caché. Desde el bloque de cabeza podría ser almacenado en caché es necesaria una actualización de la memoria caché de Magento.

También he implementado un destructor de caché para archivos CSS. La mejor manera que supongo es extender Mage_Page_Block_Html_Head y sobre la función de montar a continuación y actualización de $ skinItems array con los cambios deseados.

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

}

obtuvo la inspiración de aquí. Fuente

Hay una solución simple pero engorroso que no requiere ningún tipo de plugins y sólo utiliza construido en capacidades de Magento -. Útil si lo que tiene que hacer rápidamente en un sitio existente sin querer instalar ningún riesgo código sea más

La idea es que se puede utilizar el sistema CSS combinado para generar un nombre de archivo de almacenamiento en caché.

Como el nombre del archivo CSS fusionada es un hash de todos los archivos que se combinan entre sí sólo tiene que añadir un archivo en blanco css adicional en el tema con un sello de fecha para un nombre.

Así que:

Activar Combinar archivos CSS en Configuración> Opciones avanzadas> desarrollador
En sus diseños temáticos encuentran donde se agrega archivos CSS a la cabeza (normalmente page.xml) y añade un archivo de hoja de estilo adicional, lo llaman lo que quieras, siempre y cuando el nombre es único p.ej <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
En el CSS piel carpeta crear un nuevo archivo css con ese nombre, por el contenido del archivo que acabo de poner un comentario diciendo lo que el archivo es de

Ahora empuje que vivo y vaciar la caché de Magento, el archivo css fusionada tendrá ahora un nombre diferente y será roto sus caches!

Es engorroso, ya que cada vez que desee para reventar la caché necesita cambiar ese nombre de archivo, pero no requiere nada que no sea construido en capacidades de Magento por lo que es muy útil si usted se encuentra atascado y necesitan una solución rápida!

=> lugar de utilizar este código:

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

=> Trate de usar este código:

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

Pero no es muy agradable ...

He encontrado un módulo que se añada una cadena de consulta hasta el final de todos los CSS y JS en los diseños XML. La cadena de consulta es configurable desde el administrador.

https://github.com/mklooss/Loewenstark_Head

La idea básica es reemplazar _prepareStaticAndSkinElements para incluir una cadena de consulta, como se hace en el módulo, se muestra a continuación.

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

Si entiendo la solución propuesta en su pregunta, usted puede hacer eso con un ligero mod a un archivo de núcleo ( en realidad no editar el archivo de núcleo ):

Mago / Página / Bloquear / html / head.php

añadir algo como v = 1 a la línea 198 por lo que todos los archivos CSS han anexado esta:

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

Creo Fooman Speedster Avanzada ( http: //www.magentocommerce. com / magento-connect / Fooman-speedsteradvanced-4030.html ) podría ser una solución:

"Totalmente automatizado, una vez instalado, con versionado automático cuando Javascript / CSS archivos se actualizan"

He construido un módulo libre para esto:

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

Por favor, hágamelo saber si no funciona como se esperaba, pero he construido de tal manera que el js combinados y archivos CSS tendrán un hash diferente si el contenido de uno de los archivos concatenados ha cambiado. Por defecto Magento sólo cambia el hash del archivo combinado si el nombre de uno de los archivos incluidos ha cambiado.

Actualizar

También hizo un módulo Minify libre y simple para aquellos de ustedes que creen en él.

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

No es un módulo muy agradable creado por Fabricio Branca que hace exactamente lo que le interesa. Se llama AOE_JsCSSTStamp . ¿Que hace? Se añade una marca de tiempo a la vez CSS y JS de recursos. Cuando a continuación, se vuelven a crear CSS que ras / caché JS las marcas de tiempo.

El navegador verá diferente nombre - es por eso que se vuelve a descargar los recursos de nuevo y ser servido con el más actualizado en lugar de en caché en el navegador.

Sólo editar el método getCssJsHtml en Mage_Page_Block_Html_Head , agregue una cadena como esta durante unos días después de editar css y eso es todo ... simplemente funciona

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

Pocos años más tarde y no encontrar ninguna extensión útil que no va a combinar archivos y es simple, he creado mi propia. La idea principal es que después de vaciar la caché, se actualizará la marca de tiempo. Así, en otras palabras -. Cuando se cambia alguna css/js, simplemente caché de color y marca de hora se actualizarán

El código fuente está aquí -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Las obras en 1.9 + versión. No está seguro acerca de las versiones anteriores, sin embargo, pero probablemente la mayoría debería funcionar tan bien.

Hacer una copia de su tema con un nuevo nombre (themev2) -. La piel y aplicación / diseño, etc. A continuación, seleccione el nuevo tema en el administrador

Licenciado bajo: CC-BY-SA con atribución

No afiliado a magento.stackexchange