ব্রাউজারে ক্যাশ সমস্যা

ব্রাউজার ক্যাশ করে সংযুক্ত 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 ফাইলগুলোতে নতুন ফাইলের নামগুলোও পরিবর্তন করতে দেয়। এই সবই ওয়েবপ্যাক করতে দেয়। এই পুরো টিউটোরিয়াল জুড়ে আমরা এটি শিখব।