动态导入埋点逻辑可减小首屏体积，通过封装独立模块、按需调用import()、缓存promise、配合代码分割与预加载策略实现解耦与优化。
用 import() 动态加载埋点逻辑，能确保这些代码不参与首屏构建，只在真正需要时（比如用户触发某行为、进入某页面）才拉取执行，从而减少初始 JS 体积和网络开销。
埋点逻辑与主业务解耦
把所有埋点相关的函数、上报配置、事件监听器封装进独立模块（如 track.js 或 analytics/behavior.js），不被任何入口文件 import 静态引用。这样 Webpack/Vite 等打包工具默认不会把它打进 main.js，为动态加载铺平道路。
- 避免在
main.ts或根组件里import { trackClick } from './track' - 模块内部不依赖全局状态或未初始化的 SDK，确保可独立运行
- 导出一个初始化函数（如
initTrack()）或行为函数（如trackShare()），便于按需调用
在关键节点按需触发 import()
不是一上来就加载，而是在明确的业务时机调用 import() —— 比如按钮点击、路由切换完成、某个模块挂载后。此时才发起请求，加载并执行埋点逻辑。
- 示例：用户点击“分享”按钮时才加载分享相关埋点
-
注意不要在循环或高频事件（如 scroll/mousemove）中反复调用
import()，应加防抖或缓存 Promise - 可配合
Promise.allSettled或try/catch处理加载失败（如 CDN 不可用），避免阻断主流程
缓存 import() 返回的 Promise
同一模块多次 import() 会重复请求。应将首次返回的 Promise 存起来，后续直接复用，保证只加载一次。
- 简单做法：用闭包或模块级变量缓存
const trackModule = import('./track') - 更健壮方式：封装一个加载器函数，内部用 Map 缓存已发起的 Promise
- 加载成功后可执行一次初始化（如注册通用事件监听），后续调用直接走已注入的函数
配合构建工具做代码分割与预加载提示
让打包结果更友好：给动态导入的模块起名（Webpack 的 /* webpackChunkName: "track" */）、设置 prefetch/preload 策略，或在空闲时（requestIdleCallback）提前加载非紧急埋点模块。
- Vite 中可写
import(/* viteIgnore */ './track')避免预构建，或用import.meta.webpackIgnore - 对核心路径（如下单页）的埋点，可在路由守卫 resolve 后、组件渲染前 preload
- 非关键埋点（如“查看帮助文档”）可延迟到交互后 500ms 再加载，进一步降低感知影响
