ชุดรวม แคช และคำแนะนำการโหลดล่วงหน้า

เป้าหมาย: ส่งมอบบันเดิลที่มีขนาดเล็กลงและให้เบราว์เซอร์แคชบันเดิลเหล่านั้นได้อย่างปลอดภัย

• ชื่อไฟล์ที่มีแฮชจากเนื้อหา
• แคชที่เปลี่ยนแปลงไม่ได้สำหรับทรัพยากร
• HTML มีอายุสั้น

• ชื่อไฟล์ที่มีแฮช: app.3f2a1.js
• Cache-Control: max-age=31536000, immutable
• HTML: TTL สั้น (เช่น no-store หรือไม่กี่นาที)
• แบ่งโค้ดที่ใช้งานไม่บ่อย

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

โหลดรูปภาพล่วงหน้าก่อนแสดง เมื่อสลับไปดู รูปภาพจะแสดงทันทีจากแคช

• โหลดล่วงหน้า: ลำดับความสำคัญสูงสำหรับทรัพยากรที่จำเป็นในเวลาอันใกล้
• ดึงข้อมูลล่วงหน้า: ลำดับความสำคัญต่ำสำหรับทรัพยากรที่คาดว่าจะต้องใช้ภายหลัง
• ใช้อย่างพอเหมาะเพื่อหลีกเลี่ยงการแย่งใช้เครือข่าย

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

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