Comment forcer le vidage du cache CSS côté client?

62

Supposons que nous ayons modifié de nombreuses fonctionnalités pour le module (modèles, mises en page, CSS) et que nous allons transférer ces modifications vers le site de production, mais de nombreux clients ont mis en cache CSS dans leurs navigateurs. Alors voici une question. Comment forcer le vidage du cache CSS du client et éviter de renommer les fichiers ( styles.css-> styles-v2.css). Il y a un moyen logique mais cela ne fonctionne pas dans Magento, car il vérifie le fichier existant (par la façon dont cette méthode fonctionne pour les fichiers JS), voir ci-dessous:

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

Des idées?

pseudo
la source

Réponses:

37

Une solution consiste à permettre la fusion de CSS. Ensuite, vous pouvez simplement vider le cache et créer un nouveau fichier fusionné avec un nouveau nom de fichier.

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

Autant que je sache, le code de hachage du fichier CSS fusionné reste le même, même si les fichiers sous-jacents ont été modifiés. Ce n'est que si de nouveaux fichiers sont ajoutés à l'ensemble des fichiers fusionnés que le hachage change. - @Alex

Une autre façon de gérer cela consiste à utiliser le fichier layout.xml,

il suffit de les mettre dans votre page/html/head.phtml

Vous pouvez également créer un bloc contenant une <style>balise avec un numéro de version et l'insérer dans le code XML de manière à pouvoir le charger uniquement sur des pages spécifiques tout en conservant les dispositions XML.

Rick Kuipers
la source
10
Autant que je sache, le code de hachage du fichier CSS fusionné reste le même, même si les fichiers sous-jacents ont été modifiés. Ce n'est que si de nouveaux fichiers sont ajoutés à l'ensemble des fichiers fusionnés que le hachage change.
Alex
@ Alex ne le savait pas, ça a du sens.
Rick Kuipers
4
Je n'ai pas examiné cela récemment, mais dans le passé, la compilation de CSS / JS semble réellement ajouter du poids à votre site si vous chargez différents CSS / JS sur différentes pages. Il a créé une version compilée différente par jeu de scripts unique. Cela signifie que les fichiers volumineux compilés sont essentiellement téléchargés plusieurs fois.
Peter O'Callaghan le
@cags - Oui, dans ces conditions, réduire et autoriser le téléchargement unique de tous les fichiers CSS / JS est la seule amélioration de la vitesse qui fonctionne.
Fiasco Labs
Cela peut parfois changer le comportement des CSS, du moins pour moi dans Magento 1.9.2.1
Goose.
19

Vous pouvez utiliser le module OpenSource Aoe_JsCssTstamp qui ajoute des informations d'horodatage aux fichiers CSS fusionnés. Les horodatages des fichiers CSS simples (non fusionnés) ne sont pas encore pris en charge, mais ils seraient faciles à implémenter.

Alex
la source
10

Il existe une extension gratuite sur github 'Magento Cachebuster' qui fait exactement cela. Il re

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

Le module fournit le cachebusting en modifiant automatiquement l'URI créé par Magento pour> les fichiers statiques en ajoutant l'horodatage du fichier au nom du fichier:

Avant: http://www.example.com/js/varien/js.js Après: http://www.example.com/js/varien/js.1324429472.js

Kimberely Thomas
la source
2
Ce module analyse le code HTML de chaque réponse pour ajouter les horodatages, ce qui pourrait nuire aux performances. github.com/fbrnc/Aoe_JsCssTstamp fait la même chose d'une manière plus performante, mais il doit réécrire le modèle de package de conception pour le réaliser, alors que Cachebuster utilise uniquement un observateur.
Fabian Schmengler
10

J'utilise ma propre extension Speedster Advanced pour cela. Mais le principe de base est que le nom des fichiers fusionnés css et js inclut l’horodatage du dernier fichier modifié - voir Mage_Core_Model_Design_Package::getMergedCssUrl(). Chaque fois que vous modifiez l'un des fichiers css, un nouveau nom de fichier est créé, ce qui force les navigateurs à demander le nouveau fichier au lieu de réutiliser la version mise en cache. Puisque votre bloc de tête est peut-être mis en cache, une actualisation du cache de Magento est nécessaire.

Kristof chez Fooman
la source
Fooman Speedster obtient mon vote super extension
Bobadevv
8

J'ai également implémenté un cache buster pour les fichiers CSS. La meilleure façon, je suppose, est d'étendre Mage_Page_Block_Html_Head et d' utiliser la fonction ci-dessous et de mettre à jour le tableau $ skinItems avec les modifications souhaitées.

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

}

Vous avez l'inspiration d'ici. La source

Ahad Ali
la source
1
Cela ne fonctionnera pas, les fichiers d'habillage retomberont toujours sur base / défaut car le nom de fichier ne sera pas trouvé avec la chaîne de requête ajoutée.
BlueC
vos commentaires "Le nom de fichier ne sera pas trouvé avec la chaîne de requête ajoutée" c'est ce que nous voulons et ce qui va détruire le cache et forcer le serveur de cache à récupérer une nouvelle copie.
Ahad Ali
1
Non, ce n'est pas comme ça que ça fonctionne. Vous modifiez les valeurs des éléments du tableau $ skinItems, puis vous les transmettez à la méthode parent _prepareStaticAndSkinElements (). Cette méthode parente appellera Mage :: getDesign () -> getSkinUrl () sur chaque élément modifié, qui sera ensuite toujours replié sur base / défaut car il ne peut pas localiser les fichiers avec le fichier? Fmt = xxx ajouté sur le système de fichiers.
BlueC
Pas sûr de son implémentation, mais l'inspiration au bas fonctionne vraiment exactement comme vous l' espériez
Goose
8

Il existe une solution de contournement simple mais fastidieuse qui ne nécessite aucun plug-in et utilise uniquement les fonctionnalités intégrées de Magento - utile si vous devez simplement le faire rapidement sur un site existant sans vouloir risquer d'installer plus de code.

L'idée est que vous pouvez utiliser le système CSS fusionné pour générer un nom de fichier contournant le cache.

Comme le nom de fichier CSS fusionné est un hachage de tous les fichiers fusionnés, il vous suffit d'ajouter un fichier CSS vierge supplémentaire dans le thème avec un horodatage pour un nom.

Alors:

  1. Activer les fichiers CSS de fusion dans Configuration> Avancé> Développeur
  2. Dans vos mises en page de thèmes, trouvez où vous ajoutez des fichiers CSS à l’en-tête (généralement page.xml) et ajoutez un fichier de feuille de style supplémentaire, appelez-le comme vous le souhaitez tant que le nom est unique, par exemple <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
  3. Dans votre dossier CSS skin, créez un nouveau fichier css portant ce nom. Pour le contenu du fichier, je viens de mettre un commentaire indiquant le contenu du fichier.

Maintenant, appuyez dessus et videz le cache de magento, le fichier CSS fusionné aura désormais un nom différent et vos caches seront détruits!

C'est fastidieux, car chaque fois que vous voulez décomposer le cache, vous devez changer ce nom de fichier, mais il ne nécessite rien d'autre que des fonctionnalités intégrées de Magento, il est donc pratique si vous vous retrouvez coincé et avez besoin d'une solution rapide!

benz001
la source
7

=> Au lieu d'utiliser ce code:

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

=> Essayez d'utiliser ce code:

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

Mais ce n'est pas très gentil ...

Erfan
la source
Idée intéressante :)
Nick
C'est une excellente idée pour un contrôle à court terme.
Jay El-Kaake
4

J'ai trouvé un module qui ajoutera une chaîne de requête à la fin de toutes les dispositions CSS et JS en XML. La chaîne de requête est configurable à partir de l'administrateur.

https://github.com/mklooss/Loewenstark_Head

L'idée de base est de remplacer l' _prepareStaticAndSkinElementsinclusion d'une chaîne de requête, comme indiqué dans le module ci-dessous.

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);
}
OIE
la source
3

Si je comprends la solution proposée dans votre question, vous pouvez le faire avec un mod léger dans un fichier core ( n'éditez pas réellement le fichier core ):

Mage / Page / Block / Html / Head.php

Ajoutez quelque chose comme? V = 1 à la ligne 198 pour que tous les fichiers css aient ceci ajouté:

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

J'ai construit un module gratuit pour cela:

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

Faites-moi savoir si cela ne fonctionne pas comme prévu, mais je l'ai construit de sorte que les fichiers js et css combinés aient un hachage différent si le contenu de l'un des fichiers concaténés a été modifié. Par défaut, Magento ne modifie le hachage du fichier combiné que si le nom de fichier de l'un des fichiers inclus a été modifié.

MISE À JOUR

J'ai également créé un module de minify gratuit et simple pour ceux qui y croient.

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

Anton Evers
la source
Ce module ne fonctionne pas ...
SIBHI S
2

Fabrizio Branca a créé un très bon module qui fait exactement ce qui vous intéresse. Il s'appelle AOE_JsCSSTStamp . Ce qu'il fait? Il ajoute un horodatage aux ressources CSS et JS. Lorsque vous videz le cache CSS / JS, les horodatages sont recréés.

Le navigateur verra un nom de fichier différent - c'est pourquoi il retéléchargera à nouveau les ressources et sera servi avec le plus récent au lieu d'être mis en cache dans le navigateur.

versedi
la source
1

Il suffit d’éditer la méthode getCssJsHtml dans Mage_Page_Block_Html_Head , d’ajouter une chaîne comme celle-ci pendant quelques jours après la modification css et c’est tout… ça fonctionne tout simplement.

// 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
        );
non
la source
1

Quelques années plus tard et ne trouvant aucune extension utile qui ne fusionne pas les fichiers et qui est simple, j'ai créé la mienne. L'idée principale est qu'après avoir vidé le cache, le timestamp sera mis à jour. En d'autres termes, lorsque vous en changez css/js, vider le cache et l'horodatage sera mis à jour.

Le code source est ici -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Fonctionne sur la version 1.9+ . Pas sûr des versions plus anciennes, cependant, mais probablement aussi devrait fonctionner.

utilisateur3722573
la source
-2

Faites une copie de votre thème avec un nouveau nom (themev2) - skin et application / design, etc. Choisissez ensuite le nouveau thème dans admin.

Le phil lee
la source
non, tu ne fais jamais ça. c'est vraiment une mauvaise façon de le faire
Marius
Pourquoi pas? Ainsi, si quelque chose ne va pas avec la nouvelle version, vous pouvez rapidement revenir à l'ancienne version. Si vous utilisez de longues durées de mise en cache du navigateur et / ou des CDN pour servir vos fichiers CSS (et les fichiers js qui doivent également être vidés / invalidés), c'est de loin le moyen le plus simple.
Le Phil Lee
Si quelque chose ne va pas, vous annulez, ce qui devrait inclure un autre nom de fichier (l'ancien). Par conséquent, il n'est pas nécessaire de modifier la configuration (en tant que paquet / thème)
Fabian Blechschmidt
Je ne sais pas comment vous effectuez les déploiements, mais de cette façon, je dois conserver l'ancien dossier de thèmes jusqu'à ce que je modifie la valeur de package / theme ou crée un script qui met à jour la valeur lors de l'installation. De même, si différents thèmes sont définis pour différentes périodes, ils pourraient être affectés. Dupliquer beaucoup de fichiers est de loin le moyen le plus simple. Par exemple, installer ceci: github.com/jreinke/magento-suffix-static-files est beaucoup plus facile. Tout ce que vous avez à faire est de modifier un numéro dans le backend après chaque déploiement.
Marius
Ne pense même pas comme ça!
Rinto George