动态导入需结合路径、反馈、兜底与构建配置落地，适用场景为路由拆分、权限触发和重型依赖隔离，须封装async/await、try/catch处理错误，并验证打包器生成独立chunk及添加加载状态。
动态导入不是加个 import() 就完事，而是要和用户路径、加载反馈、错误兜底、构建配置一起跑通才算落地。核心目标就一个：该加载时才加载，加载失败不白屏，加载过程有感知，打包后真拆包。
明确哪些场景真正适合动态导入
别为“动态”而动态，先问一句：它为什么不能静态引入？合理场景就三类：
- 路由级拆分：比如用户点开“数据看板”，才加载 ECharts、时间轴组件和聚合计算逻辑
- 权限或条件触发功能：只有管理员点击“系统日志”按钮，才加载日志查询 + 下载模块
- 重型依赖隔离：PDF 渲染（pdf-lib）、音视频处理（ffmpeg.wasm）、大型图表库（deck.gl）这类 MB 级资源，绝不放进首屏 bundle
如果只是两个工具函数、几个配置项，静态 import 更轻量、更易调试；强行动态反而引入 Promise 开销和 chunk 加载不确定性。
用 async/await 封装主流程，别堆嵌套 .then
把动态导入封装进业务函数里，保持可读性和可控性：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 解构导入写成
const { render, exportData } = await import('./report.js')，比先取 module 对象再取属性更简洁 - 必须
try/catch捕获错误——用户看不到控制台，得给明确提示或降级 UI（比如显示“报表功能暂不可用，请稍后重试”） - 避免在
catch里只写console.error，也不要用空catch吞掉异常
确保构建工具真生成独立 chunk
光写 import() 不等于代码就拆开了，得让打包器识别并切包：
- Vite 用户：确认入口 HTML 的
<script></script>标签带type="module"；检查dist/assets/目录下是否出现类似report.abc123.js的独立文件 - Webpack 用户：需开启
experiments.topLevelAwait: true（v5.87+），否则顶层await会报错；同时确认splitChunks配置未误删动态导入规则 - 所有项目：构建后执行
npx webpack-bundle-analyzer dist/stats.json，验证目标模块是否脱离主 bundle
加加载状态，体验不掉线
用户点击后空白 1–2 秒，容易误以为卡死或功能失效。简单但有效的做法：
- 按钮点击后立即置灰 + 显示“加载中…”文字，禁用重复点击
- 若加载耗时较长（如 >800ms），可叠加骨架屏或轻量 loading 动画
- 加载成功后恢复按钮状态，并自动聚焦到新内容区域（提升可访问性）
不复杂但容易忽略。
