动态 import() 是运行时函数调用,触发独立模块加载流程并返回 promise,支持按需加载与代码分割;它不参与静态解析,路径可动态拼接但需构建工具支持,返回只读实时绑定命名空间对象,错误处理精准隔离。

动态 import() 不是语法语句,而是一个运行时函数调用,它在模块执行上下文中触发一次独立、隔离的模块加载流程,返回 Promise,并天然支持按需加载与代码分割。
动态 import() 的本质是运行时模块加载器调用
它不参与静态解析阶段,也不写入模块依赖图,而是由 JavaScript 引擎在执行期委托模块加载器(如浏览器原生 loader 或构建工具 runtime)发起新任务。每次调用 import('./a.js') 都会:
- 启动全新模块记录(Module Record)创建流程
- 走完整加载链路:获取 → 解析 → 实例化 → 执行
- 生成独立的模块执行上下文,与当前模块完全隔离
- 确保 this === undefined、严格模式启用、顶层作用域干净
路径支持灵活,但需兼顾构建工具能力
import() 中的路径可以是字符串字面量、模板字符串甚至变量拼接,例如 import(`./features/${name}.js`)。但这并不意味着所有组合都能被正确解析:
- 浏览器原生支持仅限于静态可推断路径(如 './x.js' 或 `./${v}.js` 中 v 为常量)
- Vite、Webpack 等工具通过静态分析识别可能路径,生成对应 chunk;无法识别的路径会导致运行时报错
- 禁止使用纯运行时拼接(如 let p = someUserInput; import(p)),这会绕过打包机制,引发 404 或 CORS 错误
加载结果是只读命名空间对象,含实时绑定语义
await import('./utils.js') 返回的对象结构与 import * as utils from './utils.js' 一致:
- 所有命名导出作为属性存在,如 mod.formatTime
- 默认导出挂载在 mod.default 上(若存在)
- 属性值是实时绑定的引用,不是快照——源模块中 export let x = 1; 后 x 被修改,导入方立刻可见
- 该对象不可赋值或删除属性(严格模式下报 TypeError)
错误处理精准,不影响其他模块逻辑
import() 返回的 Promise 在模块加载失败时 reject,错误范围严格限定在本次加载任务内:
- 网络失败、404、语法错误、循环依赖等均触发 catch
- 失败不会污染当前模块执行上下文,也不会中断后续代码执行
- 可配合重试、降级策略,例如 fallback 到 CDN 或本地 stub 模块
- 与顶层静态 import 不同,它不阻塞整个模块图初始化











