Как заставить очистить CSS-кеш на стороне клиента?

62

Предположим, что мы изменили много функций для модуля (шаблоны, макеты, CSS) и собираемся перенести эти изменения на рабочий сайт, но многие клиенты кэшировали CSS в своих браузерах. Итак, вот вопрос. Как принудительно очистить CSS-кеш клиента и избежать переименования файла ( styles.css-> styles-v2.css). Есть один логический способ, но он не работает в Magento, потому что он проверяет файл, существующий (как этот метод работает для файлов JS), см. Ниже:

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

Есть идеи?

Ник
источник

Ответы:

37

Один из способов справиться с этим - включить слияние CSS. Затем вы можете просто очистить кеш, и новый объединенный файл будет создан с новым именем файла.

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

Насколько я знаю, хеш-код объединенного CSS-файла остается прежним, даже если основные файлы изменились - только если новые файлы добавляются в набор объединенных файлов, хеш-код изменяется. - @Alex

Другой способ справиться с этим вместо того, чтобы использовать layout.xml,

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

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

Рик Кейперс
источник
10
Насколько я знаю, хеш-код объединенного CSS-файла остается прежним, даже если основные файлы изменились - только если новые файлы добавляются в набор объединенных файлов, хеш-код изменяется.
Алекс
@ Алекс этого не знал, имеет смысл.
Рик Кейперс
4
Я не смотрел на это недавно, но в прошлом компиляция CSS / JS, кажется, фактически добавляет дополнительный «вес» вашему сайту, если вы загружаете разные CSS / JS на разных страницах. Он создал другую скомпилированную версию для уникального набора скриптов. Это означает, что файлы большего размера, которые компилируются, по сути загружаются несколько раз.
Питер О'Каллаган
@cags - Да, в основном, в этих условиях, минимизация и разрешение для загрузки всех файлов CSS / JS один раз - это единственное улучшение скорости, которое работает.
Fiasco Labs
Иногда это может изменить поведение CSS, по крайней мере, для меня в Magento 1.9.2.1
Goose
19

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

Alex
источник
10

На github Magento Cachebuster есть бесплатное расширение, которое делает именно это. Это ре

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

Кимберели Томас
источник
2
Этот модуль анализирует HTML для каждого ответа, чтобы добавить временные метки, которые потенциально могут снизить производительность. github.com/fbrnc/Aoe_JsCssTstamp делает то же самое более производительным способом, но для этого необходимо переписать модель пакета проекта, в то время как Cachebuster использует только наблюдателя.
Фабиан Шменглер
10

Для этого я использую свое собственное расширение Speedster Advanced. Но основной принцип заключается в том, что имя объединенных файлов CSS и JS включает метку времени последнего измененного файла - см Mage_Core_Model_Design_Package::getMergedCssUrl(). Каждый раз, когда вы редактируете любой из CSS-файлов, создается новое имя файла, в результате чего браузеры запрашивают новый файл вместо повторного использования кэшированной версии. Поскольку ваш головной блок может быть кэширован, необходимо обновить кеш Magento.

Кристоф в Фуман
источник
Fooman Speedster получает мое продление голоса большое продление
Bobadevv
8

Я также реализовал кэш-бастер для 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);

}

Получил вдохновение отсюда. Источник

Ахад Али
источник
1
Это не будет работать, файлы скинов всегда будут возвращаться к основанию / по умолчанию, потому что имя файла не будет найдено с добавленной строкой запроса.
BlueC 21.09.16
ваши комментарии «Имя файла не будет найдено с добавленной строкой запроса», это то, что мы хотим, и это то, что разрушит кеш и заставит сервер кеша получить новую копию.
Ахад Али
1
Нет, это совсем не так. Вы изменяете значения элементов в массиве $ skinItems, а затем передаете их обратно в родительский метод _prepareStaticAndSkinElements (). Этот родительский метод будет вызывать Mage :: getDesign () -> getSkinUrl () для каждого измененного элемента, который всегда будет возвращаться к base / default, потому что он не может найти файлы с добавленным? Fmt = xxx в файловой системе.
BlueC
Не уверен насчет его реализации, но источник вдохновения определенно работает точно так, как вы надеетесь, github.com/mklooss/Loewenstark_Head
Гусь
8

Существует простой, но громоздкий обходной путь, который не требует никаких плагинов и просто использует встроенные возможности Magento - полезно, если вам просто нужно быстро сделать это на существующем сайте, не желая рисковать установкой дополнительного кода.

Идея состоит в том, что вы можете использовать объединенную систему CSS для генерации имени файла очистки кэша.

Поскольку имя объединенного файла CSS является хэшем всех файлов, которые объединяются вместе, вы просто добавляете дополнительный пустой файл CSS в тему с отметкой даты для имени.

Так:

  1. Включите Слияние CSS-файлов в Конфигурация> Дополнительно> Разработчик
  2. В макетах вашей темы найдите, где вы добавляете CSS-файлы в заголовок (обычно page.xml) и добавляете дополнительный файл таблицы стилей, называйте его как хотите, если имя уникально, например <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
  3. В вашей папке CSS скина создайте новый CSS-файл с таким именем, для содержимого файла я просто оставил комментарий, в котором говорится, для чего этот файл

Теперь нажмите «live» и очистите кэш magento, объединенный css-файл теперь будет иметь другое имя, и ваши кеши будут уничтожены!

Это громоздко, так как каждый раз, когда вы хотите разрушить кеш, вам нужно изменить это имя файла, но для этого не требуется ничего, кроме встроенных возможностей Magento, так что это удобно, если вы застряли и нуждаетесь в быстром исправлении!

benz001
источник
7

=> Вместо использования этого кода:

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

Но это не очень приятно ...

Erfan
источник
Интересная идея :)
Ник
Это отличная идея для краткосрочной проверки.
Джей Эль-Кааке
4

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

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);
}
Гусь
источник
3

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

Маг / Страница / блок / HTML / Head.php

Добавьте что-то вроде? V = 1 в строку 198, чтобы все файлы CSS были добавлены:

$html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?v=1"%s />' . "\n",
kevando
источник
2

Я построил бесплатный модуль для этого:

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

Пожалуйста, дайте мне знать, если он не работает должным образом, но я построил его так, чтобы объединенные файлы js и css имели другой хэш, если содержимое одного из объединенных файлов изменилось. По умолчанию Magento изменяет хеш объединенного файла, только если имя файла одного из включенных файлов изменилось.

ОБНОВИТЬ

Я также сделал бесплатный и простой модуль минификации для тех, кто в это верит.

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

Антон Эверс
источник
Этот модуль не работает ...
SIBHI S
2

Есть действительно хороший модуль, созданный Фабрицио Бранкой, который делает именно то, что вас интересует. Он называется AOE_JsCSSTStamp . Что оно делает? Он добавляет метку времени к ресурсам CSS и JS. Когда вы очищаете кеш CSS / JS, метки времени воссоздаются.

Браузер увидит другое имя файла - поэтому он снова загрузит ресурсы и получит самое свежее, а не кэшированное в браузере.

versedi
источник
1

Просто отредактируйте метод 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
        );
Arno
источник
1

Несколько лет спустя и, не найдя ни одного полезного расширения, которое не объединит файлы и является простым, я создал свое собственное. Основная идея заключается в том, что после очистки кеша будет обновляться отметка времени. Другими словами - когда вы что-то измените css/js, просто очистите кеш, и отметка времени будет обновлена.

Исходный код здесь -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Работает на версии 1.9+ . Не уверен насчет старых версий, но, скорее всего, должно работать.

user3722573
источник
-2

Сделайте копию своей темы с новым именем (themev2) - и скин, и приложение / дизайн, и т. Д. Затем выберите новую тему в админке.

Фил Ли
источник
нет, ты никогда этого не делаешь это действительно плохой способ сделать это
Мариус
Почему нет? Таким образом, если что-то пойдет не так с новой версией, вы можете быстро вернуться к старой версии. Если вы используете длительное время кэширования в браузере и / или CDN для обслуживания вашего css (и js, которые также могут быть сброшены / аннулированы), это, безусловно, самый простой способ.
Фил Ли
Если что-то пойдет не так, вы откатываетесь назад, которое должно включать другое (старое) имя файла, поэтому изменение конфигурации (читается как пакет / тема) не требуется
Fabian Blechschmidt
Я не знаю, как вы выполняете развертывание, но в этом случае мне придется сохранять старую папку темы, пока я не изменю значение для package / theme или не создам скрипт, который обновляет значение при установке. Кроме того, если у меня установлены разные темы для разных периодов времени, они могут быть затронуты. Дублирование большого количества файлов - самый простой способ на сегодняшний день. Например, установить это: github.com/jreinke/magento-suffix-static-files намного проще. Все, что вам нужно сделать, это изменить номер в бэкэнде после каждого развертывания.
Мариус
Даже не думай так!
Ринто Джордж