HTML Academy · บทเรียน

คำใบ้ทรัพยากร modulepreload

โหลดโมดูล ES ล่วงหน้าเพื่อให้ JavaScript เริ่มทำงานเร็วขึ้น

คำใบ้ทรัพยากร modulepreload เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงมี modulepreload

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

modulepreload ทำอะไร

<link rel="modulepreload" href="/app.js"> แจ้งให้เบราว์เซอร์ดึงข้อมูลโมดูล รวมถึงโมดูลที่ถูกนำเข้าต่อเนื่องทั้งหมดในทันทีและแบบขนาน เมื่อ <script type="module"> เริ่มทำงาน กราฟทั้งหมดก็อยู่ในแคชแล้ว

เปรียบเทียบกับ preload

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

<link rel="modulepreload" href="/app.js">
<script type="module" src="/app.js"></script>

ควรวางไว้ที่ใด

วางไว้ใน <head> ให้เร็วที่สุด เบราว์เซอร์จะเริ่มคำขอโหลดล่วงหน้าทันทีและยังคงแยกวิเคราะห์ HTML ต่อไป เมื่อพบ <script type="module"> ที่ตรงกันในภายหลังของเอกสาร ไฟล์นั้นก็อยู่ในหน่วยความจำแล้ว

การค้นพบและการเดินตามกราฟ

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

ใช้ร่วมกับเครื่องมือรวมชุด

เครื่องมือรวมชุดสมัยใหม่ (Vite, Rollup, Webpack 5+) จะสร้างแท็ก modulepreload สำหรับชังก์ที่แบ่งโค้ดโดยอัตโนมัติ สำหรับแอปพลิเคชันที่สร้างเอง ควรสร้างแท็กเหล่านี้จากกราฟการนำเข้าระหว่างการสร้าง เพื่อให้รายการถูกต้องอยู่เสมอเมื่อมีการเพิ่มหรือลบโมดูล

ข้อควรพิจารณาเกี่ยวกับ CrossOrigin

สำหรับการโหลดโมดูลล่วงหน้าจากข้ามต้นทาง ให้ใส่ crossorigin="anonymous" ซึ่งสอดคล้องกับโหมดการดึงข้อมูลเริ่มต้นของ <script type="module"> ทำให้สามารถนำสำเนาที่โหลดล่วงหน้ากลับมาใช้ได้ แทนที่จะดึงข้อมูลใหม่โดยไม่มีส่วนหัว CORS

การรองรับของเบราว์เซอร์

modulepreload รองรับใน Chrome, Edge, Safari และ Firefox รุ่นใหม่ ใน Firefox รุ่นเก่าจะถูกเพิกเฉยอย่างเงียบ ๆ โมดูลยังคงทำงานได้ เพียงไม่ได้ประโยชน์จากการโหลดล่วงหน้า ไม่จำเป็นต้องใช้โพลีฟิลล์ กรณีที่แย่ที่สุดคือการโหลดช้าลงเล็กน้อยในเบราว์เซอร์รุ่นเก่า

จำกัดขนาดของกราฟ

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

ใช้ร่วมกับคำใบ้อื่น

สำหรับรูปภาพและแบบอักษรที่อยู่ใน head เดียวกัน สามารถใช้ร่วมกันได้อย่างอิสระ: ใช้ preconnect สำหรับเครือข่ายจัดส่งเนื้อหาของบุคคลที่สาม, preload สำหรับแบบอักษรสำคัญ, modulepreload สำหรับโมดูลเริ่มต้น และ prefetch สำหรับทรัพยากรของหน้าถัดไป คำใบ้เหล่านี้ไม่รบกวนกัน

การตรวจสอบ

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

ตรวจสอบความรู้

modulepreload ทำสิ่งใดที่ preload ปกติของไฟล์โมดูลเดียวกันทำไม่ได้

สรุป

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

คำถามที่พบบ่อย

บทเรียน “คำใบ้ทรัพยากร modulepreload” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คำใบ้ทรัพยากร modulepreload” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คำใบ้ทรัพยากร modulepreload”

โหลดโมดูล ES ล่วงหน้าเพื่อให้ JavaScript เริ่มทำงานเร็วขึ้น คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “คำใบ้ทรัพยากร modulepreload” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy