ดีกว่าสำหรับทั้งผู้ใช้และนักพัฒนา
การรวมกลุ่มเป็นสิ่งที่ดีสำหรับผู้ใช้ แต่ทำให้เกิดฝันร้ายสำหรับนักพัฒนา เป็นเรื่องที่น่ารำคาญอย่างยิ่งที่ต้องพึ่งพา Bundlers ในระหว่างการพัฒนา ขออภัย การรวมกลุ่มไม่ได้เป็นทางเลือกเสมอไป ตัวอย่างเช่น นักพัฒนาที่ต้อง transpile จะต้องรวมกลุ่มกัน
การโหลดล่วงหน้าและการแคชโมดูลเป็นเทคนิคหลักสองประการที่ช่วยบรรเทานักพัฒนาของบันเดิลที่ใช้โดยไม่มีเหตุผลที่ถูกต้อง
ฉันได้อธิบายไปก่อนหน้านี้ถึงเหตุผลและผลที่โดดเด่นของการโหลดโมดูลล่วงหน้า
จะเกิดอะไรขึ้นหากโมดูลโหลดล่วงหน้าและแคชไว้ในแคชที่รีเฟรชอัตโนมัติเป็นปัจจุบัน
สำหรับการทดลองนี้ ฉันปรับหน้าเว็บตัวอย่างที่อธิบายไว้ใน โพสต์ก่อนหน้าเกี่ยวกับการโหลดล่วงหน้า
โดยสรุป ในระหว่างการเปรียบเทียบ ฉันจะวัดเวลาในการโหลดของแผนผังการพึ่งพาโมดูลที่ประกอบด้วย 255 โมดูล ต้นไม้ทดลองเป็นต้นไม้ไบนารีที่สมบูรณ์แบบซึ่งมี 8 ระดับประกอบด้วยโมดูล 1, 2, 4, 8, 16, 32, 64 และ 128 ตามลำดับ ก่อนที่เบราว์เซอร์จะทราบเกี่ยวกับโมดูลลีฟใดๆ เบราว์เซอร์ได้ส่งคำขอตามลำดับ 7 รายการเพื่อโหลดพาเรนต์ 7 รายการ ต้นไม้เป็นเพียงการทดลองมากกว่าในชีวิตจริง
เวลาในการโหลดของแผนผังโมดูลทั้งหมดวัดจากการตั้งค่าที่แตกต่างกันสี่แบบ:
- โมดูลไม่ได้ถูกโหลดล่วงหน้าและไม่ถูกแคช
- โมดูลถูกโหลดไว้ล่วงหน้าแต่ไม่ได้แคชไว้
- โมดูลไม่ได้ถูกโหลดล่วงหน้า แต่ถูกแคชไว้ในแคชที่รีเฟรชอัตโนมัติ
- โมดูลถูกโหลดไว้ล่วงหน้าและถูกแคชไว้ในแคชที่รีเฟรชอัตโนมัติ
ในหน้าตัวอย่าง เงื่อนไขทั้งสี่ที่ระบุไว้ข้างต้นจะแสดงด้วยแถว iframes สี่แถว หน้าเว็บจะค่อยๆ โหลด iframes ทีละหน้า — โหลด iframe ได้เพียงครั้งละ 1 หน้าเท่านั้น ในการคำนวณเวลาเฉลี่ยในการโหลดตัวแทนสำหรับการตั้งค่าแต่ละอย่าง จะมีการโหลด iframes สิบรายการลงในแต่ละแถว
โมดูลที่โหลดโดย iframes แต่ละประเภทจะแตกต่างกันเฉพาะในส่วนหัวการตอบกลับเท่านั้น โมดูลที่ไม่ควรถูกแคชจะให้บริการด้วย Cache-control: no-store, max-age=0 ในขณะที่โมดูลที่แคชไว้จะให้บริการด้วย Cache-Control: stale-while-revalidate=604800
ผลลัพธ์
คุณสามารถดูผลลัพธ์ได้ในหน้าตัวอย่าง https://preloadandcache.onrender.com/
โปรดทราบว่าโมดูลที่แคชไว้จะถูกจัดเก็บไว้ในแคชที่รีเฟรชโดยอัตโนมัติ ฉันคิดว่ามันเป็นฟีเจอร์ที่เป็นมิตรกับโมดูลที่ยอดเยี่ยมมาก ดูว่าจะเกิดอะไรขึ้นเมื่อฉันเปลี่ยนโค้ดเล็กน้อยใน module1.js ทั้งสี่อันเพื่อให้เอาต์พุตเปลี่ยนแปลงอย่างชัดเจน ด้วยรหัสที่อัปเดต แต่ละ iframe จะแสดงเป็นมิลลิวินาทีตามด้วยเครื่องหมายดอกจัน:
import val2 from './module2.js';
import val3 from './module3.js';
const total=Date.now()-t0;
document.querySelector('div').replaceChildren(total+"*" );
window.parent.postMessage(total,"*");
console.log(val2+val3);
คุณได้อธิบายรหัสไว้ในโพสต์ข้างต้น แต่คุณไม่จำเป็นต้องเข้าใจมากไปกว่าในเวอร์ชันใหม่ของหน้า ตัวเลขจะตามหลังด้วย * ดังนั้นฉันจึงปรับใช้เวอร์ชันใหม่ของเพจและโหลดซ้ำในเบราว์เซอร์:
ดี? โมดูลที่แคชไว้จะให้บริการจากแคช แต่หลังจากจัดเตรียมโมดูลแล้ว เบราว์เซอร์จะตรวจสอบกับเซิร์ฟเวอร์ว่าโมดูลที่ใช้เป็นเวอร์ชันล่าสุดหรือไม่ หากล้าสมัย แคชจะโหลดเวอร์ชันล่าสุดจากเซิร์ฟเวอร์
ข้อสรุป
การโหลดโมดูลล่วงหน้าจะช่วยลดเวลาในการโหลดหน้าเว็บในการเข้าชมครั้งแรกได้อย่างมาก หากโมดูลถูกแคชไว้ การโหลดล่วงหน้าเมื่อเข้าชมหน้าเว็บในภายหลังจะช่วยลดเวลาในการโหลดหน้าเว็บลงเล็กน้อยเท่านั้น
ฉันเชื่อว่าการเข้าชมครั้งแรกถือได้ว่าเป็นการติดตั้งแอปพลิเคชัน ซึ่งผู้ใช้ทุกคนรู้ว่าควรใช้เวลาพอสมควร หากแอปพลิเคชันไม่มีประโยชน์ การโหลดครั้งแรกอย่างรวดเร็วจะไม่ช่วยอะไรมาก อย่างไรก็ตาม การโหลดโมดูลล่วงหน้านั้นใช้งานง่ายมาก แม้แต่การโหลดหน้าเว็บครั้งแรกก็ควรจะทำให้เร็วขึ้นด้วย
สามารถดาวน์โหลดโค้ดตัวอย่างได้จาก https://github.com/marianc000/preloadCache
เนื้อหาเพิ่มเติมได้ที่ plainenglish.io
