ปัญหาเกี่ยวกับแคชในเบราว์เซอร์

เบราว์เซอร์แคชไฟล์ที่เชื่อมต่อไว้ เช่น สไตล์ชีต CSS, สคริปต์ JavaScript และรูปภาพ การแคชหมายความว่าเบราว์เซอร์จะดาวน์โหลดไฟล์ที่เชื่อมต่อไว้ก็ต่อเมื่อผู้ใช้เข้าเว็บไซต์เป็นครั้งแรกเท่านั้น ในการเข้าเว็บไซต์ครั้งต่อๆ ไป ไฟล์เหล่านี้จะไม่ถูกดาวน์โหลดอีก แต่จะถูกนำมาจากแคชของเบราว์เซอร์

การแคชมีประโยชน์ มันถูกสร้างขึ้นเพื่อเพิ่มความเร็วในการโหลดเว็บไซต์ เพราะสำหรับเบราว์เซอร์แล้ว การนำไฟล์จากที่เก็บของตัวเองเร็วกว่าการดาวน์โหลดมันจากอินเทอร์เน็ตทุกครั้ง

อย่างไรก็ตาม ความเร็วต้องแลกมาด้วยความไม่สะดวกในการพัฒนา ประเด็นคือ หากคุณเปลี่ยนแปลงบางอย่างในโค้ดของคุณแล้วนำการเปลี่ยนแปลงไปวางบนโฮสติ้ง ผู้ใช้ทั้งหมดที่เคยเข้าเว็บไซต์ของคุณแล้วจะยังมีสำเนาโค้ดเก่าที่ถูกแคชไว้

วิธีแก้ปัญหาแรก

เพื่อต่อสู้กับพฤติกรรมเช่นนี้ จำเป็นต้องเปลี่ยนชื่อไฟล์ที่ถูกแก้ไขทุกครั้ง ในทางปฏิบัติสิ่งนี้ไม่สะดวก จึงมีการใช้เทคนิคที่ฉลาด แก่นของมันอยู่ที่ว่าเมื่อเชื่อมต่อไฟล์ หลังชื่อไฟล์เราจะใส่เครื่องหมายคำถาม เครื่องหมายเท่ากับ และหมายเลขเวอร์ชันของสคริปต์ของคุณ โครงสร้างดังกล่าวเรียกว่าพารามิเตอร์ GET

การที่มีพารามิเตอร์ GET ในชื่อไฟล์จะ "ไม่ทำลาย" path จากมุมมองของเซิร์ฟเวอร์ ยังคงชี้ไปที่ไฟล์เดิม แต่จากมุมมองของเบราว์เซอร์ การเปลี่ยนแปลงพารามิเตอร์ GET ทำให้เบราว์เซอร์พิจารณาว่า path ไปยังไฟล์มีการเปลี่ยนแปลงและดาวน์โหลดไฟล์ใหม่

เพื่อต่อสู้กับแคช เมื่อคุณทำการเปลี่ยนแปลงในไฟล์โค้ดของคุณ คุณจะต้องเพิ่มค่าของพารามิเตอร์ 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 สามารถทำได้ เราจะเรียนรู้สิ่งนี้ตลอดทั้งตำราเรียน