如何在客户端强制冲洗CSS缓存？

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

16-10-2019
|

题

假设我们更改了模块（模板，布局，CSS）的大量功能，并且我们将将这些更改移至生产站点，但是许多客户在浏览器中都有CACHSS的CACHSS。所以这是一个问题。如何强制冲洗客户端的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文件的哈希代码即使基础文件更改也保持不变 - 仅当将新文件添加到合并文件集中时，哈希更改。 - @Alex

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

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

或创建一个包含一个的块 <style> 带有版本号的标签，然后将其放入XML中，以便您只能在特定页面上加载它，并仍然坚持使用XML布局。

其他提示

您可以使用OpenSource模块 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文件时，都会创建新文件名，从而导致浏览器请求新文件，而不是重复使用缓存版本。由于您的头部可能被缓存，因此需要一个洋红色的高速缓存刷新。

我还为CSS文件实施了缓存Buster。我想最好的方法是扩展 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文件，并使用名称的日期印章。

所以：

在配置>高级>开发人员中打开合并CSS文件
在您的主题布局中，查找您在头部添加CSS文件的位置（通常是page.xml）并添加额外的样式表文件，只要名称是唯一的，<action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
在您的皮肤中，CSS文件夹创建一个名称的新CSS文件，对于文件内容，我只是在评论说明文件是什么

现在，将现场直播并冲洗洋红色高速缓存，合并后的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);
}

如果我理解您的问题中提出的解决方案，则可以用少量的mod来完成核心文件（实际上不要编辑核心文件):

法师/页/块/html/head.php

添加类似的内容，v = 1到line 198，因此所有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缓存时，会重新创建时间戳。

浏览器将看到不同的文件名 - 这就是为什么它将再次添加资源并与最新鲜的资源一起使用，而不是在浏览器中加速。

只需编辑方法 getcssjshtml 在 mage_page_block_html_head, ，在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中的新主题。

许可以下： CC-BY-SA 和归因

不隶属于 magento.stackexchange