Как принудительно очистить кэш CSS на стороне клиента?

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

  •  16-10-2019
  •  | 
  •  

Вопрос

Предположим, что мы изменили большую часть функциональности модуля (шаблоны, макеты, 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 остается прежним, даже если основные файлы изменяются - только если новые файлы добавляются в набор объединенных файлов, хэш изменяется. -- @Алекс

Другой способ справиться с этим - вместо использования mayout.xml,

Просто положите их в свой page/html/head.phtml

Или создать блок, который содержит <style> Теги с номером версии и поместите его в XML в своей голове, чтобы вы могли загрузить его только на определенные страницы и все же придерживаться использования макетов XML.

Другие советы

Вы можете использовать модуль OpenSource AOE_JSCSSTSTAMP который добавляет информацию о временной метке в объединенные файлы CSS. Временные метки для простых (неэнергетических) файлов CSS Еще не поддерживается Но это было бы легко реализовать.

На Github «Magento Cachebuster» существует бесплатное расширение, которое делает именно это. Это re

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

Модуль обеспечивает кешбуст, автоматически изменяя URI, созданный Magento для> статических файлов, добавив метку времени файла в имя файла:

До: 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. Включите Merge CSS -файлы в конфигурации> Advanced> Разработчик
  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>

Но это не очень мило ...

Я нашел модуль, который добавит строку запроса к концу всех CSS и JS в макетах XML. Строка запроса настраивается от администратора.

https://github.com/mkloooss/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);
}

Если я понимаю предложенное решение в вашем вопросе, вы можете сделать это с небольшим модом в основной файл (На самом деле не редактируйте основной файл):

Mage/page/block/html/head.php

Добавьте что -то вроде? V = 1 к строке 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) - как кожи, так и приложение/дизайн и т. Д. Затем выберите новую тему в администраторе.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с magento.stackexchange
scroll top