Jak wymusić opróżnianie pamięci podręcznej CSS po stronie klienta?

61

Załóżmy, że zmieniliśmy wiele funkcji modułu (szablony, układy, CSS) i zamierzamy przenieść te zmiany na stronę produkcyjną, ale wielu klientów ma buforowane CSS w swoich przeglądarkach. Oto pytanie. Jak wymusić opróżnianie pamięci podręcznej CSS klienta i unikanie zmiany nazwy pliku ( styles.css-> styles-v2.css). Jest jeden logiczny sposób, ale nie działa on w Magento, ponieważ sprawdza istniejący plik (tak jak ta metoda działa dla plików JS), patrz poniżej:

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

Jakieś pomysły?

Nacięcie
źródło

Odpowiedzi:

37

Jednym ze sposobów radzenia sobie z tym jest umożliwienie łączenia CSS. Następnie możesz po prostu wyczyścić pamięć podręczną, a nowy scalony plik zostanie utworzony z nową nazwą pliku.

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

O ile mi wiadomo, kod skrótu scalonego pliku CSS pozostaje taki sam, nawet jeśli zmienione zostaną pliki podstawowe - tylko jeśli nowe pliki zostaną dodane do zestawu scalonych plików, skrót zostanie zmieniony. - @Alex

Innym sposobem radzenia sobie z tym jest zamiast użycia layout.xml,

po prostu włóż je do swojego page/html/head.phtml

Lub stwórz blok zawierający <style>znacznik z numerem wersji i umieść go w pliku XML w swojej głowie, aby można go było ładować tylko na określonych stronach i nadal trzymać się układów XML.

Rick Kuipers
źródło
10
O ile mi wiadomo, kod skrótu scalonego pliku CSS pozostaje taki sam, nawet jeśli zmienione zostaną pliki podstawowe - tylko jeśli nowe pliki zostaną dodane do zestawu scalonych plików, skrót zostanie zmieniony.
Alex
@Alex nie wiedział o tym, ma sens.
Rick Kuipers
4
Ostatnio na to nie patrzyłem, ale w przeszłości kompilacja CSS / JS wydaje się w rzeczywistości zwiększać wagę witryny, jeśli ładujesz różne CSS / JS na różnych stronach. Utworzono inną skompilowaną wersję dla każdego unikalnego zestawu skryptów. Oznacza to, że większe pliki, które się kompilują, są zasadniczo pobierane wiele razy.
Peter O'Callaghan
@cags - Tak, w zasadzie w tych warunkach, minimalizowanie i zezwalanie na pobranie wszystkich plików CSS / JS jest jedynym działającym ulepszeniem szybkości.
Fiasco Labs
Może to czasem zmienić zachowanie CSS, przynajmniej dla mnie w Magento 1.9.2.1
Goose
19

Możesz użyć modułu OpenSource Aoe_JsCssTstamp, który dodaje informacje o znacznikach czasu do scalonych plików CSS. Znaczniki czasu dla zwykłych (niepołączonych) plików CSS niejeszcze obsługiwane, ale byłoby to łatwe do wdrożenia.

Alex
źródło
10

Na github „Magento Cachebuster” znajduje się bezpłatne rozszerzenie, które właśnie to robi. To dotyczy

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

Moduł zapewnia buforowanie pamięci podręcznej poprzez automatyczną zmianę identyfikatora URI utworzonego przez Magento dla> plików statycznych poprzez dodanie znacznika czasu pliku do nazwy pliku:

Przed: http://www.example.com/js/varien/js.js Po: http://www.example.com/js/varien/js.1324429472.js

Kimberely Thomas
źródło
2
Ten moduł analizuje kod HTML dla każdej odpowiedzi, aby dodać znaczniki czasu, które mogą potencjalnie zaszkodzić wydajności. github.com/fbrnc/Aoe_JsCssTstamp robi to samo w bardziej wydajny sposób, ale aby go osiągnąć, musi przepisać model pakietu projektowego, podczas gdy Cachebuster używa tylko obserwatora.
Fabian Schmengler
10

Używam do tego własnego rozszerzenia Speedster Advanced. Ale podstawową zasadą jest to, że nazwa scalonych plików css i js zawiera znacznik czasu ostatnio zmodyfikowanego pliku - patrz Mage_Core_Model_Design_Package::getMergedCssUrl(). Za każdym razem, gdy edytujesz dowolny plik css, tworzona jest nowa nazwa pliku, co powoduje, że przeglądarki żądają nowego pliku zamiast ponownego użycia wersji z pamięci podręcznej. Ponieważ blok głowy może być buforowany, konieczne jest odświeżenie pamięci podręcznej Magento.

Kristof w Fooman
źródło
Fooman Speedster dostaje moje przedłużenie głosowania świetne przedłużenie
Bobadevv,
8

Zaimplementowałem również narzędzie do usuwania pamięci podręcznej dla plików css. Myślę, że najlepszym sposobem jest rozszerzenie Mage_Page_Block_Html_Head i najechanie na poniższą funkcję i zaktualizowanie tablicy $ skinItems o pożądane zmiany.

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

}

Mam inspirację stąd. Źródło

Ahad Ali
źródło
1
To nie zadziała, pliki skórki zawsze wracają do wartości bazowej / domyślnej, ponieważ nazwa pliku nie zostanie znaleziona z dołączonym ciągiem zapytania.
BlueC,
twoje komentarze „Nie można znaleźć nazwy pliku z dołączonym ciągiem zapytania”, to jest to, czego chcemy i to, co zniszczy pamięć podręczną i zmusi serwer pamięci podręcznej do pobrania nowej kopii.
Ahad Ali,
1
Nie, wcale tak nie działa. Zmieniasz wartości elementów w tablicy $ skinItems, a następnie przekazujesz je z powrotem do nadrzędnej metody _prepareStaticAndSkinElements (). Ta metoda nadrzędna wywoła Mage :: getDesign () -> getSkinUrl () na każdym zmodyfikowanym elemencie, który następnie zawsze powróci do stanu bazowego / domyślnego, ponieważ nie może zlokalizować plików z dołączonym? Fmt = xxx w systemie plików.
BlueC,
Nie jestem pewien co do jego realizacji, ale inspiracja pochodząca z dołu zdecydowanie działa dokładnie tak, jak można oczekiwać, github.com/mklooss/Loewenstark_Head
Goose
8

Istnieje proste, ale uciążliwe obejście, które nie wymaga żadnych wtyczek i po prostu korzysta z wbudowanych funkcji Magento - przydatne, jeśli po prostu musisz to zrobić szybko na istniejącej stronie bez ryzyka instalowania dodatkowego kodu.

Chodzi o to, że możesz użyć scalonego systemu CSS do wygenerowania nazwy pliku pomijania pamięci podręcznej.

Ponieważ nazwa scalonego pliku CSS jest skrótem wszystkich plików, które są scalane, po prostu dodajesz do motywu dodatkowy pusty plik css z datownikiem dla nazwy.

Więc:

  1. Włącz scalanie plików CSS w Konfiguracja> Zaawansowane> Deweloper
  2. W układach motywów znajdź, gdzie dodajesz pliki CSS do nagłówka (zazwyczaj page.xml) i dodajesz dodatkowy plik arkusza stylów, nazywaj go jak chcesz, o ile nazwa jest unikalna, np. <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
  3. W folderze skórki CSS utwórz nowy plik css o tej nazwie, dla zawartości pliku po prostu wstawiłem komentarz z informacją o tym, do czego służy plik

Teraz pchnij to na żywo i opróżnij pamięć podręczną magento, scalony plik css będzie teraz miał inną nazwę, a twoje pamięci podręczne zostaną zniszczone!

Jest to kłopotliwe, ponieważ za każdym razem, gdy chcesz zepsuć pamięć podręczną, musisz zmienić nazwę tego pliku, ale nie wymaga to nic innego niż wbudowane funkcje Magento, więc jest to przydatne, jeśli utkniesz i potrzebujesz szybkiej poprawki!

benz001
źródło
7

=> Zamiast używać tego kodu:

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

=> Spróbuj użyć tego kodu:

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

Ale to nie jest bardzo miłe ...

Erfan
źródło
Ciekawy pomysł :)
Nick
To doskonały pomysł na krótkoterminowe sprawdzenie.
Jay El-Kaake
4

Znalazłem moduł, który doda ciąg zapytania na końcu wszystkich CSS i JS w układach xml. Ciąg zapytania można skonfigurować od administratora.

https://github.com/mklooss/Loewenstark_Head

Podstawowym pomysłem jest zastąpienie, _prepareStaticAndSkinElementsaby uwzględnić ciąg zapytania, jak to zrobiono w module pokazanym poniżej.

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);
}
Gęś
źródło
3

Jeśli rozumiem proponowane rozwiązanie w twoim pytaniu, możesz to zrobić za pomocą niewielkiej modyfikacji pliku podstawowego ( tak naprawdę nie edytuj pliku podstawowego ):

Mage / Page / Block / Html / Head.php

Dodaj coś w rodzaju? V = 1 do wiersza 198, aby wszystkie pliki css miały dołączone:

$html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?v=1"%s />' . "\n",
Kevando
źródło
2

W tym celu zbudowałem bezpłatny moduł:

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

Daj mi znać, jeśli nie działa zgodnie z oczekiwaniami, ale zbudowałem go tak, aby połączone pliki js i css miały inny skrót, jeśli zawartość jednego z połączonych plików uległa zmianie. Domyślnie Magento zmienia skrót mieszanego pliku tylko wtedy, gdy zmieniła się nazwa jednego z dołączonych plików.

AKTUALIZACJA

Stworzyłem również bezpłatny i prosty moduł minify dla tych z was, którzy w to wierzą.

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

Anton Evers
źródło
Ten moduł nie działa ...
SIBHI S
2

Jest naprawdę fajny moduł stworzony przez Fabrizio Branca, który robi dokładnie to, co Cię interesuje. Nazywa się AOE_JsCSSTStamp . Co to robi? Dodaje znacznik czasu do zasobów CSS i JS. Po opróżnieniu pamięci podręcznej CSS / JS znaczniki czasu są ponownie tworzone.

Przeglądarka zobaczy inną nazwę pliku - dlatego ponownie pobierze zasoby i zostanie udostępniona w najnowszej wersji zamiast buforowanej w przeglądarce.

versedi
źródło
1

Po prostu edytuj metodę getCssJsHtml w Mage_Page_Block_Html_Head , dodaj taki ciąg przez kilka dni po edycji css i to wszystko ... to po prostu działa

// 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
źródło
1

Kilka lat później i nie znajdując żadnego przydatnego rozszerzenia, które nie scaliłoby plików i jest proste, stworzyłem własne. Główną ideą jest to, że po opróżnieniu pamięci podręcznej zaktualizuje znacznik czasu. Innymi słowy - kiedy zmienisz niektóre css/js, po prostu opróżnij pamięć podręczną, a znacznik czasu zostanie zaktualizowany.

Kod źródłowy jest tutaj -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Działa na wersji 1.9+ . Nie jestem pewien co do starszych wersji, ale najprawdopodobniej również powinien działać.

użytkownik3722573
źródło
-2

Utwórz kopię motywu pod nową nazwą (themev2) - zarówno skórką, jak i aplikacją / projektem itp. Następnie wybierz nowy motyw w panelu administratora.

Phil Lee
źródło
nie, nigdy tego nie robisz. to naprawdę zły sposób na zrobienie tego
Marius
Dlaczego nie? W ten sposób, jeśli coś pójdzie nie tak z nową wersją, możesz szybko wrócić do starej wersji. Jeśli używasz długiego czasu buforowania przeglądarki i / lub CDN do obsługi twojego css (i js, które również mogą wymagać opróżnienia / unieważnienia), jest to zdecydowanie najłatwiejszy sposób.
Phil Lee
Jeśli coś pójdzie nie tak, wycofujesz plik, który powinien zawierać inną (starą) nazwę pliku, dlatego zmiana konfiguracji (czytana jako pakiet / motyw) nie jest potrzebna
Fabian Blechschmidt
Nie wiem, jak wykonujesz wdrożenia, ale w ten sposób muszę zachować stary folder motywów, dopóki nie zmienię wartości pakietu / motywu lub nie utworzę skryptu, który aktualizuje wartość podczas instalacji. Ponadto, jeśli mam ustawione różne motywy dla różnych okresów, mogą one mieć wpływ. Zduplikowanie wielu plików jest jak dotąd najłatwiejszym sposobem. Na przykład instalacja tego: github.com/jreinke/magento-suffix-static-files jest znacznie łatwiejsza. Wszystko, co musisz zrobić, to zmienić numer w backend po każdym wdrożeniu.
Marius
Nawet tak nie myśl!
Rinto George,