การรีเซ็ตแคชอัตโนมัติใน React build

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

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

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

เราสามารถสังเกตแฮชของไฟล์ได้ เมื่อเชื่อมต่อไฟล์ใน index.html: