एचटीटीपी कैश मेमोरी में डेटा को कैश मेमोरी में सेव करने के तरीके को कॉन्फ़िगर करना

Jeff Posnick

इस कोडलैब को फ़ॉलो करने के लिए, इस Glitch को दूसरे टैब में खोलें.

ध्यान दें: यह कोडलैब, Chrome DevTools का इस्तेमाल करता है. अगर आपके पास पहले से Chrome नहीं है, तो Chrome डाउनलोड करें.

यह कोडलैब आपको दिखाता है कि Node.js पर आधारित वेब सर्वर, जो एक्सप्रेस चला रहा है फ़्रेमवर्क शामिल है. इसमें यह भी दिखाया जाएगा कि कैसे पुष्टि करें कि आपके कैश मेमोरी में कितनी गतिविधि हो रही है Chrome के DevTools में नेटवर्क पैनल का इस्तेमाल करके, असल में लागू किया जा रहा है.

ध्यान दें: हालांकि, खास निर्देशों को Express के लिए तैयार किया गया है, लेकिन सही कैश मेमोरी हेडर चुनने से जुड़े सामान्य सिद्धांत, वेब सर्वर के किसी भी एनवायरमेंट पर लागू होते हैं.

सैंपल प्रोजेक्ट के बारे में जानें

यहां कुछ मुख्य फ़ाइलें दी गई हैं, जिनके साथ आपको सैंपल प्रोजेक्ट में काम करना है:

• server.js में Node.js कोड होता है, जो वेब ऐप्लिकेशन के कॉन्टेंट. यह एचटीटीपी अनुरोधों को हैंडल करने के लिए एक्सप्रेस का इस्तेमाल करता है और जवाब शामिल हैं. खास तौर पर, express.static() का इस्तेमाल उन सभी लोकल फ़ाइलों को सार्वजनिक डायरेक्ट्री में सेव करेगा, ताकि serve-static दस्तावेज़ आपके काम में मदद मिलेगी.
• public/index.html, वेब ऐप्लिकेशन का एचटीएमएल है. ज़्यादातर HTML फ़ाइलों की तरह, इसमें उसके URL के हिस्से के रूप में कोई भी वर्शन जानकारी शामिल नहीं होनी चाहिए.
• public/app.15261a07.js और public/style.391484cf.css वेब ऐप्लिकेशन की JavaScript हैं और सीएसएस ऐसेट शामिल करें. इन फ़ाइलों के यूआरएल में एक हैश शामिल होता है, जो उनके कॉन्टेंट के हिसाब से सही होते हैं. इन्हें जारी रखने की ज़िम्मेदारी index.html की है किस वर्शन वाले यूआरएल को लोड करना है.

ध्यान दें: "असल दुनिया" में, नए वर्शन वाले यूआरएल के रेफ़रंस शामिल करने के लिए, हैश असाइन करने और एचटीएमएल फ़ाइलों को अपडेट करने की प्रोसेस को webpack जैसे बिल्ड टूल से मैनेज किया जाएगा. इस कोडलैब के लिए, यह मान लें कि हैश पहले से हो रही बिल्ड प्रोसेस के हिस्से के तौर पर जनरेट किए गए थे.

हमारे एचटीएमएल के लिए, कैश मेमोरी हेडर कॉन्फ़िगर करना

जिन यूआरएल में वर्शन की जानकारी नहीं है उनके लिए किए गए अनुरोधों का जवाब देते समय, पक्का करें कि आपने अपने जवाब में Cache-Control: no-cache को जोड़ा हो. इसके साथ के लिए, दो अतिरिक्त रिस्पॉन्स हेडर में से किसी एक को सेट करने का सुझाव दिया जाता है: या Last-Modified या ETag. कॉन्टेंट बनाने index.html इस कैटगरी में आता है. इसे दो चरणों में बांटा जा सकता है.

सबसे पहले, Last-Modified और ETag हेडर, etag और lastModified कॉन्फ़िगरेशन के विकल्प. ये दोनों विकल्प असल में सभी के लिए, true को डिफ़ॉल्ट तौर पर सेट करते हैं एचटीटीपी रिस्पॉन्स, इसलिए इस मौजूदा सेटअप में आपके पास इसे पाने के लिए ऑप्ट-इन करने की सुविधा नहीं है व्यवहार. हालांकि, अपने कॉन्फ़िगरेशन में साफ़ तौर पर जानकारी दी जा सकती है.

दूसरा, आपको Cache-Control: no-cache हेडर में जानकारी जोड़नी होगी, लेकिन सिर्फ़ आपके एचटीएमएल दस्तावेज़ों के लिए (index.html, इस मामले में). सबसे आसान तरीका शर्त के साथ सेट यह हेडर कस्टम लिखने के लिए है setHeaders function उसके अंदर यह जांचें कि आने वाला अनुरोध एचटीएमएल दस्तावेज़ के लिए है या नहीं.

• प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.

server.js में स्टैटिक सेवा कॉन्फ़िगरेशन इस तरह से शुरू होता है:

app.use(express.static('public'));

• ऊपर बताए गए बदलाव करने पर, आपको कुछ ऐसा मिलेगा ऐसा दिखता है:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

अलग-अलग वर्शन वाले यूआरएल के लिए कैश मेमोरी हेडर कॉन्फ़िगर करें

ऐसे यूआरएल के अनुरोधों का जवाब देते समय जिनमें यह शामिल है "फ़िंगरप्रिंट" या वर्शन की जानकारी, और जिसकी सामग्री में कभी कोई बदलाव नहीं करना है. Cache-Control: max-age=31536000 आपके जवाबों के लिए. app.15261a07.js और style.391484cf.css इस कैटगरी में आते हैं.

सड़क के पार setHeaders function आखिरी चरण में इस्तेमाल किया गया था, तो अतिरिक्त लॉजिक जोड़कर यह देखा जा सकता है कि अनुरोध, वर्शन वाले यूआरएल के लिए है. अगर ऐसा है, तो Cache-Control: max-age=31536000 हेडर जोड़ें.

ऐसा करने का सबसे मज़बूत तरीका यह है कि रेगुलर एक्सप्रेशन यह देखने के लिए कि जिस ऐसेट का अनुरोध किया गया है वह किस तरह हैश किए जा सकते हैं. इस सैंपल प्रोजेक्ट के मामले में, यह हमेशा आठ होता है वर्णों के सेट में 0 से 9 तक के अंक और अंग्रेज़ी के छोटे अक्षर a-f के सेट शामिल हैं (यानी कि हैक्साडेसिमल वर्ण). हैश को हमेशा . वर्ण से अलग किया जाता है.

ऐसा रेगुलर एक्सप्रेशन जो उन सामान्य नियमों से मेल खाता है को new RegExp('\\.[0-9a-f]{8}\\.') के तौर पर दिखाया जा सकता है.

ध्यान दें: इन नियमों को बनाते समय, जितना हो सके सही और सटीक जानकारी देने से मदद मिलती है, ताकि आने वाले समय में समस्याएं न हों. अगर आप अपने प्रोजेक्ट में ज़्यादा, बिना वर्शन वाली JavaScript या सीएसएस एसेट जोड़ देते हैं, तो .js या .css फ़ाइल एक्सटेंशन की जांच करने जैसे सामान्य मैच की वजह से, आगे चलकर समस्या हो सकती है.

• setHeaders फ़ंक्शन में बदलाव करें, ताकि वह ऐसा दिखे:

app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

DevTools का इस्तेमाल करके, नए व्यवहार की पुष्टि करें

ध्यान दें: इस कोडलैब की मदद से, Chrome के DevTools में नेटवर्क पैनल के बारे में जाना जा सकता है.

स्थिर फ़ाइल सर्वर में किए गए बदलावों के साथ, आप DevTools नेटवर्क पैनल खुला होने पर, लाइव ऐप्लिकेशन की झलक देखकर पक्का करें कि सही हेडर सेट किए जा रहे हैं.

• साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन .

• ऐसे कॉलम कस्टमाइज़ करें जो पर राइट क्लिक करके, सबसे प्रासंगिक जानकारी शामिल करने के लिए नेटवर्क पैनल में दिखाया जा सकता है कॉलम हेडर:

यहां इन कॉलम पर ध्यान देना है: Name, Status, Cache-Control, ETag और Last-Modified.

• DevTools नेटवर्क पैनल खोलने के बाद, पेज को रीफ़्रेश करें.

पेज लोड होने के बाद, आपको नेटवर्क पैनल में जैसे:

पहली पंक्ति उस एचटीएमएल दस्तावेज़ की है जिस पर आपने नेविगेट किया है. यह सही है Cache-Control: no-cache के साथ काम करता है. उस अनुरोध के लिए एचटीटीपी रिस्पॉन्स की स्थिति एक 304 है. यह इसका मतलब है कि ब्राउज़र संचित एचटीएमएल को तुरंत इस्तेमाल नहीं करना चाहता, बल्कि Last-Modified और ETag का इस्तेमाल करके, वेब सर्वर को एचटीटीपी अनुरोध भेजा है देख सकते हैं कि क्या इसके पहले से मौजूद HTML में कोई अपडेट था उसे कैश मेमोरी में सेव करेगा. एचटीटीपी 304 रिस्पॉन्स से पता चलता है कि एचटीएमएल को अपडेट नहीं किया गया है.

ध्यान दें: Cache-Control: no-cache का मतलब यह नहीं है कि "कैश मेमोरी में सेव की गई कॉपी का कभी इस्तेमाल नहीं किया". इसका मतलब है कि "हमेशा सर्वर से संपर्क करें. साथ ही, अगर एचटीटीपी 304 रिस्पॉन्स मिलता है, तो कैश मेमोरी में सेव की गई कॉपी का इस्तेमाल करें."

अगली दो पंक्तियां, वर्शन-युक्त JavaScript और सीएसएस एसेट के लिए हैं. आपको ऐसा करना चाहिए उन्हें Cache-Control: max-age=31536000 के साथ प्रस्तुत किया जाता है और हर 200 है. इस्तेमाल किए गए कॉन्फ़िगरेशन की वजह से, Node.js सर्वर का इस्तेमाल करने और एंट्री पर क्लिक करने से, आपको ज़्यादा जानकारी दिखेगी, साथ ही, यह रिस्पॉन्स "(डिस्क की कैश मेमोरी से)" आया था.

ETag और आखिरी बदलाव वाले कॉलम की असली वैल्यू से कोई खास फ़र्क़ नहीं पड़ता. कॉन्टेंट बनाने यह पुष्टि करना ज़रूरी है कि वे सेट हो रहे हैं या नहीं.

खास जानकारी पाएं

इस कोडलैब के निर्देशों का पालन करने के बाद, अब आपको यह पता चल गया है कि Express का इस्तेमाल करके Node.js पर आधारित वेब सर्वर में एचटीटीपी रिस्पॉन्स हेडर को कॉन्फ़िगर करें, ताकि एचटीटीपी कैश मेमोरी का बेहतर इस्तेमाल किया जा सके. पुष्टि करने के लिए, आपको चरण भी बताए गए हैं कि कैश मेमोरी में डेटा सेव करने के काम करने के तरीके का इस्तेमाल किया जा रहा है. Chrome का DevTools.