Bagaimana cara memaksa cache CSS flush di sisi klien?


62

Misalkan kita telah mengubah banyak fungsi untuk modul (templat, layout, CSS) dan kami akan memindahkan perubahan ini ke situs produksi, tetapi banyak pelanggan yang telah menembolokkan CSS di browser mereka. Jadi ini pertanyaannya. Cara memaksa cache CSS klien flush dan menghindari penggantian nama file ( styles.css-> styles-v2.css). Ada satu cara logis tetapi tidak berfungsi di Magento, karena memeriksa file yang ada (dengan cara metode ini bekerja untuk file JS), lihat di bawah:

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

Ada ide?

Jawaban:


37

Salah satu cara menangani hal ini adalah memungkinkan penggabungan CSS. Kemudian Anda bisa menghapus cache dan file gabungan baru akan dibuat dengan nama file baru.

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

Sejauh yang saya tahu, kode hash dari file CSS yang digabungkan tetap sama bahkan jika file yang mendasarinya berubah - hanya jika file baru ditambahkan ke set file yang digabungkan, hash berubah. - @Alex

Cara lain untuk mengatasi hal ini adalah alih-alih menggunakan layout.xml,

hanya menempatkan mereka di page/html/head.phtml

Atau buat blok yang berisi <style>tag dengan nomor versi dan letakkan di XML di kepala Anda sehingga Anda dapat memuatnya hanya pada halaman tertentu dan tetap menggunakan tata letak XML.


10
Sejauh yang saya tahu, kode hash dari file CSS yang digabungkan tetap sama bahkan jika file yang mendasarinya berubah - hanya jika file baru ditambahkan ke set file yang digabungkan, hash berubah.
Alex

@Alex tidak tahu itu, masuk akal.
Rick Kuipers

4
Saya belum melihat ini baru-baru ini, tetapi di masa lalu kompilasi CSS / JS tampaknya benar-benar menambah 'bobot' tambahan ke situs Anda jika Anda memuat CSS / JS yang berbeda di halaman yang berbeda. Itu menciptakan versi kompilasi yang berbeda per set script unik. Ini berarti file yang lebih besar yang dikompilasi pada dasarnya sedang diunduh beberapa kali.
Peter O'Callaghan

@cags - Yap, pada dasarnya, dalam kondisi ini, mengecilkan dan mengizinkan semua file CSS / JS untuk mengunduh sekali adalah satu-satunya peningkatan kecepatan yang berfungsi.
Fiasco Labs

Ini terkadang dapat mengubah perilaku CSS, setidaknya bagi saya di Magento 1.9.2.1
Goose

19

Anda dapat menggunakan Modul OpenSource Aoe_JsCssTstamp yang menambahkan informasi timestamp ke file CSS yang digabungkan. Cap waktu untuk file CSS biasa (tidak digabungkan) belum didukung, tetapi ini akan mudah diimplementasikan.


10

Ada ekstensi gratis di github 'Magento Cachebuster' yang melakukan ini. Itu kembali

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

Modul ini menyediakan cachebusting dengan secara otomatis mengubah URI yang dibuat oleh Magento untuk> file statis dengan menambahkan timestamp file ke nama file:

Sebelum: http://www.example.com/js/varien/js.js Setelah: http://www.example.com/js/varien/js.1324429472.js


2
Modul ini mem-parsing HTML untuk setiap respons untuk menambahkan stempel waktu, yang berpotensi merusak kinerja. github.com/fbrnc/Aoe_JsCssTstamp melakukan hal yang sama dengan cara yang lebih berkinerja, tetapi perlu menulis ulang model paket desain untuk mencapainya, sementara Cachebuster hanya menggunakan pengamat.
Fabian Schmengler

10

Saya menggunakan ekstensi saya sendiri, Speedster Advanced untuk ini. Tetapi prinsip dasarnya adalah bahwa nama file css dan js yang digabung termasuk stempel waktu dari file yang terakhir dimodifikasi - lihat Mage_Core_Model_Design_Package::getMergedCssUrl(). Setiap kali Anda mengedit file css, nama file baru dibuat yang menyebabkan browser meminta file baru alih-alih menggunakan kembali versi yang di-cache. Karena blok kepala Anda mungkin di-cache, refresh cache Magento diperlukan.


Fooman Speedster mendapatkan perpanjangan suara saya yang luar biasa
Bobadevv

8

Saya juga telah mengimplementasikan cache buster untuk file css. Cara terbaik yang saya kira adalah untuk memperpanjang Mage_Page_Block_Html_Head dan naik fungsi di bawah ini dan memperbarui array $ skinItems dengan perubahan yang Anda inginkan.

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

}

Dapatkan inspirasi dari sini. Sumber


1
Ini tidak akan berfungsi, file skin akan selalu kembali ke markas / default karena nama file tidak akan ditemukan dengan string kueri yang ditambahkan.
BlueC

komentar Anda "Nama file tidak akan ditemukan dengan string kueri yang ditambahkan" itulah yang kami inginkan dan itulah yang akan memecahkan cache dan memaksa server cache untuk mengambil salinan baru.
Ahad Ali

1
Tidak, itu bukan cara kerjanya sama sekali. Anda mengubah nilai elemen dalam array $ skinItems dan kemudian meneruskannya kembali ke metode parent _prepareStaticAndSkinElements (). Metode induk ini akan memanggil Mage :: getDesign () -> getSkinUrl () pada setiap item yang dimodifikasi yang kemudian akan selalu mundur ke basis / default karena tidak dapat menemukan file dengan append? Fmt = xxx pada sistem file.
BlueC

Tidak yakin tentang implementasinya, tetapi inspirasi yang bersumber dari bawah pasti bekerja persis seperti yang Anda harapkan, github.com/mklooss/Loewenstark_Head
Goose

8

Ada solusi sederhana namun rumit yang tidak memerlukan plugin apa pun dan hanya menggunakan kemampuan Magento bawaan - berguna jika Anda hanya perlu dengan cepat melakukannya di situs yang sudah ada tanpa ingin mengambil risiko memasang kode lagi.

Idenya adalah bahwa Anda dapat menggunakan sistem CSS gabungan untuk menghasilkan nama file penghilang cache.

Karena nama file CSS yang digabungkan adalah hash dari semua file yang digabung bersama, Anda cukup menambahkan file css kosong tambahan ke dalam tema dengan cap tanggal untuk sebuah nama.

Begitu:

  1. Aktifkan Gabungkan file CSS di Konfigurasi> Tingkat Lanjut> Pengembang
  2. Dalam tata letak tema Anda temukan di mana Anda menambahkan file CSS ke kepala (biasanya page.xml) dan menambahkan file stylesheet tambahan, sebut saja apa pun yang Anda inginkan asalkan namanya unik misalnya <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
  3. Di folder CSS skin Anda buat file css baru dengan nama itu, untuk konten file saya hanya memberikan komentar yang mengatakan untuk apa file itu

Sekarang dorong itu hidup dan siram cache magento, file css yang digabungkan sekarang akan memiliki nama yang berbeda dan cache Anda akan rusak!

Ini rumit karena setiap kali Anda ingin memecahkan cache, Anda perlu mengubah nama file itu, tetapi tidak memerlukan apa pun selain kemampuan Magento bawaan sehingga berguna jika Anda menemukan diri Anda macet dan perlu perbaikan cepat!


7

=> Alih-alih menggunakan kode ini:

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

=> Coba gunakan kode ini:

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

Tapi itu tidak terlalu bagus ...


Ide yang menarik :)
Nick

Ini adalah ide bagus untuk pemeriksaan jangka pendek.
Jay El-Kaake

4

Saya menemukan modul yang akan menambahkan string kueri ke akhir semua CSS dan JS dalam tata letak xml. String kueri dapat dikonfigurasi dari admin.

https://github.com/mklooss/Loewenstark_Head

Ide dasarnya adalah menimpa _prepareStaticAndSkinElementsuntuk memasukkan string kueri, seperti yang dilakukan dalam modul, yang ditunjukkan di bawah.

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

Jika saya memahami solusi yang diajukan dalam pertanyaan Anda, Anda dapat melakukannya dengan sedikit mod ke file inti ( tidak benar-benar mengedit file inti ):

Mage / Page / Block / Html / Head.php

Tambahkan sesuatu seperti? V = 1 ke baris 198 sehingga semua file css ditambahkan ini:

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


2

Saya telah membuat modul gratis untuk ini:

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

Tolong beri tahu saya jika itu tidak berfungsi seperti yang diharapkan tetapi saya telah membangunnya sehingga file gabungan js dan css akan memiliki hash yang berbeda jika konten dari salah satu file gabungan telah berubah. Secara default Magento hanya mengubah hash dari file gabungan jika nama file dari salah satu file yang disertakan telah berubah.

MEMPERBARUI

Saya juga membuat modul minify gratis dan sederhana untuk Anda yang memercayainya.

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


Modul ini tidak berfungsi ...
SIBHI S

2

Ada modul yang sangat bagus yang dibuat oleh Fabrizio Branca yang melakukan hal yang Anda minati. Namanya AOE_JsCSSTStamp . Apa itu? Ini menambahkan cap waktu untuk sumber daya CSS dan JS. Ketika Anda menyiram cache CSS / JS maka cap waktu akan dibuat kembali.

Browser akan melihat nama file yang berbeda - itu sebabnya ia akan mengunduh ulang sumber daya lagi dan disajikan dengan yang paling baru alih-alih di-cache di browser.


1

Cukup edit metode getCssJsHtml di Mage_Page_Block_Html_Head , tambahkan string seperti ini selama beberapa hari setelah mengedit css dan itu saja ... itu hanya berfungsi

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

1

Beberapa tahun kemudian dan tidak menemukan ekstensi yang berguna yang tidak akan menggabungkan file dan sederhana, saya membuat sendiri. Gagasan utamanya adalah setelah membersihkan cache, itu akan memperbarui Timestamp. Jadi dengan kata lain - ketika Anda mengubah beberapa css/js, cukup flush cache dan Timestamp akan diperbarui.

Kode sumber ada di sini -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Bekerja pada versi 1.9+ . Namun, tidak yakin tentang versi yang lebih lama, tetapi kemungkinan besar akan berhasil juga.


-2

Buat salinan tema Anda dengan nama baru (themev2) - kulit dan aplikasi / desain, dll. Kemudian pilih tema baru di admin.


tidak, kamu tidak pernah melakukan itu. itu cara yang buruk untuk melakukannya
Marius

Kenapa tidak? Dengan cara ini jika terjadi kesalahan dengan versi baru, Anda dapat dengan cepat kembali ke versi lama. Jika Anda menggunakan waktu caching browser yang lama dan / atau CDN untuk melayani css Anda (dan js yang mungkin juga perlu dibilas / tidak valid), sejauh ini cara termudah.
The Phil Lee

Jika ada yang tidak beres, Anda memutar kembali, yang harus menyertakan nama file lain (lama), oleh karena itu mengubah konfigurasi (dibaca sebagai paket / tema) tidak diperlukan
Fabian Blechschmidt

Saya tidak tahu bagaimana Anda melakukan penyebaran, tetapi dengan cara ini saya harus menyimpan folder tema lama sampai saya mengubah nilai untuk paket / tema, atau membuat skrip yang memperbarui nilai saat menginstal. Juga, jika saya memiliki tema yang berbeda yang ditetapkan untuk periode waktu yang berbeda mereka mungkin akan terpengaruh. Duplikasi banyak file adalah cara termudah sejauh ini. Misalnya menginstal ini: github.com/jreinke/magento-suffix-static-files jauh lebih mudah. Yang harus Anda lakukan adalah mengubah nomor di backend setelah setiap penempatan.
Marius

Jangan berpikir seperti itu!
Rinto George
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.