HTML Academy · บทเรียน

การนำเข้าแบบไดนามิกในโมดูล

โหลดโมดูลตามต้องการด้วยการนำเข้าแบบไดนามิก import()

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

นิพจน์ import()

ต่างจากการประกาศ import แบบคงที่ import("./module.js") เป็นนิพจน์ที่คืนค่า Promise ซึ่งจะแก้ไขเป็นเนมสเปซของโมดูล ใช้ได้ทุกที่ ทั้งภายในฟังก์ชัน เงื่อนไข หรือแม้แต่ภายในสคริปต์ที่ไม่ใช่โมดูล

การแบ่งโค้ด

การนำเข้าแบบไดนามิกเป็นกลไกหลักสำหรับแบ่งโค้ด ตัวจัดการเส้นทางสามารถเลื่อนการโหลดโค้ดของเส้นทางนั้นจนกว่าผู้ใช้จะเปลี่ยนไปยังเส้นทางดังกล่าว: const mod = await import("./routes/admin.js") ไบต์ของเส้นทางจะไม่ถูกดาวน์โหลดจนกว่าจะจำเป็น

document.getElementById("settings-btn").addEventListener("click", async () => {
  const { renderSettings } = await import("./settings.js");
  renderSettings();
});

เนมสเปซโมดูลที่ส่งคืน

ค่าที่แก้ไขแล้วคือเนมสเปซของโมดูล ซึ่งเป็นอ็อบเจ็กต์ที่มีการส่งออกของโมดูลเป็นคุณสมบัติ คุณสามารถแยกการส่งออกแบบมีชื่อออกมาได้โดยตรง หรือเข้าถึงการส่งออกเริ่มต้นผ่าน module.default

การดักจับข้อผิดพลาด

เนื่องจาก import() คืนค่าเป็นพรอมิส ข้อผิดพลาดจากการดึงข้อมูลที่ล้มเหลวหรือข้อผิดพลาดทางไวยากรณ์จึงส่งต่อไปยัง .catch() ให้ห่อการนำเข้าแบบไดนามิกด้วย try/catch (ในฟังก์ชันแบบไม่พร้อมกัน) หรือใช้ .catch() เพื่อจัดการความล้มเหลวของเครือข่ายอย่างเหมาะสม

try {
  const mod = await import("./optional.js");
  mod.run();
} catch (e) {
  console.warn("Optional module failed", e);
}

การโหลดตามเงื่อนไข

โหลดชุดเติมความสามารถเฉพาะในเบราว์เซอร์รุ่นเก่า: if (!window.IntersectionObserver) await import("intersection-observer-polyfill") เบราว์เซอร์สมัยใหม่จะข้ามไบต์เหล่านี้ทั้งหมด ส่วนเบราว์เซอร์รุ่นเก่าจะรับภาระเฉพาะเมื่อจำเป็น

การแก้ไขตัวระบุ

ตัวระบุใช้กฎเดียวกับการนำเข้าแบบคงที่ ได้แก่ URL แบบสัมพัทธ์ URL แบบสัมบูรณ์ หรือชื่อเปล่าที่แมปผ่านแผนที่การนำเข้า นอกจากนี้ยังใช้สตริงแบบไดนามิกได้ด้วย: import(`./locales/${lang}.js`) แม้เครื่องมือรวมชุดอาจมีปัญหาในการแบ่งโค้ดลักษณะนี้

การแคช

ตัวระบุที่ไม่ซ้ำกันแต่ละตัวจะถูกแก้ไขเป็นอินสแตนซ์โมดูลเดียวกัน การเรียก import("./mod.js") ครั้งที่สองจะคืนค่าโมดูลที่โหลดไว้แล้วโดยไม่ต้องเดินทางไปยังเครือข่ายอีกครั้ง ทำให้ใช้การนำเข้าแบบไดนามิกในตัวจัดการเหตุการณ์ได้อย่างปลอดภัยโดยไม่ต้องกังวลเรื่องการดาวน์โหลดซ้ำ

การนำเข้าแบบไดนามิกระดับบนสุด

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

// module.js
const { plugin } = await import(`./plugins/${process.env.PLUGIN}.js`);
plugin.init();

ใช้กับ React.lazy และ Preact

React.lazy, `lazy` จาก preact/compat ของ Preact และ defineAsyncComponent ของ Vue ล้วนห่อการนำเข้าแบบไดนามิกเพื่อแบ่งโค้ดในระดับคอมโพเนนต์ พื้นฐานของเบราว์เซอร์คือ import() ส่วนกรอบงานจะเพิ่มขอบเขตการโหลดที่ทำงานคล้าย suspense ไว้ด้านบน

การแบ่งโค้ดด้วย Webpack และ Vite

เครื่องมือรวมชุดจะเห็น import("...") ในซอร์ส และสร้างชังก์แยกสำหรับโมดูลที่นำเข้า ตัวช่วยขณะทำงานจะดึงชังก์เมื่อมีการเรียกใช้ครั้งแรก ผู้เขียนเขียน import() ตามข้อกำหนด ES ส่วนเครื่องมือรวมชุดจะจัดการลำดับการสื่อสารกับเครือข่ายให้

ข้อผิดพลาดที่พบบ่อย

การเรียก import("X") ในเส้นทางการทำงานที่เกิดขึ้นบ่อย (เช่น ภายในลูปการเรนเดอร์) จะตรวจสอบแคชซ้ำทุกครั้ง แม้จะไม่ดาวน์โหลดซ้ำ แต่การค้นหาก็มีต้นทุนอยู่บ้าง ให้เก็บเนมสเปซที่แก้ไขแล้วไว้ในตัวแปรหลังการนำเข้าครั้งแรก

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

import("./mod.js") คืนค่าอะไร

สรุป

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

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

บทเรียน “การนำเข้าแบบไดนามิกในโมดูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การนำเข้าแบบไดนามิกในโมดูล”

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

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

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

บทเรียน “การนำเข้าแบบไดนามิกในโมดูล” ใช้เวลานานแค่ไหน

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

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

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

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

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