动态导入需理解加载时机、错误处理与构建优化，本质是返回模块命名空间对象的Promise关键字，路径须静态可析，须在async函数中使用并显式捕获错误。
动态导入不是“学个语法就完事”的功能，它背后连着模块加载时机、错误边界、构建产物拆分和用户体验优化。掌握高级用法，关键在理解“什么时候该动、怎么动得稳、出问题怎么兜住”。
搞懂 import() 的本质和限制
import() 是一个关键字（不是函数），返回 Promise，解析结果是模块命名空间对象。它支持变量路径，比如 import(`./locales/${lang}.js`)，但路径不能完全动态（如从用户输入拼接），否则构建工具无法静态分析，会报错或生成不合理的 chunk。
- 路径必须能被 Webpack/Vite 等工具在构建期识别，常见写法是字符串模板中变量为有限枚举值（如 'zh' | 'en' | 'ja'）
- 不能在顶层作用域直接 await import()，必须包裹在 async 函数或 .then() 链中
- import() 加载失败会 reject，必须显式 catch，否则触发 unhandledrejection
结合路由与组件按需加载
这是最典型也最实用的高级场景。现代框架都封装了底层逻辑，但理解原理才能调得准、查得快。
- React 中用 React.lazy + Suspense：const Page = React.lazy(() => import('./Page.js'))；Suspense 控制 loading 状态，fallback 可放骨架屏
- Vue 中用 defineAsyncComponent：const Component = defineAsyncComponent(() => import('./Component.vue'))，支持 loading、error、delay 等选项
- 纯 JS 路由也可手动实现：监听 hash 或 history.pushState，匹配路径后动态 import 对应模块，再挂载到 DOM
做细粒度的条件加载与资源隔离
不只是“点按钮才加载”，而是根据设备能力、用户权限、A/B 实验分组等真实业务信号做决策。
- 大图表库（如 ECharts）只在进入数据看板页时加载，避免污染首屏 JS 包
- 富文本编辑器（如 Tiptap）仅在用户点击“编辑”按钮后引入，且可配合 import().then(module => module.default?.install?.()) 做运行时插件注册
- 对老浏览器降级：if ('noModule' in HTMLScriptElement.prototype) { await import('./modern.js'); } else { await import('./legacy.js'); }
处理加载状态与错误恢复
动态导入不是“一导了之”，用户感知取决于你如何反馈进度和失败。
- 加 loading 指示：在 import() 开始前显示 spinner，成功后移除；建议用 CSS transition 实现平滑切换
- 错误重试机制：catch 到错误后，提供“重试”按钮，或自动尝试最多 2 次（避免无限循环）
- 预加载提示：对关键模块，可在用户 hover 按钮时提前调用 import()（不 await），实现“悬停即预加载”
- 缓存控制：import() 默认走浏览器缓存，若需强制更新，可在路径后加版本参数，如 import(`./module.js?v=${__VERSION__}`)（需构建时注入）
