Tarayıcılarda Önbellek Sorunu

Tarayıcı, bağlanan CSS stil dosyalarını, JavaScript betiklerini ve resimleri önbelleğe alır. Önbelleğe alma, bağlı dosyaların kullanıcı siteye ilk girdiğinde sadece o zaman indirildiği anlamına gelir. Sonraki girişlerde bu dosyalar tekrar indirilmeyecek, tarayıcının önbelleğinden alınacaktır.

Önbelleğe alma faydalıdır. Web sitesinin yüklenme hızını artırmak için oluşturulmuştur. Sonuçta tarayıcının bir dosyayı kendi deposundan alması, her seferinde internetten indirmesinden daha hızlıdır.

Ancak, hızın bedeli geliştirme sırasında rahatsızlıkla ödenir. Mesele şu ki, eğer kodunuzda bir değişiklik yaparsanız ve ardından bu değişiklikleri hosting'e yüklerseniz - sitenize zaten daha önce girmiş olan tüm kullanıcılar eski önbelleğe alınmış kod kopyasına sahip olacaklar.

Sorunun İlk Çözümü

Bu davranışla mücadele etmek için değiştirilen dosyaları her seferinde yeniden adlandırmak gerekir. Pratikte bu uygun olmadığından akıllıca bir yöntem kullanılır. Özü, dosyayı bağlarken dosya adından sonra soru işareti, eşittir işareti ve betiğinizin sürüm numarası konulmasıdır. Bu yapıya GET parametresi denir.

Dosya adında GET parametresinin bulunması, sunucu açısından yolu "bozmaz", yine aynı dosyayı işaret eder. Ancak tarayıcı açısından GET parametresinin değiştirilmesi, tarayıcıyı dosya yolunun değiştiğini düşünmeye ve dosyayı yeniden indirmeye zorlar.

Kod dosyanızda değişiklik yaptığınızda önbellekle mücadele etmek için, GET parametresinin değerini bir birim artırmanız gerekecek. Benzer bir yaklaşımın uygulama örneğine bakın:

<!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>

İkinci Çözüm

Daha gelişmiş bir yaklaşım da mevcuttur. Bu yaklaşım, dosya adlarına rastgele dizelerin eklenmesinden oluşur, örneğin, şu şekilde:

<!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>

Bu dizelere hash (özet) denir. Hash, benzersiz bir dizedir. Özel bir şekilde dosyanın içeriğinden hesaplanır. Bu, her metnin kendi benzersiz hash'ine karşılık geldiği anlamına gelir. Eğer dosyanın metni değiştirilmişse, onun hash'i de farklı olacaktır ve bizim onu dosya adında değiştirmemiz gerekecektir.

Elbette, hash'leri elle hesaplamak ve dosyaları bu şekilde yeniden adlandırmak hiç iyi bir uğraş değil. Bu nedenle bu yaklaşım, sadece hash'leri otomatik olarak hesaplayıp dosyaları yeniden adlandıran ve ayrıca HTML dosyalarındaki dosya adlarını yeni olanlarla değiştiren bir aracımız olduğu durumda kullanılır. Tüm bunları Webpack yapmamızı sağlar. Bunun üzerine tüm eğitim boyunca öğreneceğiz.