JS动态导入import()返回Promise，需用await或then()处理；支持解构默认/命名导出，路径须为字面量或合规模板字符串，模块对象为只读命名空间，须捕获错误并可缓存优化。
JS 中动态导入（import()）返回的是一个 Promise，接收和解析它的结果，本质上就是处理 Promise 的成功与失败情况。核心在于用 then() 或 await 获取模块对象，再从中提取你需要的导出项。
用 await 接收并解构模块
在 async 函数中，最简洁自然的方式是 await 动态导入，然后直接解构默认导出或命名导出：
- 如果模块有默认导出（
export default xxx）：const module = await import('./utils.js');<br>const { default: myFunc } = module;
或更常用：const { default: myFunc } = await import('./utils.js'); - 如果模块只有命名导出（
export const helper = ...）：const { helper, formatTime } = await import('./helpers.js'); - 也可以先 await 得到整个模块对象，再按需取值：
const utils = await import('./utils.js');<br>utils.default?.doSomething();<br>utils.format?.(date);
用 then() 和 catch() 处理 Promise
适用于非 async 环境，或需要显式控制异步流程的场景：
import('./module.js')<br> .then(module => {<br> const { default: Component } = module;<br> render(Component);<br> })<br> .catch(err => console.error('加载失败:', err));- 注意：模块对象不是普通 JSON，它是一个 命名空间对象（Module Namespace Object），属性名对应导出名，且不可写、不可枚举（但可读取）。
常见陷阱与注意事项
-
路径必须是字符串字面量或明确的变量（不能是拼接表达式），否则打包工具（如 Webpack、Vite）无法静态分析，可能报错或降级为全量加载：
✅import(`./pages/${page}.js`)（支持的动态路径，需满足模板字符串约束）
❌import('./pages/' + page + '.js')（多数构建工具不支持） - 动态导入的模块仍遵循 ES 模块规范，导出项不会被自动提升，必须通过
module.xxx或解构访问。 - 浏览器中若网络失败、路径错误、语法错误等，Promise 会 reject，务必用
catch或try/catch捕获，避免未处理拒绝（unhandled rejection）。
结合条件加载与缓存（进阶小技巧）
可封装成带缓存的加载函数，避免重复请求相同模块：
const cache = new Map();<br>async function loadModule(path) {<br> if (cache.has(path)) return cache.get(path);<br> const mod = await import(path);<br> cache.set(path, mod);<br> return mod;<br>}- 对 React 等框架，常配合
React.lazy使用，其底层就是基于import()+ Promise 封装。
