async/await 可直接配合动态导入 import() 使用，因 import() 返回 Promise；它非语法糖而是标准异步调用，天然适配 await；需在 async 函数或支持 top-level await 的环境中使用，失败可用 try/catch 捕获。
async/await 可以直接配合动态导入 import() 使用，因为 import() 本身返回一个 Promise，而 await 正好用来等待这个 Promise 解析完成。
动态导入本质是 Promise
import() 不是语法糖，而是标准的异步函数调用，返回一个解析为模块对象的 Promise。所以它天然适配 async/await：
- 不需要额外包装成 Promise 或用
Promise.resolve() - 不能在顶层（非 async 函数内）直接 await，但可在 async 函数或模块顶层（ES2022+ 支持 top-level await）中使用
- 导入失败会抛出异常，可用 try/catch 捕获
基本用法示例
在 async 函数中加载模块并使用导出内容：
async function loadChartLib() {
try {
const { default: Chart } = await import('chart.js');
// ✅ Chart 是实际的默认导出
new Chart(ctx, { /* config */ });
} catch (err) {
console.error('图表库加载失败:', err);
}
}按需加载 + 条件判断
结合业务逻辑动态决定加载哪个模块：
立即学习“Java免费学习笔记（深入）”；
- 根据用户操作、路由、配置等条件触发不同 import()
- 避免提前加载未用到的功能模块
async function renderComponent(type) {
let Component;
switch (type) {
case 'table':
Component = (await import('./components/Table.js')).default;
break;
case 'chart':
Component = (await import('./components/Chart.js')).default;
break;
default:
throw new Error(`不支持的组件类型: ${type}`);
}
return new Component();
}缓存与重复加载注意点
浏览器对同一 URL 的 import() 会自动去重和缓存：
- 多次调用
import('./module.js')，只发起一次网络请求 - 后续调用立即 resolve 已缓存的模块对象
- 如需强制刷新（比如热更新场景），可加时间戳参数：
import('./module.js?t=' + Date.now())（慎用）
