ब्राउज़रों में कैश की समस्या

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

कैशिंग उपयोगी है। यह बनाई गई है साइट की लोडिंग स्पीड बढ़ाने के लिए। आखिरकार, ब्राउज़र के लिए फाइल लेना तेज होता है अपने स्टोरेज से, बजाय हर बार डाउनलोड करने के इसे इंटरनेट से।

हालाँकि, गति के लिए कीमत चुकानी पड़ती है विकास के दौरान असुविधा। बात यह है, कि यदि आप अपने कोड में कुछ बदलते हैं और फिर परिवर्तन होस्ट पर अपलोड करें - आपकी साइट पर आने वाले सभी उपयोगकर्ता कोड की पुरानी कैश्ड कॉपी रखेंगे।

समस्या का पहला समाधान

इस व्यवहार से निपटने के लिए हर बार बदली हुई फाइलों का नाम बदलना होगा। व्यवहार में यह सुविधाजनक नहीं है, इसलिए एक चालाक तरीका इस्तेमाल किया जाता है। इसका सार यह है, कि फाइल को कनेक्ट करते समय नाम के बाद फाइल के प्रश्न चिह्न, बराबर चिह्न और आपकी स्क्रिप्ट का संस्करण नंबर लगाया जाता है। ऐसी संरचना को GET पैरामीटर कहा जाता है।

फाइल के नाम में GET पैरामीटर की उपस्थिति "खराब नहीं करती" सर्वर के दृष्टिकोण से पथ, अभी भी उसी फाइल की ओर इशारा करते हुए। लेकिन ब्राउज़र के दृष्टिकोण से GET पैरामीटर बदलने से ब्राउज़र को फाइल का पथ बदला हुआ समझ आता है और फाइल को फिर से डाउनलोड करता है।

कैश से निपटने के लिए, जब आप परिवर्तन करते हैं आपकी कोड फाइल में, आपको इकाई द्वारा बढ़ाना होगा GET पैरामीटर का मान। आवेदन का उदाहरण देखें ऐसे दृष्टिकोण का:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.css?v=1">
		<script src="script.js?v=1"></script>
	</head>
	<body>
		
	</body>
</html>

समस्या का दूसरा समाधान

एक और अधिक उन्नत दृष्टिकोण भी मौजूद है। यह इस तथ्य में निहित है कि फाइलों के नाम में यादृच्छिक स्ट्रिंग जोड़े जाते हैं, उदाहरण के लिए, इस तरह:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
		<script src="script.1d12c304c284a752cb9a.js"></script>
	</head>
	<body>
		
	</body>
</html>

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

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