统计脚本 gzip 后 210KB,Slow 3G 下下载要 3.8 秒,打开文件一看大半是时区数据和没用到的图表模块。第一次遇到会往复杂处想,其实漏掉的多是个小前提。
npx source-map-explorer dist/stat.js # 或 webpack-bundle-analyzer 查看依赖占比
SDK 打包时把 dayjs 的全量 locale 和时区表一起打进来,还引了完整图表库。统计只需要上报,跟展示无关的依赖全被带进首屏。这一点先确认清楚,后面就不用反复试。
碰到「统计 SDK 体积」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。把复现步骤压到三条以内,交给同事也能跑出来,才算真的定位清楚。
改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
具体做法是,用构建分析工具看依赖占比,先砍掉图表库;时区只保留 Asia/Shanghai,别引全量数据;统计脚本拆成上报和报表两个包,报表页再加载大的;改完对比 gzip 体积和 LCP。
改完照着核一遍,统计脚本 gzip 后降到 45KB 以下,首屏 LCP 提前 1.2 秒左右。
