动态导入（import()）返回 Promise，需用 await 或 .then() 获取模块对象并解构导出；必须错误处理；支持条件路径和浏览器自动缓存。
动态导入（import()）在 JavaScript 中返回一个 Promise，它解析为模块的命名空间对象。要处理这个 Promise 的结果，核心是用 await 或 .then() 获取模块，再从中提取导出的值、函数或类。
使用 await（推荐，在 async 函数内）
这是最清晰、最常用的方式，尤其适合按需加载组件、工具函数或配置：
- 确保调用处在
async函数中 -
await import('./utils.js')返回的是模块对象（类似{ default: ..., someFn: ..., CONSTANT: ... }） - 可直接解构获取所需导出，包括默认导出和具名导出
例如：
async function loadAndUse() {
const { default: ApiClient, retry } = await import('./api.js');
const client = new ApiClient();
await client.fetchData();
retry(); // 调用具名导出的函数
}
使用 .then()（适用于非 async 环境）
如果无法使用 async/await（如某些回调、事件处理器），可用链式 .then()：
立即学习“Java免费学习笔记（深入）”；
- 注意：Promise 解析结果是模块对象，不是默认导出本身
- 需显式访问
module.default或其他属性
例如：
import('./math.js')
.then(module => {
const { add, multiply } = module; // 解构具名导出
console.log(add(2, 3)); // 5
console.log(module.default(4)); // 假设 default 是一个函数
})
.catch(err => {
console.error('动态导入失败:', err);
});
错误处理不能省略
动态导入可能因路径错误、网络问题、语法错误等失败，必须捕获拒绝（reject）：
- 用
try/catch配合await - 或用
.catch()配合.then() - 避免静默失败——尤其在生产环境，建议记录错误并提供降级逻辑（如显示提示、加载备用资源）
例如：
async function safeImport() {
try {
const mod = await import('./feature.js');
mod.init(); // 安全调用
} catch (err) {
console.warn('功能模块加载失败，启用基础模式', err);
fallbackToBasicUI();
}
}
配合条件加载与缓存策略
动态导入天然支持运行时条件判断，还可结合变量或表达式：
- 路径可以是模板字符串：
import(`./locales/${lang}.js`) - 浏览器会自动缓存已加载的模块，重复调用相同
import()会复用已解析的模块对象（Promise 缓存） - 如需强制刷新，可加时间戳参数（不推荐）；更合理的方式是服务端控制缓存头或版本化文件名
例如：
const lang = navigator.language || 'en';
import(`./i18n/${lang}.js`)
.then(module => renderWithTranslations(module.default))
.catch(() => import('./i18n/en.js').then(m => renderWithTranslations(m.default))); 
