使用动态导入 import() 函数可以实现代码分割，它返回一个 promise 对象，在需要时加载模块。通过这种方式，浏览器可以按需下载代码块，减少初始加载体积。
如何编写动态导入的代码
调用 import() 并处理返回的 Promise 即可实现按需加载。以下是一个完整的 HTML 页面示例，包含按钮触发和模块加载逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Import Demo</title>
</head>
<body>
<button id="loadBtn">Load Module</button>
<div id="output"></div>
<script type="module">
const btn = document.getElementById('loadBtn');
const output = document.getElementById('output');
btn.addEventListener('click', async () => {
try {
// 动态导入模块
const module = await import('./utils.js');
// 调用模块中的函数
output.textContent = module.greet();
} catch (error) {
console.error('Failed to load module:', error);
output.textContent = 'Error loading module';
}
});
</script>
</body>
</html>运行该程序后，点击按钮会请求 utils.js 文件。如果文件存在且导出正确，页面上会显示问候语；否则控制台会报错。
立即学习“Java免费学习笔记（深入）”；
如何处理导入失败的情况
动态导入可能因为网络错误或模块不存在而失败，需要使用 try...catch 语句捕获异常。以下代码展示了错误处理的具体实现。
// utils.js
export function greet() {
return 'Hello from dynamic module!';
}当 utils.js 文件缺失或路径错误时，catch 块会执行，输出错误信息。开发者可以根据实际需求提供降级方案或用户提示。
动态导入在不同环境下的表现差异
在 Node.js 环境中，动态导入同样支持，但语法略有不同。Node.js 14+ 版本原生支持 import()，无需额外配置。以下代码展示了在 Node.js 中使用动态导入的方式。
// node-dynamic-import.mjs
async function loadModule() {
try {
const module = await import('./utils.cjs');
console.log(module.default());
} catch (error) {
console.error('Node.js import failed:', error);
}
}
loadModule();在 Node.js 中，动态导入的文件可以是 CommonJS 或 ES Modules 格式。如果导入的是 CommonJS 模块，默认导出会被包装在 default 属性中。这种差异可能导致行为不一致，开发者需要注意兼容性问题。
