วิธีการบังคับให้ล้างแคช CSS ในฝั่งไคลเอ็นต์?

สมมติว่าเราเปลี่ยนการทำงานจำนวนมากสำหรับโมดูล (เทมเพลตเลย์เอาต์ 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 ที่ผสานจะยังคงเหมือนเดิมแม้ว่าไฟล์ที่อยู่ภายใต้การเปลี่ยนแปลง - เฉพาะเมื่อไฟล์ใหม่ถูกเพิ่มเข้าไปในชุดของไฟล์ที่ผสานการแฮชจะเปลี่ยน - @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

โมดูลให้การ cachebusting โดยการเปลี่ยน URI ที่สร้างโดย Magento สำหรับ> ไฟล์คงที่โดยอัตโนมัติโดยการเพิ่มการประทับเวลาของไฟล์ไปยังชื่อไฟล์:

ก่อน: http://www.example.com/js/varien/js.js หลัง: http://www.example.com/js/varien/js.1324429472.js

ฉันใช้ส่วนขยาย Speedster ขั้นสูงของฉันเองสำหรับสิ่งนี้ แต่หลักการพื้นฐานคือว่าชื่อของ CSS รวมและไฟล์ js รวมถึงการประทับเวลาของไฟล์ที่มีการแก้ไขล่าสุด - Mage_Core_Model_Design_Package::getMergedCssUrl()ดู เมื่อใดก็ตามที่คุณแก้ไขไฟล์ css ใด ๆ ชื่อไฟล์ใหม่จะถูกสร้างขึ้นซึ่งทำให้เบราว์เซอร์ขอไฟล์ใหม่แทนที่จะนำเวอร์ชันแคชมาใช้ซ้ำ เนื่องจากบล็อกหัวของคุณอาจถูกแคชจำเป็นต้องรีเฟรชแคช Magento

ฉันยังใช้แคชบัสเตอร์สำหรับไฟล์ css ด้วย วิธีที่ดีที่สุดที่ฉันคิดว่าคือการขยายMage_Page_Block_Html_Headแล้วลองฟังก์ชั่นด้านล่างและอัปเดต$ skinItems array พร้อมการเปลี่ยนแปลงที่คุณต้องการ

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. เปิดไฟล์ผสาน CSS ในการกำหนดค่า> ขั้นสูง> ผู้พัฒนา
2. ในเลย์เอาต์ธีมของคุณค้นหาตำแหน่งที่คุณเพิ่มไฟล์ CSS ไว้ที่ส่วนหัว (โดยทั่วไปคือ page.xml) และเพิ่มไฟล์สไตล์ชีทพิเศษเรียกมันว่าอะไรก็ได้ที่คุณต้องการตราบใดที่ชื่อไม่ซ้ำกันเช่น <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. ในโฟลเดอร์ 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>

แต่มันไม่ดีมาก ...

ฉันพบโมดูลที่จะผนวกสตริงข้อความค้นหาต่อท้าย 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);
}

หากฉันเข้าใจวิธีแก้ปัญหาที่เสนอในคำถามของคุณคุณสามารถทำได้ด้วยการปรับเปลี่ยนเล็กน้อยเป็นไฟล์หลัก ( ไม่ได้แก้ไขไฟล์แกน ):

Mage / หน้า / บล็อก / 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 ที่รวมกันจะมีแฮชที่แตกต่างกันหากเนื้อหาของไฟล์ที่ต่อกันมีการเปลี่ยนแปลง โดยปกติแล้ววีโอไอพีจะเปลี่ยนการแฮชของไฟล์ที่รวมกันหากชื่อไฟล์ของไฟล์ที่รวมอยู่นั้นมีการเปลี่ยนแปลง

UPDATE

ฉันยังทำโมดูลลดขนาดที่ง่ายและฟรีสำหรับคนที่เชื่อในมัน

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เพียงแค่ล้างแคชและ Timestamp จะได้รับการอัปเดต

ซอร์สโค้ดอยู่ที่นี่ -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

ใช้งานได้กับเวอร์ชั่น1.9+ ไม่แน่ใจเกี่ยวกับเวอร์ชันที่เก่ากว่า แต่ส่วนใหญ่น่าจะใช้ได้เช่นกัน

ทำสำเนาชุดรูปแบบของคุณด้วยชื่อใหม่ (themev2) - ทั้งสกินและแอพ / การออกแบบ ฯลฯ จากนั้นเลือกชุดรูปแบบใหม่ในผู้ดูแลระบบ