如何在客户端强制刷新CSS缓存？

假设我们更改了模块的许多功能（模板，布局，CSS），并将这些更改移至生产现场，但是许多客户已将CSS缓存在其浏览器中。所以这是一个问题。如何强制刷新客户端的CSS缓存并避免文件重命名（styles.css-> styles-v2.css）。有一种逻辑方法，但是在Magento中不起作用，因为它会检查文件是否存在（通过此方法对JS文件的工作方式），请参见下文：

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

有任何想法吗？

解决此问题的一种方法是启用CSS合并。然后，您可以清除缓存，并使用新的文件名创建一个新的合并文件。

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

据我所知，即使基础文件发生了更改，合并CSS文件的哈希码也保持不变-仅在将新文件添加到合并文件集中时，哈希才会更改。-@亚历克斯

解决此问题的另一种方法是不使用layout.xml，

只是把它们放在你的 page/html/head.phtml

或创建一个包含<style>带有版本号标签的代码块，并将其放入XML头部，这样您就可以仅将其加载到特定页面上，并且仍然坚持使用XML布局。

您可以使用开源模块Aoe_JsCssTstamp，它将时间戳信息添加到合并的CSS文件中。尚不支持普通（未合并）CSS文件的时间戳，但这很容易实现。

github'Magento Cachebuster'上有一个免费扩展程序可以完全做到这一点。它是

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

该模块通过将文件的时间戳添加到文件名中来自动更改Magento为静态文件创建的URI，从而提供缓存无效化：

之前：http : //www.example.com/js/varien/js.js 之后：http : //www.example.com/js/varien/js.1324429472.js

我为此使用自己的扩展程序Speedster Advanced。但是基本原理是，合并的css和js文件的名称包括最后修改的文件的时间戳（请参见）Mage_Core_Model_Design_Package::getMergedCssUrl()。每当您编辑任何一个css文件时，都会创建一个新文件名，从而使浏览器请求新文件，而不是重新使用缓存的版本。由于可能会缓存您的磁头块，因此需要刷新Magento缓存。

我还为css文件实现了缓存清除器。我猜最好的方法是扩展Mage_Page_Block_Html_Head并覆盖下面的函数，并用所需的更改更新$ skinItems数组。

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

}

从这里得到了灵感。资源

有一个简单但麻烦的解决方法，不需要任何插件，而仅使用Magento内置功能-如果您只需要在现有站点上快速进行操作而又不想冒险安装更多代码，则非常有用。

这个想法是，您可以使用合并的CSS系统来生成缓存清除文件名。

由于合并的CSS文件名是所有合并在一起的文件的哈希，因此您只需在主题中添加一个额外的空白css文件，并在名称上添加日期戳即可。

所以：

1. 在配置>高级>开发人员中打开合并CSS文件
2. 在主题布局中，找到将CSS文件添加到头部（通常为page.xml）并添加一个额外的样式表文件的位置，只要名称唯一，即可将其命名为任意名称，例如 <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. 在您的皮肤CSS文件夹中，使用该名称创建一个新的CSS文件，对于文件内容，我只添加了一条注释，说明该文件的用途

现在推送并刷新magento缓存，合并的CSS文件现在将具有不同的名称，并且缓存将被破坏！

每次您要破坏缓存时都需要更改该文件名，这很麻烦，但是除了内置的Magento功能外，它不需要任何其他操作，因此如果发现卡住并需要快速修复，这非常方便！

=>而不使用此代码：

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

=>尝试使用以下代码：

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

但这不是很好...

我找到了一个模块，该模块会将查询字符串附加到xml布局中所有CSS和JS的末尾。查询字符串可从管理员配置。

https://github.com/mklooss/Loewenstark_Head

基本思想是重写_prepareStaticAndSkinElements以包括查询字符串，如模块所示，如下所示。

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

如果我理解您提出的问题的解决方案，则可以对核心文件进行一些修改（不要实际编辑核心文件）：

法师/页面/块/HTML/Head.php

在第198行中添加？v = 1之类的内容，以便所有css文件都附加以下内容：

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

我认为Fooman Speedster Advanced（http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html）可能是一种解决方案：

“安装后完全自动化，并且在更新Javascript / CSS文件时具有自动版本控制”

我为此构建了一个免费模块：

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

请让我知道它是否无法按预期工作，但是我已经构建了它，以便如果串联文件之一的内容已更改，则合并的js和css文件将具有不同的哈希值。默认情况下，Magento仅在其中一个包含文件的文件名已更改的情况下更改组合文件的哈希。

更新

我还为那些相信它的人免费提供了一个简单的缩小模块。

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

Fabrizio Branca创建了一个非常不错的模块，该模块完全执行您感兴趣的事情。它称为AOE_JsCSSTStamp。它能做什么？它为CSS和JS资源都添加了时间戳。刷新CSS / JS缓存时，将重新创建时间戳。

浏览器将看到不同的文件名-这就是为什么它将再次重新下载资源并以最新鲜的资源提供而不是缓存在浏览器中的原因。

只需在Mage_Page_Block_Html_Head中编辑方法getCssJsHtml，然后在CSS编辑后几天添加这样的字符串，就可以了。

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

几年后，由于找不到任何不会合并文件且非常简单的有用扩展，我创建了自己的扩展。主要思想是刷新缓存后，它将更新时间戳记。因此，换句话说-当您更改某些内容时css/js，只需刷新缓存和时间戳即可更新。

源代码在这里-> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

适用于1.9+版本。虽然不确定较旧的版本，但很可能应该也能正常工作。

使用新名称（themev2）制作主题的副本-外观和应用程序/设计等。然后在admin中选择新主题。