โหลดไฟล์ JavaScript แบบไดนามิก (Dynamic Script Loading)

การโหลดสคริปต์แบบไดนามิก (Lazy Loading) สร้าง <script> element ด้วย document.createElement() ตั้งค่า src แล้ว append เข้า <head> หรือ <body> ใช้สำหรับโหลดโค้ดเฉพาะตอนต้องการ (Code Splitting) ลดขนาด Initial Bundle

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Dynamic Script Loading</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; }
  </style>
</head>
<body>
  <h1>โหลด JavaScript ไฟล์แบบไดนามิก</h1>
  <div style="color: green;" class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>กดปุ่มเพื่อโหลด External JavaScript (sample.js)</h3>
  <script>
    const resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
      const script = document.createElement("script");
      script.src = "sample.js";
      script.onload = () => {
        resEle.textContent += " โหลดสำเร็จ!";
        resEle.style.color = "green";
      };
      script.onerror = () => {
        resEle.textContent = " โหลดล้มเหลว!";
        resEle.style.color = "red";
      };
      document.head.appendChild(script);
    });
  </script>
</body>
</html>

sample.js (External)

// sample.js
const resEle = document.querySelector(".result");
resEle.textContent = "JavaScript ถูกโหลดแบบไดนามิกแล้ว";

ผลลัพธ์

เมื่อกดปุ่ม "คลิกที่นี่":

รูปแบบการโหลดแบบไดนามิก

// 1. Basic (เหมือนตัวอย่าง)
function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}
// ใช้งาน
loadScript("module.js").then(() => console.log("Loaded"));

// 2. ES Module (type="module")
function loadModule(src) {
  const script = document.createElement("script");
  script.type = "module";
  script.src = src;
  document.head.appendChild(script);
  return new Promise((resolve, reject) => {
    script.onload = resolve;
    script.onerror = reject;
  });
}

// 3. Preload + Dynamic Import (Modern)
async function loadModuleModern(src) {
  // Preload (optional)
  const link = document.createElement("link");
  link.rel = "modulepreload";
  link.href = src;
  document.head.appendChild(link);
  // Dynamic import
  return import(src);
}

Use Cases

• Code Splitting: โหลดฟีเจอร์เฉพาะตอนผู้ใช้คลิก (เช่น Chart library, Editor)
• A/B Testing: โหลดเวอร์ชันต่างๆ ตามเงื่อนไข
• Third-party widgets: Chat, Analytics, Ads — โหลดหลังหน้าเว็บพร้อม
• Conditional Polyfills: โหลด polyfill เฉพาะเบราว์เซอร์ที่ไม่รองรับ

Best Practices

• เพิ่ม script.onload / onerror เพื่อรู้สถานะ
• ใช้ async attribute (default ของ dynamic script) — โหลดขนาน ไม่บล็อค
• Cache busting: เพิ่ม query string ?v=1.2.3 เพื่อบังคับโหลดใหม่
• ใน Production ใช้ Bundler (Vite, Webpack, Rollup) ที่ทำ Code Splitting อัตโนมัติ (import())

Dynamic Import (ES2020) — ทางเลือกสมัยใหม่

// แทนที่การสร้าง script tag ด้วยตนเอง
const module = await import("./feature.js");
module.default(); // เรียกใช้