动态导入import()返回Promise，实现模块加载的可编程异步控制；支持按需加载、条件路径、错误隔离与优雅降级，但需await/then处理且路径须可被构建工具静态分析。
JavaScript中的动态导入（import()）返回一个Promise，这是它与静态import最本质的区别——它让模块加载变成可编程、可等待、可控制的异步操作。
动态导入本质是异步的Promise操作
调用import('./module.js')不会立即执行模块代码，而是返回一个处于pending状态的Promise。该Promise在模块下载、解析、执行完成后resolve为模块命名空间对象；任一环节失败则reject。这意味着你必须用.then()、await或try/catch来处理结果。
- 不能像静态
import那样直接在顶层作用域解构：const { foo } = import('./utils');❌（语法错误） - 必须显式等待：
const utils = await import('./utils');✅ 或import('./utils').then(({ foo }) => {...}) - 模块只执行一次，后续相同路径的
import()会复用已缓存的模块实例，Promise也立刻resolve
按需加载：减少初始包体积
这是最典型的应用。把非首屏、低频使用的功能（如富文本编辑器、图表库、PDF渲染器）拆成独立模块，在用户触发对应操作时再加载。
- 点击“编辑”按钮才加载
monaco-editor，避免首页白屏时间增加 - 路由级代码分割：React Router 6.4+ 的
lazy()、Vue Router 的defineAsyncComponent底层都依赖import() - 注意：Webpack/Vite等构建工具能自动识别
import()并生成独立chunk，无需额外配置
条件加载与运行时路径拼接
静态import要求路径是字符串字面量，而import()支持动态路径，可结合环境、用户权限、i18n语言等运行时变量决定加载哪个模块。
立即学习“Java免费学习笔记（深入）”；
- 加载不同语言的文案模块：
import(`./locales/${lang}.js`) - 根据浏览器特性加载polyfill：
if (!window.ResizeObserver) await import('resize-observer-polyfill'); - 权限控制：管理员才加载
import('./admin/dashboard.js')，普通用户跳过 - ⚠️ 注意：动态路径不能完全任意——构建工具需能静态分析出可能的路径范围，否则无法打包，例如
import(`./${userInput}.js`)会报错
错误隔离与优雅降级
动态导入的Promise可单独捕获错误，不影响主流程执行，适合构建容错性强的功能。
- 第三方SDK加载失败时显示提示，而非整个页面崩溃：
import('analytics-sdk').catch(() => console.warn('统计SDK加载失败')); - 尝试加载新版本模块，失败则回退到旧版：
import('./feature-v2.js').catch(() => import('./feature-v1.js')); - 配合
Promise.race()实现超时控制：Promise.race([import('./heavy.js'), new Promise((_, r) => setTimeout(r, 5000))])
不复杂但容易忽略：动态导入不是“让模块变懒”，而是把模块加载这件事交还给开发者控制——何时、何地、以何种方式加载，全由Promise的异步语义承载。
