Masalah Cache di Browser

Browser mencache file CSS, JavaScript, dan gambar yang terhubung. Caching berarti bahwa file yang terhubung hanya diunduh oleh browser saat pengguna pertama kali mengunjungi situs. Pada kunjungan berikutnya, file-file ini tidak akan diunduh lagi, melainkan diambil dari cache browser.

Caching berguna. Itu dibuat untuk meningkatkan kecepatan pemuatan situs. Karena lebih cepat bagi browser untuk mengambil file dari penyimpanannya sendiri daripada mengunduhnya setiap kali dari internet.

Namun, kecepatan harus dibayar dengan ketidaknyamanan selama pengembangan. Masalahnya adalah, jika Anda mengubah sesuatu dalam kode Anda dan kemudian mempublikasikan perubahan ke hosting - semua pengguna yang pernah mengunjungi situs Anda akan memiliki salinan kode cache yang lama.

Solusi pertama untuk masalah ini

Untuk mengatasi perilaku ini, setiap file yang diubah perlu diubah namanya setiap kali. Dalam praktiknya, ini tidak nyaman, jadi sebuah trik pintar digunakan. Intinya adalah bahwa saat menghubungkan file, setelah nama file kita beri tanda tanya, sama dengan, dan nomor versi skrip Anda. Konstruksi seperti ini disebut parameter GET.

Keberadaan parameter GET dalam nama file "tidak merusak" path dari sudut pandang server, tetap menunjuk ke file yang sama. Tetapi dari sudut pandang browser, perubahan parameter GET memaksa browser menganggap path file telah berubah dan mengunduh file lagi.

Untuk melawan cache, ketika Anda membuat perubahan pada file kode Anda, Anda perlu menambah nilai parameter GET sebanyak satu. Lihat contoh penerapan pendekatan serupa:

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

Solusi kedua untuk masalah ini

Ada juga pendekatan yang lebih maju. Ini terdiri dari menambahkan string acak ke nama file, misalnya, 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>

String ini disebut hash. Hash mewakili string unik. Itu dihitung dari konten file dengan cara khusus. Ini berarti bahwa setiap teks sesuai dengan hash uniknya sendiri. Jika teks file diubah, maka hash-nya akan berbeda dan kita perlu mengubahnya dalam nama file.

Tentu saja, menghitung hash secara manual dan mengganti nama file adalah kegiatan yang tidak menyenangkan. Oleh karena itu, pendekatan ini hanya digunakan jika kita memiliki beberapa alat yang memungkinkan untuk secara otomatis menghitung hash dan mengganti nama file, serta mengubah nama file menjadi yang baru dalam file HTML. Webpack memungkinkan semua ini dilakukan. Kita akan mempelajarinya sepanjang tutorial ini.