यह कोडलैब आपको दिखाता है कि Node.js पर आधारित वेब सर्वर, जो एक्सप्रेस चला रहा है फ़्रेमवर्क शामिल है. इसमें यह भी दिखाया जाएगा कि कैसे पुष्टि करें कि आपके कैश मेमोरी में कितनी गतिविधि हो रही है Chrome के DevTools में नेटवर्क पैनल का इस्तेमाल करके, असल में लागू किया जा रहा है.
सैंपल प्रोजेक्ट के बारे में जानें
यहां कुछ मुख्य फ़ाइलें दी गई हैं, जिनके साथ आपको सैंपल प्रोजेक्ट में काम करना है:
server.jsमें Node.js कोड होता है, जो वेब ऐप्लिकेशन के कॉन्टेंट. यह एचटीटीपी अनुरोधों को हैंडल करने के लिए एक्सप्रेस का इस्तेमाल करता है और जवाब शामिल हैं. खास तौर पर,express.static()का इस्तेमाल उन सभी लोकल फ़ाइलों को सार्वजनिक डायरेक्ट्री में सेव करेगा, ताकिserve-staticदस्तावेज़ आपके काम में मदद मिलेगी.public/index.html, वेब ऐप्लिकेशन का एचटीएमएल है. ज़्यादातर HTML फ़ाइलों की तरह, इसमें उसके URL के हिस्से के रूप में कोई भी वर्शन जानकारी शामिल नहीं होनी चाहिए.public/app.15261a07.jsऔरpublic/style.391484cf.cssवेब ऐप्लिकेशन की JavaScript हैं और सीएसएस ऐसेट शामिल करें. इन फ़ाइलों के यूआरएल में एक हैश शामिल होता है, जो उनके कॉन्टेंट के हिसाब से सही होते हैं. इन्हें जारी रखने की ज़िम्मेदारीindex.htmlकी है किस वर्शन वाले यूआरएल को लोड करना है.
हमारे एचटीएमएल के लिए, कैश मेमोरी हेडर कॉन्फ़िगर करना
जिन यूआरएल में वर्शन की जानकारी नहीं है उनके लिए किए गए अनुरोधों का जवाब देते समय,
पक्का करें कि आपने अपने जवाब में 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}\\.') के तौर पर दिखाया जा सकता है.
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 का इस्तेमाल करके, नए व्यवहार की पुष्टि करें
स्थिर फ़ाइल सर्वर में किए गए बदलावों के साथ, आप DevTools नेटवर्क पैनल खुला होने पर, लाइव ऐप्लिकेशन की झलक देखकर पक्का करें कि सही हेडर सेट किए जा रहे हैं.
साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
.ऐसे कॉलम कस्टमाइज़ करें जो पर राइट क्लिक करके, सबसे प्रासंगिक जानकारी शामिल करने के लिए नेटवर्क पैनल में दिखाया जा सकता है कॉलम हेडर:
यहां इन कॉलम पर ध्यान देना है: Name, Status, Cache-Control,
ETag और Last-Modified.
- DevTools नेटवर्क पैनल खोलने के बाद, पेज को रीफ़्रेश करें.
पेज लोड होने के बाद, आपको नेटवर्क पैनल में जैसे:
पहली पंक्ति उस एचटीएमएल दस्तावेज़ की है जिस पर आपने नेविगेट किया है. यह सही है
Cache-Control: no-cache के साथ काम करता है. उस अनुरोध के लिए एचटीटीपी रिस्पॉन्स की स्थिति
एक 304 है. यह
इसका मतलब है कि ब्राउज़र संचित एचटीएमएल को तुरंत इस्तेमाल नहीं करना चाहता, बल्कि
Last-Modified और ETag का इस्तेमाल करके, वेब सर्वर को एचटीटीपी अनुरोध भेजा है
देख सकते हैं कि क्या इसके पहले से मौजूद HTML में कोई अपडेट था
उसे कैश मेमोरी में सेव करेगा. एचटीटीपी 304 रिस्पॉन्स से पता चलता है कि एचटीएमएल को अपडेट नहीं किया गया है.
अगली दो पंक्तियां, वर्शन-युक्त JavaScript और सीएसएस एसेट के लिए हैं. आपको ऐसा करना चाहिए
उन्हें Cache-Control: max-age=31536000 के साथ प्रस्तुत किया जाता है और
हर 200 है.
इस्तेमाल किए गए कॉन्फ़िगरेशन की वजह से,
Node.js सर्वर का इस्तेमाल करने और एंट्री पर क्लिक करने से, आपको ज़्यादा जानकारी दिखेगी,
साथ ही, यह रिस्पॉन्स "(डिस्क की कैश मेमोरी से)" आया था.
ETag और आखिरी बदलाव वाले कॉलम की असली वैल्यू से कोई खास फ़र्क़ नहीं पड़ता. कॉन्टेंट बनाने यह पुष्टि करना ज़रूरी है कि वे सेट हो रहे हैं या नहीं.
खास जानकारी पाएं
इस कोडलैब के निर्देशों का पालन करने के बाद, अब आपको यह पता चल गया है कि Express का इस्तेमाल करके Node.js पर आधारित वेब सर्वर में एचटीटीपी रिस्पॉन्स हेडर को कॉन्फ़िगर करें, ताकि एचटीटीपी कैश मेमोरी का बेहतर इस्तेमाल किया जा सके. पुष्टि करने के लिए, आपको चरण भी बताए गए हैं कि कैश मेमोरी में डेटा सेव करने के काम करने के तरीके का इस्तेमाल किया जा रहा है. Chrome का DevTools.