कैश की गई CSS / JS फ़ाइलों को पुनः लोड करने के लिए ब्राउज़र को कैसे बाध्य करें?

993

मैंने देखा है कि कुछ ब्राउज़र (विशेष रूप से, फ़ायरफ़ॉक्स और ओपेरा) .css और .js फ़ाइलों की कैश्ड प्रतियों का उपयोग करने में बहुत जोशीले होते हैं , यहाँ तक कि ब्राउज़र सत्रों के बीच भी। जब आप इनमें से किसी एक फ़ाइल को अपडेट करते हैं तो यह एक समस्या होती है, लेकिन उपयोगकर्ता का ब्राउज़र कैश्ड कॉपी का उपयोग करता रहता है।

सवाल यह है: उपयोगकर्ता के ब्राउज़र को फ़ाइल को फिर से लोड करने के लिए मजबूर करने का सबसे सुंदर तरीका क्या है जब यह बदल गया है?

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

अपडेट करें :

थोड़ी देर यहां चर्चा की अनुमति देने के बाद, मैंने जॉन मिलिकिन और दा 5आईडी के सुझाव को उपयोगी पाया है। यह पता चलता है कि इसके लिए एक शब्द है: ऑटो-वर्जनिंग ।

मैंने नीचे एक नया उत्तर पोस्ट किया है जो मेरे मूल समाधान और जॉन के सुझाव का एक संयोजन है।

एक और विचार जो SCdF द्वारा सुझाया गया था, वह फ़ाइल में फर्जी क्वेरी स्ट्रिंग को जोड़ना होगा। (कुछ अजगर कोड स्वचालित रूप से टाइमस्टैम्प का उपयोग करने के लिए एक फर्जी क्वेरी स्ट्रिंग पाई द्वारा प्रस्तुत किया गया था ।)। हालाँकि, कुछ चर्चा है कि क्या ब्राउज़र किसी फ़ाइल को क्वेरी स्ट्रिंग के साथ कैश करेगा या नहीं। (याद रखें, हम चाहते हैं कि ब्राउज़र फ़ाइल को कैश करे और इसे भविष्य की यात्राओं पर उपयोग करें। हम केवल यह चाहते हैं कि फ़ाइल को फिर से लाया जाए क्योंकि इसे बदल दिया गया है।)

चूंकि यह स्पष्ट नहीं है कि फर्जी क्वेरी स्ट्रिंग के साथ क्या होता है, मैं उस उत्तर को स्वीकार नहीं कर रहा हूं।

— Pmpr
स्रोत

मेरे पास मेरे .htaccess में है, और कैश्ड फ़ाइलों के साथ कोई समस्या नहीं है ExpiresActive On ExpiresDefault "modification":।

— फ्रैंक कॉनिजन

2

मैं निश्चित रूप से सहमत हूं कि फ़ाइल के URL में संस्करण जानकारी जोड़ना अभी तक का सबसे अच्छा तरीका है। यह काम करता है, हर समय, सभी के लिए। लेकिन, यदि आप इसका उपयोग नहीं कर रहे हैं, और आपको बस उस सीएसएस या JS फाइल को कभी-कभी अपने ब्राउज़र में लोड करने की आवश्यकता है ... बस इसे अपने टैब में खोलें और SHIFT-reload (या CTRL-F5) को हिट करें! आप एक (छुपी हुई) iframe में फ़ाइल लोड करके, उसके लोड होने तक प्रतीक्षा करके, और फिर कॉल करके JS का उपयोग करके समान रूप से प्रभावी ढंग से कर सकते हैं iframe.contentWindow.location.reload(true)। देखें stackoverflow.com/a/22429796/999120 की विधि (4) - यह छवियों के बारे में है, लेकिन वही लागू होता है।

— चल रहा

2

मैं वास्तव में जिस तरह से यह सवाल पूछा गया था, उसकी सराहना करता हूं और तब से अपडेट किया गया है। यह पूरी तरह से वर्णित है कि मुझे उत्तरों में क्या उम्मीद करनी चाहिए। मैं अब से अपने प्रश्नों में इस दृष्टिकोण का अनुसरण करने जा रहा हूं। चीयर्स!

— rd22

455

अपडेट: जॉन मिलिकिन और दा 5आईडी के सुझावों को शामिल करने के लिए फिर से लिखा गया । यह समाधान PHP में लिखा गया है, लेकिन इसे अन्य भाषाओं में आसानी से अनुकूलित किया जाना चाहिए।

अपडेट 2: निक जॉनसन की टिप्पणियों को शामिल करते हुए कि मूल .htaccessरेगेक्स जैसी फाइलों के साथ समस्या पैदा कर सकता है json-1.3.js। समाधान केवल फिर से लिखना है अगर अंत में 10 अंक हैं। (क्योंकि 10 अंक सभी टाइमस्टैम्प को 9/9/2001 से 11/20/2286 तक कवर करता है।)

सबसे पहले, हम .htaccess में निम्नलिखित पुनर्लेखन नियम का उपयोग करते हैं:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

अब, हम निम्नलिखित PHP फ़ंक्शन लिखते हैं:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *  
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

अब, जहाँ भी आप अपने CSS को शामिल करते हैं, उसे इस से बदलें:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

इसके लिए:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

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

यह चित्र, फ़ेविकॉन और जावास्क्रिप्ट के साथ भी काम कर सकता है। मूल रूप से कुछ भी जो गतिशील रूप से उत्पन्न नहीं होता है।

— रात बिताने का स्थान
स्रोत

16

मेरा खुद का स्टैटिक कंटेंट सर्वर बिल्कुल वैसा ही है, सिवाय इसके कि मैं एक फाइलिंग चेंज (बेस.1221534296.css) के बजाय वर्जनिंग (base.css? V = 1221534296) के लिए एक पैरामीटर का उपयोग करता हूं। मुझे संदेह है कि आपका रास्ता थोड़ा और कुशल हो सकता है। बहुत ही शांत।

— जेन्स रोलैंड

4

@ किप: बहुत चालाक समाधान। URL रीराइटिंग में स्पष्ट रूप से बहुत सुंदर यूआरएल की तुलना में अधिक प्रस्ताव है।

— जेम्स पी।

37

मुझे इसके साथ एक समस्या दिखाई देती है, कि यह कई बार फाइल सिस्टम तक पहुँचता है - ठीक-ठीक लिंक की संख्या * अनुरोधों की संख्या / सेकंड ... जो आपके लिए समस्या हो सकती है या नहीं।

— टॉमस फीजफर

3

@ एलाइक्सएक्सेल: नहीं, जब पैरामीटर बदलता है तो ब्राउज़र इसे फिर से प्राप्त करेंगे, लेकिन कुछ सार्वजनिक परदे के पीछे यूआरएल मापदंडों के साथ फ़ाइलों को कैश नहीं करेंगे, इसलिए सबसे अच्छा अभ्यास पथ में संस्करण को शामिल करना है। और mod_rewrite ओवरहेड WPO में हर दूसरे प्रदर्शन की अड़चन की तुलना में मिनीस्कुल है

— Jens Roland

8

क्या पहला file_existsचेक वास्तव में आवश्यक है? filemtimeअसफलता पर झूठा वापस आएगा, इसलिए फ़ाइल का नाम बदलने से पहले सिर्फ एक चर के लिए फिल्म का मान क्यों न दें और जांचें कि क्या यह गलत है? यह एक अनावश्यक फ़ाइल ऑपरेशन में कटौती करेगा जो वास्तव में जोड़ देगा।

— गैविन

184

सरल क्लाइंट-साइड तकनीक

सामान्य तौर पर, कैशिंग अच्छा है। इसलिए कुछ तकनीकें हैं, जो इस बात पर निर्भर करती हैं कि आप अपने लिए समस्या को ठीक कर रहे हैं जैसे कि आप एक वेबसाइट विकसित करते हैं, या क्या आप उत्पादन वातावरण में कैश को नियंत्रित करने की कोशिश कर रहे हैं।

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

<script src="/myJavascript.js?version=4"></script>

यह सुनिश्चित करेगा कि सभी को नई फ़ाइल मिल जाए। यह काम करता है क्योंकि ब्राउज़र फ़ाइल के URL को यह निर्धारित करने के लिए देखता है कि उसमें कैश की प्रतिलिपि है या नहीं। यदि आपका सर्वर क्वेरी स्ट्रिंग के साथ कुछ भी करने के लिए सेट नहीं है, तो इसे अनदेखा कर दिया जाएगा, लेकिन नाम ब्राउज़र की एक नई फ़ाइल जैसा दिखेगा।

दूसरी ओर, यदि आप एक वेबसाइट विकसित कर रहे हैं, तो आप हर बार अपने विकास संस्करण में परिवर्तन सहेजने के लिए संस्करण संख्या को बदलना नहीं चाहते हैं। यह थकाऊ होगा।

इसलिए जब आप अपनी साइट विकसित कर रहे हैं, तो एक अच्छी चाल स्वचालित रूप से एक क्वेरी स्ट्रिंग पैरामीटर उत्पन्न करने के लिए होगी:

<!-- Development version: -->
<script>document.write('<script src="/myJavascript.js?dev=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

अनुरोध में एक क्वेरी स्ट्रिंग जोड़ना एक संसाधन का एक अच्छा तरीका है, लेकिन एक साधारण वेबसाइट के लिए यह अनावश्यक हो सकता है। और याद रखें, कैशिंग एक अच्छी बात है।

यह भी ध्यान देने योग्य है कि ब्राउज़र कैश में फ़ाइलों को रखने के बारे में जरूरी नहीं है। इस प्रकार की चीज़ों के लिए ब्राउज़रों की नीतियां होती हैं, और वे आमतौर पर HTTP विनिर्देशन में निर्धारित नियमों से खेलते हैं। जब कोई ब्राउज़र किसी सर्वर से अनुरोध करता है, तो प्रतिक्रिया का एक भाग एक EXPIRES हेडर होता है .. एक तारीख जो ब्राउज़र को बताती है कि इसे कितनी देर तक कैश में रखा जाना चाहिए। अगली बार जब ब्राउज़र उसी फ़ाइल के लिए अनुरोध करता है, तो वह देखता है कि उसके पास कैश में एक कॉपी है और यह तय करने के लिए EXPIRES तिथि को देखता है कि क्या इसका उपयोग किया जाना चाहिए।

तो मानो या न मानो, यह वास्तव में आपका सर्वर है जो उस ब्राउज़र कैश को लगातार बना रहा है। आप अपनी सर्वर सेटिंग्स को समायोजित कर सकते हैं और EXPIRES हेडर को बदल सकते हैं, लेकिन मैंने जो छोटी तकनीक ऊपर लिखी है, वह शायद आपके लिए इसके बारे में जाने का एक बहुत सरल तरीका है। चूंकि कैशिंग अच्छा है, आप आमतौर पर उस तिथि को भविष्य में (एक "सुदूर-भविष्य की समाप्ति हैडर") सेट करना चाहते हैं, और ऊपर बताई गई तकनीक का उपयोग करके परिवर्तन के लिए बाध्य कर सकते हैं।

यदि आप HTTP पर अधिक जानकारी में रुचि रखते हैं या ये अनुरोध कैसे किए जाते हैं, तो स्टीव सौडर्स द्वारा एक अच्छी पुस्तक "उच्च प्रदर्शन वेब साइट" है। यह विषय का बहुत अच्छा परिचय है।

— keparo
स्रोत

3

जावास्क्रिप्ट के साथ क्वेरी स्ट्रिंग उत्पन्न करने की त्वरित चाल सक्रिय विकास के दौरान महान काम करती है। मैंने वही काम PHP के साथ किया था।

— एलन ट्यूरिंग

2

मूल पोस्टर के वांछित परिणाम को पूरा करने का यह सबसे आसान तरीका है। यदि आप पृष्ठ लोड करने के लिए .css या .js फ़ाइल को पुनः लोड करना चाहते हैं, तो mod_rewrite विधि अच्छी तरह से काम करती है। यह विधि अभी भी कैशिंग की अनुमति देती है जब तक कि आप वास्तव में फ़ाइल को नहीं बदलते हैं और वास्तव में इसे फिर से लोड करने के लिए मजबूर करना चाहते हैं।

— scott80109

@ कीपरो, मेरे पास सभी पृष्ठों में पर्याप्त संख्या में जक्खर हैं अगर मैं इसे मैन्युअल रूप से बदलने जा रहा हूं तो इसमें एक महीने का समय लगेगा। यदि आप प्रत्येक पृष्ठ पर कोडिंग के बिना मुझे हल करने में मेरी मदद कर सकते हैं।

— पटाखा

1

जब मैं उपयोग करता हूं तो यह मेरे सीएसएस के लिए काम नहीं करता है:<link href='myCss.css?dev=14141'...>

— नौमेनन

3

यह एक व्यवहार्य समाधान नहीं है। ब्राउज़रों की एक अच्छी संख्या बस उस पर एक क्वेरी स्ट्रिंग के साथ कुछ भी कैश करने से इंकार कर देगी। यही कारण है कि Google, GTMetrix, और इसी तरह के उपकरण एक झंडा उठाएंगे यदि आपके पास स्थिर सामग्री के संदर्भ में क्वेरी स्ट्रिंग हैं। हालांकि यह निश्चित रूप से विकास के लिए एक सभ्य समाधान है, यह उत्पादन के लिए बिल्कुल समाधान नहीं है। साथ ही, ब्राउज़र कैशिंग को नियंत्रित करता है, सर्वर को नहीं। जब यह ताज़ा किया जाना चाहिए तो सर्वर बस SUGGESTS; एक ब्राउज़र सर्वर को सुनने के लिए नहीं है (और अक्सर नहीं)। मोबाइल डिवाइस इसका एक प्रमुख उदाहरण हैं।

— नैट I

113

Apache के लिए Google का mod_pagespeed प्लगइन आपके लिए ऑटो-वर्जनिंग करेगा। यह वास्तव में चालाक है।

यह HTML को वेबसर्वर (PHP, रेल, पायथन, स्थिर HTML - कुछ भी काम करता है) से बाहर निकालता है और CSS, JS, छवि फ़ाइलों के लिंक को फिर से लिखता है ताकि वे एक आईडी कोड शामिल करें। यह उन पर बहुत लंबे कैश नियंत्रण के साथ संशोधित URLs में फ़ाइलों की सेवा करता है। जब फाइलें बदल जाती हैं, तो यह स्वचालित रूप से URL को बदल देता है इसलिए ब्राउज़र को उन्हें फिर से लाना पड़ता है। यह मूल रूप से आपके कोड में किसी भी बदलाव के बिना, बस काम करता है। यहां तक कि यह आपके कोड को रास्ते से भी छोटा कर देगा।

— लीपड को दर्शाता है
स्रोत

1

यह बहुत अच्छा है, लेकिन अभी भी बीटा में है। क्या यह उद्यम सेवा के लिए इस्तेमाल किया जा सकता है?

— सांग्युन ली

26

यह गलत है (स्रोत के साथ ऑटो-फ़िडलिंग) जब यह स्पष्ट रूप से एक ब्राउज़र-समस्या है। हमें (डेवलपर्स) एक वास्तविक मस्तिष्क-पोंछ ताज़ा करें: <ctrl> + F5

— T4NK3R

25

mod_pagespeed कार्यात्मक रूप से आपके html / css / js के लिए पूरी तरह से स्वचालित निर्माण / संकलन चरण के बराबर है। मुझे लगता है कि आप किसी भी गंभीर डेवलपर्स को खोजने के लिए मुश्किल से दबाए जाएंगे जो सोचते हैं कि बिल्ड सिस्टम आंतरिक रूप से गलत हैं, या यह कि इसके साथ पूरी तरह से स्वचालित कुछ भी गलत है। एक साफ बिल्ड की सादृश्य mod_pagespeed के कैश को साफ़ करना है: code.google.com/p/modpagespeed/wiki/… ?

— तेंदुआ

3

@ T4NK3R mod_pagespeed को कैश प्रबंधन करने के लिए अपने स्रोत के साथ कुछ भी करने की ज़रूरत नहीं है, यह केवल उल्लेख किया गया था कि यह minification जैसी चीजों के साथ मदद कर सकता है। यह "गलत" है या नहीं, यह पूरी तरह से व्यक्तिपरक है। यह आपके लिए गलत हो सकता है, लेकिन इसका मतलब यह नहीं है कि यह तात्कालिक रूप से बुरा है ।

— Madbreaks

2

भले ही आपको इसे स्रोत से तैयार करना पड़े: यह nginx के साथ काम करता है: Developers.google.com/speed/pagespeed/module/…

— Rohit

93

संस्करण को मैन्युअल रूप से बदलने के बजाय, मैं आपको वास्तविक CSS फ़ाइल के MD5 हैश का उपयोग करने की सलाह दूंगा।

तो आपका URL कुछ इस तरह का होगा

http://mysite.com/css/[md5_hash_here]/style.css

आप अभी भी हैश को हटाने के लिए पुनर्लेखन नियम का उपयोग कर सकते हैं, लेकिन लाभ यह है कि अब आप अपनी कैश पॉलिसी को "हमेशा के लिए कैश" करने के लिए सेट कर सकते हैं, क्योंकि यदि URL समान है, तो इसका मतलब है कि फ़ाइल अपरिवर्तित है।

फिर आप एक सरल शेल स्क्रिप्ट लिख सकते हैं जो फ़ाइल के हैश की गणना करेगा और आपके टैग को अपडेट करेगा (आप संभवतः इसे शामिल करने के लिए एक अलग फ़ाइल में ले जाना चाहते हैं)।

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

— levik
स्रोत

1

दुर्भाग्य से मैं नहीं जानता कि इसे कैसे लागू किया जाए। कृपया सलाह ... अधिक जानकारी ...

— माइकल फेल्प्स

शेल, माणिक, आदि में एक कार्यान्वयन महान होगा

— पीटर

3

बहुत अच्छा समाधान .. लेकिन मुझे लगता है कि यह संसाधन है जो हर फ़ाइल अनुरोध (css, js, images, html..etc) में फ़ाइल की हैश की गणना हर एक पृष्ठ की यात्रा के लिए करता है।

— दीपबल्यू

यह gsp, ग्रन्ट या वेबपैक के साथ js या css बंडलिंग का उपयोग करने वालों के लिए एक मानक समाधान है, कार्यान्वयन प्रत्येक समाधान के लिए भिन्न होता है, लेकिन बिल्ड स्टेप के रूप में आपकी फ़ाइलों को हैशिंग करता है और आधुनिक बंडल किए गए ऐप्स के लिए सुझाव दिया जाता है

— ब्रैंडन हॉरेन कुली

@DeepBlue - उत्तर कहता है "उस स्क्रिप्ट को चलाएं जो हर बार CSS बदलता है" । यह हर पृष्ठ पर नहीं है। OTOH प्रमुख विवरणों को छोड़ देता है - परिवर्तित हैश URL का हिस्सा कैसे बनता है? मुझे नहीं पता ...

— ToolmakerSteve

70

यकीन नहीं है कि आप लोग इस समाधान को लागू करने के लिए इतना दर्द क्यों उठा रहे हैं।

यदि आपको फ़ाइल का संशोधित टाइमस्टैम्प प्राप्त करना है और फ़ाइल के लिए इसे क्वेरिस्ट्रिंग के रूप में जोड़ना है, तो आपको बस इतना करना होगा

PHP में मैं इसे निम्नानुसार करूंगा:

<link href="mycss.css?v=<?= filemtime('mycss.css') ?>" rel="stylesheet">

filemtime एक PHP फ़ंक्शन है जो संशोधित टाइमस्टैम्प फ़ाइल को लौटाता है।

— फैंटम 007
स्रोत

आप बस उपयोग कर सकते हैं mycss.css?1234567890।

— गाविन

3

बहुत ही सुंदर, हालाँकि मैंने इसे थोड़ा संशोधित किया है <link rel="stylesheet" href="mycss.css?<?php echo filemtime('mycss.css') ?>"/>, बस इस धागे पर GET चर के साथ कैशिंग URL के बारे में कुछ तर्क दिए गए हैं (सुझाए गए प्रारूप में) सही हैं

— luke_mclachlan 13

अपनी पिछली टिप्पणी के लिए, मैंने देखा है कि वर्डप्रेस का उपयोग करता है ?ver=तो कौन जानता है!

— luke_mclachlan

महान समाधान। मेरे अलावा मैंने पाया कि फिल्म-निर्माण पूरी तरह से योग्य डोमेन नाम (FQDN) के लिए काम नहीं करता था, इसलिए मैंने फिल्म भाग के लिए Href भाग और $ _SERVER ["DOCUMENT_ROOT"] के लिए FQDN का उपयोग किया। EX: <लिंक rel = "स्टाइलशीट" href = "http: //theurl/mycss.cs? V =? <? Php इको फिल्मटाइम ($ _ SERVER [" DOCUMENT_ROOT "]। '/mycss.css')?>">>

— rrtx2000

बहुत धन्यवाद। सरल और अच्छा। यहाँ यह पायथन में है: progpath = os.path.dirname (sys.argv [0]) defizeize (फ़ाइल): टाइमस्टैम्प = os.path.getmtime ('% s /..- वेब /% s'% (progpath) , फ़ाइल)) रिटर्न '% s? v =% s'% (फ़ाइल, टाइमस्टैम्प) प्रिंट <लिंक href = "% s" rel = "स्टाइलशीट" 'प्रकार = "पाठ / css" />' \% संस्करण 'css / main.css')

— dlink

52

आप बस ?foo=1234अपने सीएसएस / जेएस आयात के अंत में डाल सकते हैं , 1234 को बदलकर जो कुछ भी आप चाहते हैं। उदाहरण के लिए SO html स्रोत पर एक नज़र डालें।

वहाँ विचार है कि किया जा रहा है? मापदंडों को वैसे भी अनुरोध पर छोड़ दिया जाता है / अनदेखा किया जाता है और जब आप एक नया संस्करण रोल करते हैं तो आप उस नंबर को बदल सकते हैं।

नोट: वास्तव में यह कैशिंग को कैसे प्रभावित करता है, इस संबंध में कुछ तर्क है। मेरा मानना है कि इसके बारे में सामान्य सार है कि प्राप्त अनुरोध है, के साथ या बिना मापदंडों चाहिए , cachable हो तो ऊपर समाधान काम करना चाहिए।

हालांकि, यह तय करने के लिए दोनों वेब सर्वर के लिए नीचे है कि क्या यह कल्पना के उस हिस्से और ब्राउज़र का उपयोग करना चाहता है, क्योंकि यह अभी ठीक आगे जा सकता है और वैसे भी एक नए संस्करण के लिए पूछ सकता है।

— SCDF
स्रोत

बकवास। क्वेरी-स्ट्रिंग (aka। GET पैरामीटर) URL का हिस्सा हैं। वे कर सकते हैं, और कैश किया जाएगा। यह एक अच्छा उपाय है।

— troelskn

9

@troelskn: HTTP 1.1 युक्ति कहती है अन्यथा (GET और HEAD रिक्वेस्ट विद क्वेरी परमस के संबंध में): कैश ऐसे यूआरआई के जवाबों का तब तक इलाज नहीं करता है जब तक कि सर्वर स्पष्ट समाप्ति समय प्रदान नहीं करता है। W3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.9

— माइकल जॉनसन

4

मैंने सभी प्रमुख ब्राउज़रों के साथ क्वेरी स्ट्रिंग प्रकार के संस्करण की कोशिश की और वे फ़ाइल, चश्मा या नहीं कैश करते हैं। हालाँकि, मुझे लगता है कि यह शैली का उपयोग करना बेहतर है। फिर भी क्वेरी स्ट्रिंग का दुरुपयोग किए बिना प्रारूप का उपयोग करें। क्योंकि अभी भी संभावना है कि प्रॉक्सी सॉफ़्टवेयर को कैशिंग करने से फ़ाइल कैश नहीं होगी।

— टॉमस एंड्रेल

34

वर्थ नोटिंग, जो भी कारण से, कि Stackoverflow खुद क्वेरी स्ट्रिंग विधि का उपयोग करता है।

— jason

2

सत्यापित करें कि उपयोग कर रहे हैं? = पैरामीटर परिवर्तन होने पर ब्राउज़रों को कैश की गई फ़ाइल को पुनः प्राप्त नहीं करेगा। एक ही तरीका है कि किप द्वारा जवाब दिया गया सर्वर के अंत में प्रोग्राम के रूप में फ़ाइल का नाम ही बदल दिया जाए

— arunskrish

41

मैंने इसे "ऑटो वर्जनिंग" कहा है। सबसे आम तरीका यह है कि URL में कहीं स्थिर फ़ाइल के माइम को शामिल किया जाए, और इसे फिर से लिखे हैंडलर या कॉन्टर का उपयोग करके बाहर निकाला जाए:

यह सभी देखें:

— जॉन मिलिकिन
स्रोत

3

धन्यवाद, मुझे लगता है कि यह एक और मामला था जहां मेरे विचार पर चर्चा की गई है, मुझे नहीं पता था कि इसे क्या कहा जाता है इसलिए मैंने इसे Google खोजों पर कभी नहीं पाया।

— किप

27

2008 की वेबसाइट के लिए 30 या इतने ही मौजूदा उत्तर बहुत अच्छी सलाह हैं। हालांकि, जब यह एक आधुनिक, सिंगल पेज एप्लिकेशन (एसपीए) की बात आती है , तो कुछ मूलभूत मान्यताओं पर फिर से विचार करने का समय हो सकता है ... विशेष रूप से यह विचार कि वेब सर्वर के लिए केवल एकल, सबसे हाल के संस्करण की सेवा करना वांछनीय है फ़ाइल।

कल्पना कीजिए कि आप एक ऐसे उपयोगकर्ता हैं, जिसका संस्करण M आपके ब्राउज़र में लोड है:

आपकी सीडी पाइपलाइन सर्वर पर एप्लिकेशन के नए संस्करण एन को दर्शाती है
आप एसपीए के भीतर नेविगेट करते हैं, जो सर्वर को पाने के लिए एक एक्सएचआर भेजता है /some.template
- (आपके ब्राउज़र ने पृष्ठ को ताज़ा नहीं किया है, इसलिए आप अभी भी संस्करण M चला रहे हैं )
सर्वर सामग्री के साथ प्रतिक्रिया करता है /some.template- क्या आप इसे टेम्पलेट के संस्करण M या N को वापस करना चाहते हैं ?

यदि /some.templateसंस्करण M और N (या फ़ाइल का नाम बदला गया है या जो कुछ भी है) के बीच परिवर्तित किया गया प्रारूप, तो आप शायद उस ब्राउज़र के भेजे गए टेम्पलेट का संस्करण N नहीं चाहते हैं जो पार्सर के पुराने संस्करण M को चला रहा है । between

जब दो शर्तें पूरी होती हैं तो वेब ऐप्स इस समस्या में आते हैं:

प्रारंभिक पृष्ठ लोड के कुछ समय बाद संसाधनों का अतुल्यकालिक रूप से अनुरोध किया जाता है
एप्लिकेशन तर्क संसाधन सामग्री के बारे में (भविष्य के संस्करणों में परिवर्तन हो सकता है) चीजों को मानता है

एक बार जब आपके ऐप को समानांतर में कई संस्करणों की सेवा करने की आवश्यकता होती है, तो कैशिंग को हल करना और "पुनः लोड करना" तुच्छ हो जाता है:

संस्करणीकृत dirs में सभी साइट फ़ाइलें स्थापित करें: /v<release_tag_1>/…files…,/v<release_tag_2>/…files…
ब्राउज़रों को हमेशा के लिए फ़ाइलों को कैश करने के लिए HTTP शीर्ष लेख सेट करें
- (या बेहतर अभी तक, सब कुछ एक सीडीएन में डालें)
सभी <script>और <link>अद्यतनों, आदि को संस्करणबद्ध डायरियों में से एक में उस फ़ाइल को इंगित करने के लिए अपडेट करें

यह अंतिम चरण मुश्किल लगता है, क्योंकि इसमें आपके सर्वर-साइड या क्लाइंट-साइड कोड में प्रत्येक URL के लिए URL बिल्डर को कॉल करने की आवश्यकता हो सकती है। या आप केवल <base>टैग का चतुर उपयोग कर सकते हैं और वर्तमान संस्करण को एक स्थान पर बदल सकते हैं।

The इसके आस-पास का एक तरीका यह है कि नया संस्करण जारी होने पर ब्राउज़र को सब कुछ पुनः लोड करने के लिए मजबूर करने के बारे में आक्रामक हो। लेकिन किसी भी इन-प्रोग्रेस ऑपरेशंस को पूरा होने देने के लिए, समानांतर में कम से कम दो संस्करणों का समर्थन करना आसान हो सकता है: वी-करंट और वी-पिछले।

— माइकल क्रोपत
स्रोत

माइकल - आपकी टिप्पणी बहुत प्रासंगिक है। मैं यहाँ ठीक से अपने स्पा के लिए एक समाधान खोजने की कोशिश कर रहा हूँ। मुझे कुछ संकेत मिले, लेकिन मुझे स्वयं एक समाधान के साथ आना पड़ा। अंत में, मैं वास्तव में खुश था कि मैं क्या लेकर आया था इसलिए मैंने एक ब्लॉग पोस्ट और इस प्रश्न का उत्तर (कोड सहित) लिखा। संकेत के लिए धन्यवाद

— स्टेटनर

शानदार टिप्पणी। मैं यह नहीं समझ सकता कि जब लोग कैशिंग बस्ट और HTTP कैशिंग के बारे में बात करते रहते हैं, तो वेब साइटों के वास्तविक समाधान के रूप में, एसपीए की नई समस्याओं को दूर किए बिना कैशिंग समस्याओं का समाधान, जैसे कि यह एक मामूली मामला था।

— डेविड कैसिलस

1

उत्कृष्ट प्रतिक्रिया और बिल्कुल आदर्श रणनीति! और baseटैग का उल्लेख करने के लिए बोनस अंक ! पुराने कोड का समर्थन करने के लिए: यह हमेशा एक संभावना नहीं है, और न ही यह हमेशा एक अच्छा विचार है। कोड के नए संस्करण किसी ऐप के अन्य टुकड़ों में परिवर्तन को समर्थन दे सकते हैं या इसमें आपातकालीन सुधार, भेद्यता पैच, और इसी तरह शामिल हो सकते हैं। मुझे अभी तक इस रणनीति को स्वयं लागू करना है, लेकिन मैंने हमेशा महसूस किया है कि समग्र आर्किटेक्चर को एक पुराने संस्करण को टैग करने की अनुमति देना चाहिए obsoleteऔर अगली बार एक अतुल्यकालिक कॉल को फिर से लोड करने के लिए बाध्य करना चाहिए (या बस WebSockets के माध्यम से सभी सत्रों को बलपूर्वक डी-ऑर्ट करना चाहिए )।

— जॉनी असमर

सिंगल पेज एप्लिकेशन के संबंध में एक सुविचारित उत्तर देखकर अच्छा लगा।

— नैट I

यदि आप अधिक जानकारी के लिए खोज करना चाहते हैं तो यह "ब्लू-ग्रीन परिनियोजन" है।

— Fil

15

Foo.css का उपयोग न करें? संस्करण = 1! ब्राउज़रों को URL को GET चर के साथ कैश नहीं करना चाहिए। Http://www.thinkvitamin.com/features/webapps/serves-javascript-fast के अनुसार , हालांकि IE और फ़ायरफ़ॉक्स इसे अनदेखा करते हैं, ओपेरा और सफारी नहीं! इसके बजाय, संस्करण संख्या को अलग करने के लिए foo.v1234.css का उपयोग करें, और फिर से लिखना नियमों का उपयोग करें।

— airrob
स्रोत

1

सबसे पहले सभी ब्राउज़र कैश नहीं करते हैं, HTTP का एक फंक्शन। एक URI की संरचना के बारे में http क्यों ध्यान रखेगा? क्या किसी युक्ति का संदर्भ दिया गया है जिसमें कहा गया है कि HTTP कैशिंग को URI के शब्दार्थ को समझना चाहिए ताकि वह क्वेरी स्ट्रिंग के साथ आइटम कैश न करे?

— एंथनीवजोन

13

एक वेब ब्राउज़र जिसमें कैशिंग ऑब्जेक्ट्स की कार्यक्षमता शामिल है (अपने ब्राउज़र की कैश निर्देशिका की जांच करें)। HTTP एक प्रोटोकॉल है जिसमें सर्वर से लेकर क्लाइंट (प्रॉक्सी, ब्राउजर, स्पाइडर आदि) के निर्देश शामिल हैं जो कैश कंट्रोल का सुझाव देते हैं।

— tzot

13

Laravel (PHP) में हम इसे स्पष्ट और सुरुचिपूर्ण तरीके से (फ़ाइल संशोधन टाइमस्टैम्प का उपयोग करके) कर सकते हैं:

<script src="{{ asset('/js/your.js?v='.filemtime('js/your.js')) }}"></script>

और CSS के लिए समान है

<link rel="stylesheet" href="{{asset('css/your.css?v='.filemtime('css/your.css'))}}">

उदाहरण HTML आउटपुट ( यूनिक्स टाइमस्टैम्प केfilemtime रूप में वापसी समय )

<link rel="stylesheet" href="assets/css/your.css?v=1577772366">

— कामिल Kiełczewski को दर्शाता है
स्रोत

html में इस कमांड का आउटपुट क्या है? और क्या होगा अगर मुझे केवल संस्करणों को नवीनीकृत करने की आवश्यकता है जैसे? V = 3; v = 4 और आदि - ब्राउज़र को सीएसएस लोड करने के लिए ब्राउज़र को मजबूर नहीं करता है उपयोगकर्ता वेबसाइट पर प्रवेश करता है

— Gediminas

filemtime : "यह फ़ंक्शन उस समय को लौटाता है जब किसी फ़ाइल के डेटा ब्लॉक को लिखा जा रहा था, यानी वह समय जब फ़ाइल की सामग्री बदल दी गई थी।" src: php.net/manual/en/function.filemtime.php

— कामिल कील्वेज़ेव्स्की

11

RewriteRule को js या css फ़ाइलों के लिए एक छोटे से अपडेट की आवश्यकता होती है जिसमें अंत में एक डॉट नोटेशन संस्करण होता है। उदा। Json-1.3.js।

मैंने regex so .number में एक डॉट नेगमेंट क्लास [^] जोड़ा। नजरअंदाज कर दिया है।

RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]

— निक जॉनसन
स्रोत

2

इनपुट के लिए धन्यवाद! जब से मैंने यह पोस्ट लिखी है मैं इससे भी जल गया हूं। मेरा समाधान केवल फिर से लिखना था यदि फ़ाइलनाम के अंतिम भाग में ठीक दस अंक हों। (10 अंक 9/9/2001 से 11/20/2286 तक सभी टाइमस्टैम्प को कवर करता है।) मैंने इस रेगेक्स को शामिल करने के लिए अपना उत्तर अपडेट कर दिया है:^(.*)\.[\d]{10}\.(css|js)$ $1.$2

— किप

मुझे रेगेक्स समझ में आता है, लेकिन मुझे समझ नहीं आ रहा है कि आप [^.]यहाँ किस समस्या को हल कर रहे हैं। इसके अलावा, \dएक चरित्र वर्ग के अंदर लिखने का कोई लाभ नहीं है - \d+वही काम करेगा। पोस्ट के अनुसार, आपका पैटर्न किसी भी वर्ण (लालच), फिर एक शाब्दिक बिंदु, फिर एक गैर-बिंदु, फिर एक या अधिक अंक, फिर एक बिंदु, फिर cssया jsफिर फ़ाइल नाम के अंत से मेल खाता होगा । आपके नमूना इनपुट का कोई मिलान नहीं: regex101.com/r/RPGC62/1

— मिकमैकुसा

10

ASP.NET 4.5 और अधिक से अधिक के लिए आप स्क्रिप्ट बंडलिंग का उपयोग कर सकते हैं ।

अनुरोध http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81बंडल AllMyScripts के लिए है और इसमें एक क्वेरी स्ट्रिंग जोड़ी v = r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81 शामिल है। क्वेरी स्ट्रिंग v में एक मान टोकन है जो कैशिंग के लिए उपयोग किया जाने वाला एक विशिष्ट पहचानकर्ता है। जब तक बंडल परिवर्तित नहीं होता है, ASP.NET अनुप्रयोग इस टोकन का उपयोग करते हुए AllMyScripts बंडल का अनुरोध करेगा। यदि बंडल में कोई भी फ़ाइल बदलती है, तो ASP.NET ऑप्टिमाइज़ेशन फ्रेमवर्क एक नया टोकन उत्पन्न करेगा, यह गारंटी देते हुए कि बंडल के लिए ब्राउज़र अनुरोध नवीनतम बंडल प्राप्त करेंगे।

बंडलिंग के लिए अन्य लाभ हैं, जिनमें पहली बार पृष्ठ पर लोड में वृद्धि के साथ प्रदर्शन शामिल हैं।

— user3738893
स्रोत

कृपया मेरी मदद करें मैं सिर्फ बंडल या जेएस फाइलों में बदलते हुए बंडल में कोई बदलाव नहीं कर रहा हूं। फिर मैं कोचिंग मुद्दे को कैसे हल कर सकता हूं?

— वेदांतिता कुंभार

10

यहाँ एक शुद्ध जावास्क्रिप्ट समाधान है

(function(){

    // Match this timestamp with the release of your code
    var lastVersioning = Date.UTC(2014, 11, 20, 2, 15, 10);

    var lastCacheDateTime = localStorage.getItem('lastCacheDatetime');

    if(lastCacheDateTime){
        if(lastVersioning > lastCacheDateTime){
            var reload = true;
        }
    }

    localStorage.setItem('lastCacheDatetime', Date.now());

    if(reload){
        location.reload(true);
    }

})();

उपयोगकर्ता द्वारा आपकी साइट पर जाने पर अंतिम बार उपरोक्त दिखाई देगा। यदि आप नई कोड जारी करने से पहले अंतिम यात्रा करते थे, तो यह location.reload(true)सर्वर से पेज रिफ्रेश करने के लिए उपयोग करता है।

मेरे पास आमतौर पर यह पहली स्क्रिप्ट के रूप में है, <head>इसलिए इसका मूल्यांकन किसी अन्य सामग्री के लोड होने से पहले किया जाता है। यदि एक पुनः लोड होने की आवश्यकता है, तो यह उपयोगकर्ता के लिए शायद ही ध्यान देने योग्य है।

मैं ब्राउज़र पर अंतिम यात्रा टाइमस्टैम्प को स्टोर करने के लिए स्थानीय भंडारण का उपयोग कर रहा हूं, लेकिन यदि आप IE के पुराने संस्करणों का समर्थन करना चाहते हैं, तो आप मिश्रण में कुकीज़ जोड़ सकते हैं।

— लॉयड बैंक
स्रोत

मैंने ऐसा कुछ करने की कोशिश की, यह केवल पुनः लोड किए गए पृष्ठ पर काम करेगा, लेकिन यदि साइट में बहु पृष्ठ समान सीएसएस / चित्र साझा हैं तो अन्य पृष्ठ अभी भी पुराने संसाधनों का उपयोग करेंगे।

— दीपबल्यू

9

रोचक पोस्ट। यहां दिए गए सभी उत्तरों को इस तथ्य के साथ पढ़ने के बाद कि मुझे "फर्जी" क्वेरी के तार के साथ कोई समस्या नहीं है (जो मैं अनिश्चित हूं कि हर कोई इसका उपयोग करने के लिए इतना अनिच्छुक क्यों है) मैं समाधान का अनुमान लगाता हूं (जो अपाचे लिखने के नियमों की आवश्यकता को हटा देता है) जैसा कि स्वीकृत उत्तर में है) फर्जी क्वेरिस्ट्रिंग के रूप में सीएसएस फ़ाइल सामग्री (फ़ाइल डेटाटाइम के बजाय) के एक संक्षिप्त एचएसएच की गणना करना है।

यह निम्नलिखित में परिणाम होगा:

<link rel="stylesheet" href="/css/base.css?[hash-here]" type="text/css" />

बेशक डेटटाइम समाधानों को सीएसएस फ़ाइल को संपादित करने के मामले में भी काम मिलता है, लेकिन मुझे लगता है कि यह सीएसएस फ़ाइल सामग्री के बारे में है और फ़ाइल डेटाइम के बारे में नहीं है, इसलिए ये मिश्रित क्यों हैं?

— Michiel
स्रोत

8

मेरे विकास के लिए, मुझे लगता है कि क्रोम के पास एक शानदार समाधान है।

https://developer.chrome.com/devtools/docs/tips-and-tricks#hard-reload

डेवलपर टूल खुलने के साथ, बस ताज़ा बटन पर क्लिक करें और एक बार "खाली कैश और हार्ड रीलोड" पर मंडराने दें।

यह मेरा सबसे अच्छा दोस्त है, और जो आप चाहते हैं उसे पाने के लिए एक सुपर लाइट वेट तरीका है!

— फ्रैंक ब्रायस
स्रोत

और यदि आप Chrome को अपने विकास के वातावरण के रूप में उपयोग कर रहे हैं, तो कैश को अक्षम करने के लिए एक और गैर-इनवेसिव समाधान है: सेटिंग कॉग के तहत, आप 'कैश को अक्षम करें' का चयन करके डिस्क कैश को अमान्य कर सकते हैं (ध्यान दें: DevTools दिखाई / खुले होने चाहिए इसके लिए काम करना है)।

— वेलोजेट

7

अपने सही समाधान के लिए किप पर धन्यवाद!

मैंने इसे Zend_view_Helper के रूप में उपयोग करने के लिए इसे बढ़ाया। क्योंकि मेरा क्लाइंट एक वर्चुअल होस्ट पर अपना पेज चलाता है, मैंने उसके लिए इसे बढ़ाया भी है।

आशा है कि यह किसी और को भी मदद करता है।

/**
 * Extend filepath with timestamp to force browser to
 * automatically refresh them if they are updated
 *
 * This is based on Kip's version, but now
 * also works on virtual hosts
 * @link http://stackoverflow.com/questions/118884/what-is-an-elegant-way-to-force-browsers-to-reload-cached-css-js-files
 *
 * Usage:
 * - extend your .htaccess file with
 * # Route for My_View_Helper_AutoRefreshRewriter
 * # which extends files with there timestamp so if these
 * # are updated a automatic refresh should occur
 * # RewriteRule ^(.*)\.[^.][\d]+\.(css|js)$ $1.$2 [L]
 * - then use it in your view script like
 * $this->headLink()->appendStylesheet( $this->autoRefreshRewriter($this->cssPath . 'default.css'));
 *
 */
class My_View_Helper_AutoRefreshRewriter extends Zend_View_Helper_Abstract {

    public function autoRefreshRewriter($filePath) {

        if (strpos($filePath, '/') !== 0) {

            // path has no leading '/'
            return $filePath;
        } elseif (file_exists($_SERVER['DOCUMENT_ROOT'] . $filePath)) {

            // file exists under normal path
            // so build path based on this
            $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $filePath);
            return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
        } else {

            // fetch directory of index.php file (file from all others are included)
            // and get only the directory
            $indexFilePath = dirname(current(get_included_files()));

            // check if file exist relativ to index file
            if (file_exists($indexFilePath . $filePath)) {

                // get timestamp based on this relativ path
                $mtime = filemtime($indexFilePath . $filePath);

                // write generated timestamp to path
                // but use old path not the relativ one
                return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $filePath);
            } else {

                return $filePath;
            }
        }
    }

}

चीयर्स एंड थैंक्स।

— Lony
स्रोत

7

गतिशील रूप से स्क्रिप्ट नोड (या सीएसएस) तत्व बनाने वाले क्लाइंट साइडेड डोम दृष्टिकोण को नहीं मिला है:

<script>
    var node = document.createElement("script"); 
    node.type = "text/javascript";
    node.src = 'test.js?'+Math.floor(Math.random()*999999999);
    document.getElementsByTagName("head")[0].appendChild(node);
</script>

— GreQ
स्रोत

6

google chrome में Hard Reload के साथ-साथ Empty Cache और Hard Reload का भी विकल्प है। आप किसी एक को चुनने के लिए रीलोड बटन (इंस्पेक्ट मोड) में क्लिक और होल्ड कर सकते हैं।

— रेवती अज़ीथेस111
स्रोत

द्वारा "निरीक्षण मोड", वे F12 उर्फ "देव उपकरण" की बात कर रहे, उर्फ ctrl + shift + मैं, उर्फ स्पष्ट करने के लिए, ant menu> More Tools> Developer Tools, उर्फ right click> Inspect Element। हर रीलोड पर हार्ड रीलोड करने के लिए देव टूल्स (मैं स्थान भूल जाता हूं) में कहीं पर एक सेटिंग को दफनाया गया है।

— जॉनी असमर

5

यदि आप सत्र / आईडी को js / tss फ़ाइल के मसालेदार पैरामीटर के रूप में जोड़ते हैं, तो आप "सत्र-व्यापी कैशिंग" को बाध्य कर सकते हैं:

<link rel="stylesheet" src="myStyles.css?ABCDEF12345sessionID" />
<script language="javascript" src="myCode.js?ABCDEF12345sessionID"></script>

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

<link rel="stylesheet" src="myStyles.css?20080922_1020" />
<script language="javascript" src="myCode.js?20080922_1120"></script>

— HELIOS
स्रोत

5

कहो कि आपके पास एक फ़ाइल उपलब्ध है:

/styles/screen.css

आप या तो URI पर संस्करण जानकारी के साथ क्वेरी पैरामीटर संलग्न कर सकते हैं, जैसे:

/styles/screen.css?v=1234

या आप संस्करण जानकारी को रोक सकते हैं, जैसे:

/v/1234/styles/screen.css

IMHO दूसरी विधि CSS फाइलों के लिए बेहतर है क्योंकि वे सापेक्ष URL का उपयोग करके छवियों को संदर्भित कर सकते हैं, जिसका अर्थ है कि यदि आप ऐसा निर्दिष्ट करते background-imageहैं:

body {
    background-image: url('images/happy.gif');
}

इसका URL प्रभावी रूप से होगा:

/v/1234/styles/images/happy.gif

इसका अर्थ है कि यदि आप उपयोग किए गए संस्करण संख्या को अपडेट करते हैं तो सर्वर इसे एक नए संसाधन के रूप में मानेगा और कैश्ड संस्करण का उपयोग नहीं करेगा। यदि आप Subversion / CVS / etc पर अपना वर्जन नंबर आधार करते हैं। इसका मतलब यह है कि सीएसएस फाइलों में संदर्भित छवियों में परिवर्तन देखा जाएगा। यही कारण है, यानी यूआरएल पहली योजना के साथ इसकी गारंटी नहीं है images/happy.gifके सापेक्ष /styles/screen.css?v=1235है /styles/images/happy.gifजो किसी भी संस्करण जानकारी शामिल नहीं है।

मैंने जावा सर्वलेट्स के साथ इस तकनीक का उपयोग करके एक कैशिंग समाधान लागू किया है और बस /v/*एक सर्वलेट के साथ अनुरोधों को संभालता हूं जो अंतर्निहित संसाधन (यानी /styles/screen.css) को दर्शाता है । विकास मोड में मैं हेडर कि हमेशा के लिए ग्राहक बता कैशिंग सेट सर्वर के साथ संसाधन की ताजगी जाँच (यह आम तौर पर एक 304 में परिणाम अगर आप बिलाव के प्रतिनिधि DefaultServletऔर .css, .jsआदि फ़ाइल नहीं बदला है), जबकि तैनाती मोड में मैं हेडर सेट करता हूं जो कहता है "कैश हमेशा के लिए"।

— वाल्टर रम्सबी को दर्शाता है
स्रोत

बस एक फ़ोल्डर जोड़ना जिसे आप आवश्यक होने पर नाम बदल सकते हैं यदि आप केवल रिश्तेदार URL का उपयोग करते हैं। और फिर आप बेस फोल्डर से उचित फ़ोल्डर को पुनर्निर्देशित करना सुनिश्चित करेंगे, अर्थात PHP में <?php header( 'Location: folder1/login.phtml' ); ?>:।

— ग्रुबर

1

दूसरी विधि का उपयोग करते हुए, CSS में परिवर्तन सापेक्ष URL के साथ संदर्भित सभी छवियों की कैश की गई प्रतियों को अमान्य कर देगा, जो वांछनीय हो भी सकती हैं और नहीं भी।

— टॉम

5

आप बस सीएसएस / जेएस यूआरएल के साथ कुछ यादृच्छिक संख्या जोड़ सकते हैं

example.css?randomNo=Math.random()

— पोनमुडी वीएन
स्रोत

5

ASP.NET के लिए मुझे लगता है कि उन्नत विकल्प (डिबग / रिलीज़ मोड, संस्करण) के साथ अगला समाधान:

इस तरह से शामिल जेएस या सीएसएस फाइलें:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix और Global.CssPostfix की गणना Global.asax में निम्नलिखित तरीके से की जाती है:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

— इवान कोचूरिन
स्रोत

4

मैंने हाल ही में इसे पायथन का उपयोग करके हल किया है। यहाँ कोड (अन्य भाषाओं को अपनाना आसान होना चाहिए):

def import_tag(pattern, name, **kw):
    if name[0] == "/":
        name = name[1:]
    # Additional HTML attributes
    attrs = ' '.join(['%s="%s"' % item for item in kw.items()])
    try:
        # Get the files modification time
        mtime = os.stat(os.path.join('/documentroot', name)).st_mtime
        include = "%s?%d" % (name, mtime)
        # this is the same as sprintf(pattern, attrs, include) in other
        # languages
        return pattern % (attrs, include)
    except:
        # In case of error return the include without the added query
        # parameter.
        return pattern % (attrs, name)

def script(name, **kw):
    return import_tag("""<script type="text/javascript" """ +\
        """ %s src="/%s"></script>""", name, **kw)

def stylesheet(name, **kw):
    return import_tag('<link rel="stylesheet" type="text/css" ' +\
        """%s href="/%s">', name, **kw)

यह कोड मूल रूप से URL के लिए क्वेरी पैरामीटर के रूप में फाइल टाइम-स्टैम्प को जोड़ता है। निम्नलिखित फ़ंक्शन का कॉल

script("/main.css")

में परिणाम होगा

<link rel="stylesheet" type="text/css"  href="/main.css?1221842734">

निश्चित रूप से लाभ यह है कि आपको अपने html को फिर से बदलने की ज़रूरत नहीं है, सीएसएस फ़ाइल को छूने से स्वचालित रूप से कैश अमान्य हो जाएगा। बहुत अच्छा काम करता है और ओवरहेड ध्यान देने योग्य नहीं है।

— अनुकरणीय।
स्रोत

os.stat () एक अड़चन पैदा कर सकता है?

— होजू २३'१२

@ रिकर्ड स्टैड एक अड़चन हो सकती है यदि डिस्क बहुत धीमी है और अनुरोध बहुत हैं। उस स्थिति में आप टाइमस्टैम्प को स्मृति में कैश कर सकते हैं और हर नई तैनाती पर इस कैश को शुद्ध कर सकते हैं। फिर भी अधिकांश उपयोग के मामलों में यह जटिलता आवश्यक नहीं होगी।

— पी।

4

यदि आप git + PHP का उपयोग कर रहे हैं, तो आप निम्न कोड का उपयोग करके प्रत्येक बार गिट रेपो में परिवर्तन करने के लिए स्क्रिप्ट को पुनः लोड कर सकते हैं:

exec('git rev-parse --verify HEAD 2> /dev/null', $gitLog);
echo '  <script src="/path/to/script.js"?v='.$gitLog[0].'></script>'.PHP_EOL;

— रीडिकस
स्रोत

4

यदि आप कैशिंग से बचने के लिए एक डेवलपर हैं, तो क्रोम नेटवर्क टैब में कैश विकल्प को अक्षम कर दिया गया है। अन्यथा आप दो स्क्रिप्ट टैग का उपयोग करके सर्वर रेंडरिंग फ्रेमवर्क के बिना भी कर सकते हैं।

<script type="text/javascript">
    document.write('<script type="text/javascript" src="myfile.js?q=' + Date.now() + '">
    // can't use myfile.js stuff yet
</script>')
<script type="text/javascript">
    // do something with myfile.js
</script>

— खगोलों का पता चलता है
स्रोत

3

ऐसा लगता है कि सभी उत्तर नामकरण योजना में किसी प्रकार के संस्करण का सुझाव देते हैं, जिसके डाउनसाइड हैं।

ब्राउज़रों को अच्छी तरह से पता होना चाहिए कि webservers प्रतिक्रिया को पढ़कर कैश और क्या नहीं कैश करना है, विशेष रूप से http हेडर - यह संसाधन कितने समय के लिए वैध है? जब मैंने अंतिम बार इसे पुनर्प्राप्त किया था तब से यह संसाधन अपडेट था? आदि।

यदि चीजें 'सही ढंग से' कॉन्फ़िगर की गई हैं, तो बस आपके एप्लिकेशन की फ़ाइलों को अपडेट करना (किसी बिंदु पर) ब्राउज़र कैश को ताज़ा करना चाहिए। उदाहरण के लिए आप अपने वेब सर्वर को ब्राउजर से कह सकते हैं कि वह फाइल्स को कभी भी कैश न करे (जो कि एक बुरा विचार है)।

कैसे काम करता है की एक और अधिक गहराई से व्याख्या यहाँ https://www.mnot.net/cache_docs/#WORK है

— commonpike
स्रोत

3

बस इस कोड को जोड़ें, जहां आप हार्ड रीलोड करना चाहते हैं (सीएसएस / जेएस फाइलों को फिर से लोड करने के लिए फोर्स ब्राउजर) .लोड के अंदर ऐसा करें ताकि यह लूप की तरह रिफ्रेश न हो।

 $( window ).load(function() {
   location.reload(true);
});

— संदीप रंजन
स्रोत

क्रोम पर काम नहीं करता है। अभी भी डिस्क कैश से संपत्ति लोड हो रही है

— जेसन किम

3

फ़ाइल की तारीख को जोड़ने के लिए बस सर्वर साइड कोड का उपयोग करें ... इस तरह से इसे कैश किया जाएगा और फ़ाइल को बदलने पर केवल पुनः लोड किया जाएगा

ASP.NET में

<link rel="stylesheet" href="~/css/custom.css?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/css/custom.css")).ToString(),"[^0-9]", ""))" />

<script type="text/javascript" src="~/js/custom.js?d=@(System.Text.RegularExpressions.Regex.Replace(File.GetLastWriteTime(Server.MapPath("~/js/custom.js")).ToString(),"[^0-9]", ""))"></script>

इसे सरल बनाया जा सकता है:

<script src="<%= Page.ResolveClientUrlUnique("~/js/custom.js") %>" type="text/javascript"></script>

पेज बढ़ाने के लिए अपनी परियोजना में एक विस्तार विधि जोड़कर:

public static class Extension_Methods
{
    public static string ResolveClientUrlUnique(this System.Web.UI.Page oPg, string sRelPath)
    {
        string sFilePath = oPg.Server.MapPath(sRelPath);
        string sLastDate = System.IO.File.GetLastWriteTime(sFilePath).ToString();
        string sDateHashed = System.Text.RegularExpressions.Regex.Replace(sLastDate, "[^0-9]", "");

        return oPg.ResolveClientUrl(sRelPath) + "?d=" + sDateHashed;
    }
}

— माइक
स्रोत

3

यह सवाल सुपर पुराना है, और पहली बात यह प्रतीत होती है जब कोई भी इस मुद्दे को गुमराह करता है। यह सवाल का जवाब नहीं है जिस तरह से ऑप इसे चाहता है, इसके बजाय विकासशील और परीक्षण करते समय इस समस्या के साथ देवताओं का जवाब है। और मैं इस विषय पर एक नया प्रश्न पोस्ट नहीं कर सकता क्योंकि इसे डुप्लिकेट के रूप में चिह्नित किया जाएगा।

कई अन्य लोगों की तरह, मैं बस संक्षेप में कैशिंग को हटाना चाहता था।

"keep caching consistent with the file" ।।इसका तरीका बहुत ज्यादा झंझट ।।

सामान्यतया, मुझे अधिक लोड करने में कोई आपत्ति नहीं है - यहां तक कि फिर से लोड करने वाली फाइलें जो कि बदल नहीं गईं - अधिकांश परियोजनाओं पर - व्यावहारिक रूप से अप्रासंगिक हैं। एक एप्लिकेशन विकसित करते समय - हम ज्यादातर डिस्क से लोड कर रहे हैं, localhost:port इसलिए - यह increase in network trafficमुद्दा सौदा तोड़ने का मुद्दा नहीं है ।

अधिकांश छोटी परियोजनाएँ बस के आसपास खेल रही हैं - वे कभी भी उत्पादन में समाप्त नहीं होती हैं। तो उनके लिए आपको कुछ अधिक की आवश्यकता नहीं है ।।

जैसे कि यदि आप क्रोम देव टूल्स का उपयोग करते हैं , तो आप इस अक्षम कैशिंग दृष्टिकोण का अनुसरण कर सकते हैं जैसे नीचे दी गई छवि में:

और अगर आपके पास फ़ायरफ़ॉक्स कैशिंग समस्याएँ हैं:

यह केवल विकास में करें, आपको उत्पादन के लिए पुनः लोड करने के लिए एक तंत्र की भी आवश्यकता है, क्योंकि आपके उपयोगकर्ता पुराने कैश अमान्य मॉड्यूल का उपयोग करेंगे यदि आप अपने ऐप को बार-बार अपडेट करते हैं और आप उत्तरों में वर्णित लोगों की तरह समर्पित कैश सिंक तंत्र प्रदान नहीं करते हैं। ऊपर।

हां, यह जानकारी पहले से ही पिछले उत्तरों में है, लेकिन मुझे इसे खोजने के लिए एक Google खोज करने की आवश्यकता है।

उम्मीद है कि यह उत्तर बहुत स्पष्ट है और अब आपको इसकी आवश्यकता नहीं है।

— एयॉन
स्रोत

ओपी ने कुछ पूछा और कुछ और उत्तर दिया। यह स्थानीय लेकिन उत्पादन में बल लोड के बारे में नहीं है और आप अंत उपयोगकर्ताओं को कैश आदि को अक्षम करने के लिए ऊपर का अनुसरण करने के लिए नहीं कह सकते हैं

— जितेंद्र पंचोली

2

मैं निम्नलिखित प्रक्रिया को लागू करने का सुझाव देता हूं:

जब भी आप अपनी सीएसएस / जेएस फाइलों को वर्जन करते हैं, कुछ इस तरह से होता है: स्क्रीन। १३३३।एसके (यदि आप एक वर्जन सिस्टम का उपयोग करते हैं तो संख्या आपका एसवीएन संशोधन हो सकती है)
लोडिंग समय का अनुकूलन करने के लिए उन्हें छोटा करें

— डैन बर्जो
स्रोत