动态导入（import()）是ES2020特性，解决按需/条件/动态路径加载模块问题；语法为返回Promise的表达式，需await/.then处理；与静态import相比，它运行时执行、位置任意、路径可拼接但需静态前缀；工程中注意代码分割、预加载注释及SSR兼容性。
动态导入（import()）是 ES2020 正式引入的 JavaScript 特性，它让模块加载从静态编译时行为变为运行时可编程行为。画它的思维导图，关键不是罗列 API，而是抓住“何时用、怎么用、注意什么、和静态 import 有何不同”这四条主线。
以下是你画这张导图时最实用的结构建议，直接对应开发中的真实决策点：
一、核心定位：它解决什么问题？
静态 import 只能在模块顶层写，且必须在代码解析阶段就确定依赖路径；import() 是函数调用，返回 Promise，支持：
- 按需加载：比如路由切换、弹窗打开时才加载对应组件
- 条件加载：根据用户权限、设备类型、环境变量决定是否加载某模块
- 动态路径：路径拼接（
import(`./locales/${lang}.js`)），但注意不能是完全任意字符串（需被构建工具识别） - 减少首屏体积：把非关键逻辑抽成动态模块，提升初始加载速度
二、语法与执行机制
import() 不是声明，是表达式，返回 Promise<{ default: any, [namedExport]: any }>：
- 必须用
await或.then()处理结果，不能直接解构赋值 - 错误需用
try/catch或.catch()捕获（如模块不存在、网络失败） - 多次调用同一路径，浏览器/打包工具通常会复用已加载模块（类似单例）
- 不触发 tree-shaking —— 它本身绕过了静态分析，所以打包器无法提前判断哪些导出没被用到
三、和静态 import 的关键区别
这是面试和实际踩坑高频点，导图里建议用对比表格形式呈现：
-
时机：静态 import 在解析/编译阶段执行；
import()在运行时执行 -
作用域：静态 import 只能出现在顶层或嵌套在 static import/export 中；
import()可出现在任意位置（if、for、函数内） -
路径限制：静态 import 路径必须是字符串字面量；
import()支持变量拼接，但 Webpack/Vite 等要求路径有静态前缀（如./或../），否则构建时报错或降级为全量打包 -
副作用：静态 import 会执行模块顶层代码；
import()同样会，且只执行一次（即使多次调用）
四、工程实践注意事项
真正影响落地效果的细节，别漏掉：
- Webpack/Vite 中，
import()会自动代码分割，生成独立 chunk 文件（文件名含 hash） - 搭配
/* webpackPrefetch: true */或/* webpackPreload: true */注释可预取/预加载（Vite 用/* vitePreload: true */） - SSR 场景下，Node.js 也支持
import()（需启用type: "module"），但路径需兼容服务端文件系统 - 不要在循环中无节制调用——避免瞬间发起大量请求，应加节流或合并处理
