Đợi (await) dynamic import trong JavaScript

Lưu ý: Cần chạy localhost server để chạy ví dụ này (do dynamic import yêu cầu module).

Dưới đây là mã cho dynamic import (import động) trong JavaScript.

Ví dụ

<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Dynamic import</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 18px; font-weight: 500; color: rebeccapurple; } </style> </head> <body> <h1>Đợi dynamic import trong JavaScript</h1> <div class="result"></div> <button class="Btn">NHẤN VÀO ĐÂY</button> <h3>Nhấn nút để import động module</h3> <script> document.querySelector(".Btn").addEventListener("click", loadModule); let resEle = document.querySelector(".result"); async function loadModule() { let test = await import("./sample.js"); resEle.innerHTML += test.testImport() + "<br>"; resEle.innerHTML += test.tellTime(); } </script> </body> </html>

sample.js

function testImport() { return "Module testImport đã được import" + "<br>"; } function tellTime() { return new Date(); } export { testImport, tellTime };

Kết quả

Khi nhấn nút, module sample.js được tải động (lazy load), sau đó gọi các export function.

import() trả về Promise resolve thành module namespace object. Dùng await trong async function. Hữu ích cho code splitting, conditional loading, giảm bundle size ban đầu.