Masalah Cache dalam Pelayar

Pelayar meng-cache fail CSS, JavaScript dan imej yang disambungkan. Caching bermaksud fail yang disambungkan hanya dimuat turun oleh pelayar pada kali pertama pengguna melawat tapak web. Pada lawatan berikutnya, fail-fail ini tidak akan dimuat turun lagi, sebaliknya diambil dari cache pelayar.

Caching adalah berguna. Ia dicipta untuk meningkatkan kelajuan muat turun tapak web. Ini kerana lebih pantas untuk pelayar mengambil fail dari storannya sendiri berbanding memuat turun fail tersebut dari internet setiap kali.

Walau bagaimanapun, kelajuan ini datang dengan harga ketidakselesaan semasa pembangunan. Masalahnya ialah, jika anda menukar sesuatu dalam kod anda dan kemudian menyiarkan perubahan ke hos - semua pengguna yang telah melawat tapak web anda akan mempunyai salinan kod cache yang lama.

Penyelesaian Pertama Masalah

Untuk menangani tingkah laku ini, setiap fail yang diubah perlu dinamakan semula setiap kali. Dalam amalan, ini tidak menyenangkan, jadi satu helah pintar digunakan. Intipatinya ialah, apabila menyambung fail, selepas nama fail kita letakkan tanda soal, tanda sama dan nombor versi skrip anda. Konstruksi sedemikian dipanggil parameter GET.

Kehadiran parameter GET dalam nama fail "tidak merosakkan" laluan dari sudut pelayan, masih menunjuk ke fail yang sama. Tetapi dari sudut pelayar, menukar parameter GET memaksa pelayar menganggap laluan ke fail telah berubah dan memuat turun fail semula.

Untuk menangani cache, apabila anda membuat perubahan dalam fail kod anda, anda perlu menambah nilai parameter GET sebanyak satu. Lihat contoh penggunaan pendekatan sedemikian:

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

Penyelesaian Kedua Masalah

Terdapat juga pendekatan yang lebih maju. Ia terdiri daripada menambah rentetan rawak pada nama fail, contohnya, seperti ini:

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

Rentetan ini dipanggil hash. Hash mewakili rentetan unik. Ia dikira dari kandungan fail dengan cara yang khusus. Ini bermakna setiap teks sepadan dengan hash uniknya sendiri. Jika teks fail telah diubah, maka hashnya akan berbeza dan kita perlu menukarnya dalam nama fail.

Sudah tentu, mengira hash secara manual dan menamakan semula fail adalah kerja yang tidak menyenangkan. Oleh itu, pendekatan ini hanya digunakan jika kita mempunyai beberapa alat yang membolehkan pengiraan hash secara automatik dan menamakan semula fail, serta menukar nama fail kepada yang baharu dalam fail HTML. Semua ini boleh dilakukan oleh Webpack. Kita akan mempelajarinya sepanjang keseluruhan tutorial ini.