ბრაუზერებში ქეშის პრობლემა

ბრაუზერი ქეშირებს დაკავშირებულ 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-ს. ამას ვისწავლით მთელი სახელმძღვანელოს მანძილზე.