关键在于统计触发加载而非先加载后统计，需将统计与图表渲染绑定，通过IntersectionObserver检测视口曝光、useEffect中按需导入并上报，统一包装import()为带埋点的工具函数，确保上下文准确、失败可追溯、端到端耗时可测。
在动态导入图表渲染器时做数据统计，关键不是“先加载再统计”，而是“统计动作触发加载”，把统计逻辑和动态导入解耦，让加载只发生在真正需要渲染图表的时刻。
统计时机要和图表渲染绑定
不要在页面初始化或数据拉取后立刻统计图表相关指标（比如“用户打开了多少个图表模块”），而应在用户交互（如点击 Tab、展开折叠面板）或组件挂载到可视区域时，才调用 import() 并同步上报统计。
- 用
IntersectionObserver检测图表容器进入视口，再动态导入并记录“图表曝光”事件 - 在 React 中，可在
useEffect里判断isMounted && !renderer时导入，并上报“图表首次渲染” - 避免在路由守卫或全局 store 初始化中预加载图表模块——这会提前触发无意义的统计
动态导入成功后立即上报上下文信息
导入成功回调是理想的埋点位置，此时能准确获取图表类型、数据源标识、所属业务模块等上下文，比在 import 前上报更可靠。
- 示例：
import('./renderers/echarts').then(module => { track('chart_render_start', { type: 'echarts', module: 'dashboard' }); new module.EChartsRenderer(...); }) - 把
import()包装成带统计的工具函数，统一处理加载失败、超时、重复导入等边界，并记录“加载失败率”“平均加载耗时”等性能指标 - 避免在
catch中只做错误提示而不上报——“图表加载失败”本身就是重要业务异常指标
用占位符 + 异步加载保障统计完整性
图表容器渲染前显示骨架屏或 loading 状态，既提升体验，也确保统计事件不会因快速切换丢失。
立即学习“Java免费学习笔记（深入）”；
- 在 DOM 插入图表容器时就发出“图表准备开始渲染”事件，含唯一 ID；导入完成后再发“渲染完成”，两者 ID 对齐，便于计算端到端耗时
- 对同一图表多次触发（如刷新数据），复用已导入的模块，但每次重新渲染仍需上报“数据更新渲染”，区分于首次加载
- 服务端同构场景下，客户端首次渲染应跳过动态导入（用已注入的模块），但仍需补发“CSR 渲染完成”事件，保证统计链路完整
不复杂但容易忽略：统计不是加一行 track() 就完事，它得和模块生命周期对齐，让每个“加载”“曝光”“失败”都有明确归属和可回溯上下文。
