क्लाइंट साइड पर सीएसएस कैश फ्लश करने के लिए कैसे मजबूर करें?

Question

मान लीजिए कि हमने मॉड्यूल (टेम्प्लेट, लेआउट, सीएसएस) के लिए बहुत सारी कार्यक्षमता बदल दी है और हम इन परिवर्तनों को प्रोडक्शन साइट पर स्थानांतरित करने जा रहे हैं, लेकिन बहुत सारे ग्राहकों ने अपने ब्राउज़र में CSS को कैश किया है। तो यहाँ एक सवाल है। क्लाइंट के CSS कैश को कैसे फोर्स करें और फ़ाइल का नाम बदलने ( styles.css-> styles-v2.css) से बचें । एक तार्किक तरीका है, लेकिन यह Magento में काम नहीं करता है, क्योंकि यह मौजूदा फ़ाइल की जाँच करता है (वैसे यह विधि JS फ़ाइलों के लिए काम करती है), नीचे देखें:

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

कोई विचार?

Answer 1

इससे निपटने का एक तरीका सीएसएस के विलय को सक्षम करना है। तब आप केवल कैश को साफ कर सकते हैं और एक नई फ़ाइल के साथ एक नई मर्ज की गई फ़ाइल बनाई जाएगी।

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

जहां तक ​​मुझे पता है, मर्ज किए गए CSS फ़ाइल का हैश कोड वही रहता है, भले ही अंतर्निहित फाइलें बदल गई हों - केवल तभी जब विलय की गई फ़ाइलों के सेट में नई फाइलें जोड़ी जाती हैं, तो हैश बदल जाता है। - @ नेट

इससे निपटने का एक और तरीका यह है कि आप इसका उपयोग लेआउट के बजाय करें। xml,

बस उन्हें अपने में रखो page/html/head.phtml

या एक ऐसा ब्लॉक बनाएं जिसमें <style>वर्जन नंबर वाला टैग हो और इसे अपने सिर में एक्सएमएल में लगाएं ताकि आप इसे केवल विशिष्ट पेजों पर लोड कर सकें और फिर भी एक्सएमएल लेआउट का उपयोग करने के लिए चिपके रहें।

Comments

जहां तक ​​मुझे पता है, मर्ज किए गए CSS फ़ाइल का हैश कोड वही रहता है, भले ही अंतर्निहित फाइलें बदल गई हों - केवल तभी जब विलय की गई फ़ाइलों के सेट में नई फाइलें जोड़ी जाती हैं, तो हैश बदल जाता है।

— एलेक्स

@ एलेक्स को पता नहीं था कि, समझ में आता है।

— रिक कुइपर्स

मैंने हाल ही में इस पर ध्यान नहीं दिया है, लेकिन अतीत में सीएसएस / जेएस के संकलन से लगता है कि अगर आप अलग-अलग सीएसएस / जेएस को अलग-अलग पृष्ठों पर लोड करते हैं तो वास्तव में आपकी साइट पर अतिरिक्त 'वजन' जोड़ सकते हैं। इसने स्क्रिप्ट के अनूठे सेट के लिए एक अलग संकलित संस्करण बनाया। इसका मतलब यह है कि बड़ी फ़ाइलों को संकलित किया जाता है जो अनिवार्य रूप से कई बार डाउनलोड की जाती हैं।

— पीटर ओ'कालाघन

@cags - हाँ, मूल रूप से, इन शर्तों के तहत, सभी सीएसएस / जेएस फ़ाइलों को एक बार डाउनलोड करने की अनुमति देना और काम करने की एकमात्र गति बढ़ाने वाला है।

— फ़ास्को लैब्स

यह कभी-कभी CSS व्यवहार को बदल सकता है, कम से कम मेरे लिए Magento 1.9.2.1 में

— Goose

Answer 2

आप OpenSource मॉड्यूल Aoe_JsCssTstamp का उपयोग कर सकते हैं जो मर्ज किए गए CSS फ़ाइलों में टाइमस्टैम्प जानकारी जोड़ता है। सादे (बिना विलय के) टाइमस्टैम्प के लिए सीएसएस फ़ाइलें अभी तक समर्थित नहीं हैं, लेकिन इसे लागू करना आसान होगा।

Answer 3

Github 'Magento Cachebuster' पर एक मुफ्त एक्सटेंशन है जो ठीक यही करता है। यह फिर से

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

मॉड्यूल स्वचालित रूप से फ़ाइल नाम में फ़ाइल का टाइमस्टैम्प जोड़कर Magento के द्वारा बनाए गए URI को बदलकर कैशबस्टिंग प्रदान करता है:

पहले: http://www.example.com/js/varien/js.js बाद: http://www.example.com/js/varien/js.1324429472.js

Comments

यह मॉड्यूल टाइमस्टैम्प को जोड़ने के लिए प्रत्येक प्रतिक्रिया के लिए HTML को पार्स करता है, जो संभावित रूप से प्रदर्शन को नुकसान पहुंचा सकता है। github.com/fbrnc/Aoe_JsCssTstamp समान प्रदर्शन करने वाले तरीके से करता है, लेकिन इसे पूरा करने के लिए डिज़ाइन पैकेज मॉडल को फिर से लिखना होगा, जबकि कैशबस्टर केवल एक पर्यवेक्षक का उपयोग करता है।

— फैबियन शेंगलर

Answer 4

मैं इसके लिए अपने खुद के एक्सटेंशन स्पीडस्टर एडवांस का उपयोग करता हूं। लेकिन मूल सिद्धांत यह है कि विलय की गई सीएसएस और जेएस फाइलों के नाम में अंतिम संशोधित फाइल का टाइमस्टैम्प शामिल है - देखें Mage_Core_Model_Design_Package::getMergedCssUrl()। जब भी आप किसी भी सीएसएस फ़ाइलों को संपादित करते हैं तो एक नया फ़ाइल नाम बनाया जाता है, जिसके कारण ब्राउज़रों को कैश्ड संस्करण का पुन: उपयोग करने के बजाय नई फ़ाइल का अनुरोध करना पड़ता है। चूंकि आपके हेड ब्लॉक को कैश किया जा सकता है, इसलिए मैगेंटो कैश रीफ्रेश की जरूरत होती है।

Comments

फोमन स्पीडस्टर को मेरे अप वोट को शानदार विस्तार मिला

— बोबदेव 19

Answer 5

मैंने 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);

}

यहां से प्रेरणा मिली। स्रोत

Comments

यह काम नहीं करेगा, त्वचा की फाइलें हमेशा बेस / डिफॉल्ट में वापस आ जाएंगी क्योंकि फ़ाइल नाम को एप्लाइड क्वेरी स्ट्रिंग के साथ नहीं मिलेगा।

— ब्लूसी

आपकी टिप्पणी "फ़ाइल नाम को क्वेरी किए गए क्वेरी स्ट्रिंग के साथ नहीं मिलेगा" जो कि हम चाहते हैं और वही करें जो कैश का भंडाफोड़ करेंगे और कैश सर्वर को एक नई प्रतिलिपि प्राप्त करने के लिए मजबूर करेंगे।

— अहद अली

नहीं, ऐसा नहीं है कि यह कैसे काम करता है। आप $ skinItems एरे में तत्वों के मूल्यों को बदल रहे हैं और फिर उन पैरेन्ट्स में वापस जा रहे हैं _prepareStaticAndSkinElements () विधि। यह मूल विधि Mage को बुलाएगी :: getDesign () -> getSkinUrl () प्रत्येक संशोधित आइटम पर जो हमेशा आधार / डिफ़ॉल्ट पर वापस आ जाएगा क्योंकि यह फाइलों के साथ फाइलों का पता नहीं लगा सकता है? फाइल सिस्टम पर fmt = xxx।

— ब्लू सीप

उनके कार्यान्वयन के बारे में निश्चित नहीं है, लेकिन नीचे की ओर प्रेरित प्रेरणा निश्चित रूप से ठीक वैसे ही काम करती है जैसे आप आशा करते हैं, github.com/mklooss/Loewenstark_Head

— हंस

Answer 6

एक सरल लेकिन बोझिल वर्कअराउंड है, जिसमें किसी भी प्लगइन्स की आवश्यकता नहीं होती है और बस मैगेंटो क्षमताओं में निर्मित उपयोग करता है - उपयोगी अगर आपको बस किसी मौजूदा साइट पर किसी भी अधिक कोड को स्थापित करने के जोखिम के बिना करना है।

विचार यह है कि आप कैश बस्टिंग फ़ाइल नाम उत्पन्न करने के लिए मर्ज किए गए CSS सिस्टम का उपयोग कर सकते हैं।

चूंकि मर्ज किए गए CSS फ़ाइल नाम उन सभी फ़ाइलों का एक हैश है जो आपस में मर्ज किए गए हैं इसलिए आप नाम के लिए दिनांक स्टैम्प के साथ थीम में एक अतिरिक्त रिक्त css फ़ाइल जोड़ सकते हैं।

इसलिए:

1. कॉन्फ़िगरेशन> उन्नत> डेवलपर में मर्ज सीएसएस फ़ाइलों को चालू करें
2. अपने थीम लेआउट में, जहां आप सीएसएस फ़ाइलों को सिर में जोड़ते हैं (आमतौर पर पेज.एक्सएमएल) और एक अतिरिक्त स्टाइलशीट फ़ाइल जोड़ते हैं, इसे तब तक कॉल करें जब तक आप अद्वितीय नाम चाहते हैं। <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. आपकी त्वचा में सीएसएस फ़ोल्डर उस नाम के साथ एक नई सीएसएस फ़ाइल बनाता है, फ़ाइल सामग्री के लिए मैंने सिर्फ एक टिप्पणी यह ​​कहते हुए रखी कि फ़ाइल किसके लिए है

अब उस लाइव को पुश करें और मैग्नेटो कैश को फ्लश करें, मर्ज किए गए css फ़ाइल का अब एक अलग नाम होगा और आपके कैश का भंडाफोड़ होगा!

हर बार जब आप उस फ़ाइल का नाम बदलना चाहते हैं, तो उस कैश को बस्ट करना चाहते हैं, जो आपके लिए बोझिल है, लेकिन इसे Magento क्षमताओं में निर्मित के अलावा और कुछ भी नहीं चाहिए, तो यह आसान है अगर आप खुद को फंसे हुए पाते हैं और एक त्वरित फिक्स की आवश्यकता होती है!

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

लेकिन यह बहुत अच्छा नहीं है ...

Comments

दिलचस्प विचार :)

— निक

यह एक अल्पकालिक जाँच के लिए एक उत्कृष्ट विचार है।

— जे एल-काक

Answer 8

मुझे एक मॉड्यूल मिला है जो सभी सीएसएस और जेएस के अंत में एक एक्सएल लेआउट में क्वेरी स्ट्रिंग को जोड़ देगा। क्वेरी स्ट्रिंग व्यवस्थापक से कॉन्फ़िगर करने योग्य है।

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

Answer 9

अगर मुझे आपके प्रश्न का प्रस्तावित समाधान समझ में आता है, तो आप ऐसा कर सकते हैं कि मामूली मोड से लेकर कोर फाइल तक ( वास्तव में कोर फाइल को एडिट न करें ):

दाना / पृष्ठ / ब्लॉक / html / head.php

कुछ जोड़ें जैसे? V = 1 से लेकर 198 तक सभी css फ़ाइलों में यह जोड़ा गया है:

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

Answer 10

मुझे लगता है कि फोमन स्पीडस्टर एडवांस्ड ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) एक समाधान हो सकता है:

"जावास्क्रिप्ट / सीएसएस फ़ाइलों को अद्यतन किए जाने पर स्वचालित संस्करण के साथ एक बार पूरी तरह से स्वचालित स्थापित"

Answer 11

मैंने इसके लिए एक मुफ्त मॉड्यूल बनाया है:

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

कृपया मुझे बताएं कि क्या यह अपेक्षित के रूप में काम नहीं करता है, लेकिन मैंने इसे बनाया है ताकि संयुक्त जेएस और सीएसएस फ़ाइलों में एक अलग हैश होगा यदि किसी समवर्ती फ़ाइलों में से एक की सामग्री बदल गई है। डिफ़ॉल्ट रूप से Magento केवल संयुक्त फ़ाइल के हैश को बदलता है यदि शामिल फ़ाइलों में से एक का फ़ाइल नाम बदल गया है।

अपडेट करें

मैंने आप में से जो भी इस पर विश्वास करते हैं, उनके लिए एक स्वतंत्र और सरल मिनिफाइ मॉड्यूल बनाया।

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

Comments

यह मॉड्यूल काम नहीं कर रहा है ...

— SIBHI S

Answer 12

वहाँ एक बहुत अच्छा मॉड्यूल Fabrizio Branca द्वारा बनाया गया है जो ठीक उसी चीज़ को करता है जिसमें आप रुचि रखते हैं। इसे AOE_JsCSSTStamp कहा जाता है । यह क्या करता है? यह सीएसएस और जेएस संसाधनों दोनों के लिए एक समय टिकट जोड़ता है। जब आप CSS / JS cache को फ्लश करते हैं तो टाइमस्टैम्प को फिर से बनाया जाता है।

ब्राउज़र को अलग फ़ाइलनाम दिखाई देगा - यही कारण है कि यह संसाधनों को फिर से डाउनलोड करेगा और ब्राउज़र में कैश्ड के बजाय सबसे ताज़ा के साथ परोसा जाएगा।

Answer 13

बस Mage_Page_Block_Html_Head में getCssJsHtml का संपादन करें, 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
        );

Answer 14

कुछ साल बाद और कोई उपयोगी एक्सटेंशन नहीं मिल रहा है जो फ़ाइलों को मर्ज नहीं करेगा और सरल है, मैंने अपना खुद का बनाया। मुख्य विचार यह है कि कैश फ्लश करने के बाद, यह टाइमस्टैम्प को अपडेट करेगा। तो दूसरे शब्दों में - जब आप कुछ बदलते हैं css/js, तो बस फ्लश कैश और टाइमस्टैम्प को अपडेट किया जाएगा।

स्रोत कोड यहाँ है -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

1.9+ वर्जन पर काम करता है । पुराने संस्करणों के बारे में निश्चित नहीं है, हालांकि, लेकिन सबसे अधिक संभावना है कि यह भी काम करे।

Answer 15

एक नए नाम (themev2) के साथ अपने विषय की प्रतिलिपि बनाएँ - दोनों त्वचा और अनुप्रयोग / डिजाइन, आदि। तब व्यवस्थापक में नई थीम चुनें।

Comments

नहीं, तुम ऐसा कभी नहीं करते। कि वास्तव में यह करने का एक बुरा तरीका है

— मेरियस

क्यों नहीं? इस तरह अगर नए संस्करण के साथ कुछ गलत होता है, तो आप जल्दी से पुराने संस्करण पर वापस जा सकते हैं। यदि आप अपने css (और js को फ्लश / अमान्य करने की आवश्यकता हो सकती है) की सेवा के लिए लंबे ब्राउज़र-कैशिंग समय और / या CDN का उपयोग कर रहे हैं, तो यह अब तक का सबसे आसान तरीका है।

— द फिल ली

यदि कुछ गलत हो जाता है, तो आप वापस रोल करते हैं, जिसमें एक और (पुराना) फ़ाइल नाम शामिल होना चाहिए, इसलिए कॉन्फ़िगरेशन बदलना (पैकेज / थीम के रूप में पढ़ें) की आवश्यकता नहीं है

— Fabian Blechschmidt

मुझे नहीं पता कि आप कैसे परिनियोजन करते हैं, लेकिन इस तरह से मुझे पुराने थीम फ़ोल्डर को तब तक रखना होगा जब तक मैं पैकेज / थीम के लिए मूल्य नहीं बदलता, या एक स्क्रिप्ट तैयार करता हूं जो इंस्टॉल पर मूल्य को अपडेट करता है। इसके अलावा, यदि मेरे पास अलग-अलग समय के लिए अलग-अलग विषय निर्धारित हैं तो वे प्रभावित हो सकते हैं। बहुत सारी फ़ाइलों को डुप्लिकेट करना, अब तक का सबसे आसान तरीका है। उदाहरण के लिए इसे स्थापित करना: github.com/jreinke/magento-suffix-static-files बहुत आसान है। आपको बस इतना करना है कि प्रत्येक तैनाती के बाद बैकएंड में एक नंबर बदल दें।

— मेरियस

ऐसा भी मत सोचो!

— रिंटो जॉर्ज