weapp-vite-wevu-performance-best-practices
目的
在 weapp-vite + wevu 项目中做“可测量、可回归”的性能优化，优先处理运行时瓶颈（setData、滚动渲染、页面切换、资源加载、内存）。
触发信号
- 用户反馈页面卡顿、滚动掉帧、交互延迟。
- 用户反馈页面切换慢、首屏慢、偶发白屏。
- 用户提到
setData频繁、payload 大、调试日志告警。 - 用户提到图片导致卡顿/内存上涨。
- 用户提到 iOS 内存告警、被系统回收、闪退。
- 用户要求“做一套性能优化方案/Checklist/基线与回归机制”。
适用边界
本 skill 聚焦“性能诊断与优化执行”。
以下情况不应作为主 skill：
- 主要是工程架构/分包/构建编排问题。使用
weapp-vite-best-practices。 - 主要是
.vue宏和模板兼容问题。使用weapp-vite-vue-sfc-best-practices。 - 主要是生命周期/store/event 语义重构。使用
wevu-best-practices。 - 主要是原生到 wevu 的迁移方案。使用
native-to-weapp-vite-wevu-migration。
快速开始
- 建立基线：明确慢点是
setData、渲染、切换、资源还是内存。 - 先开低风险优化：
weapp.wevu.preset: 'performance'+ 针对页面启用autoSetDataPick。 - 按五类场景逐项收敛：
setData -> 渲染 -> 切换 -> 资源 -> 内存。 - 每次只改一类变量，并附带最小验证命令与回归信号。
执行流程
- Baseline first
- 收集关键链路：页面切换耗时、首屏渲染耗时、滚动时长链路、内存告警出现时机。
- 区分“偶发抖动”与“稳定复现”场景，优先复现稳定问题。
- setData path（最高优先）
- 先启用/确认
setData策略：patch、suspendWhenHidden、highFrequencyWarning。 - 用
autoSetDataPick减少模板未使用字段进入快照。 - 避免在高频回调（尤其
onPageScroll）里直接高频setData。
- Render path
- 非必要不监听
onPageScroll。 - 元素曝光与可见性逻辑优先使用
useIntersectionObserver()。 - 动画优先 CSS / 平台动画，不用连续
setData驱动整页动画。
- Navigation path
- 控制前页
onHide/onUnload耗时逻辑，必要时延后执行。 - 对分包页面的“跳转到 onLoad 前窗口期”提前请求数据。
- 结合分包与
lazyCodeLoading，减少切换时注入与阻塞。
- Resource + Memory path
- 图片按展示尺寸供图，避免大图与无节制
widthFix/heightFix。 - 在
onMemoryWarning()回调释放缓存、监听、定时器和长生命周期对象。 - 页面/组件卸载时确保副作用清理闭环（监听、timer、长任务回调）。
- Verify narrowly
- 每轮改动给出“预期收益 + 可观测信号 + 回滚开关”。
- 优先跑定向验证，再决定是否扩大验证范围。
约束
- 不要一次性同时改“构建策略 + 运行时策略 + 业务逻辑”。
- 不要只看平均值，至少观察慢链路（P95/P99）或最差帧表现。
- 不要把“告警消失”当作“性能已达标”的唯一依据。
- 不要在未建立基线时做大规模重构。
输出要求
应用本 skill 时，输出必须包含：
- 性能问题分类（setData/render/nav/resource/memory）。
- 文件级最小改动建议（按优先级）。
- 对应验证命令与验收信号。
- 风险、回滚点与后续观察项。
完成检查
- 有明确的优化前后基线对照。
setData高频路径已收敛（频率/范围/payload）。- 滚动与曝光逻辑不依赖高频
onPageScroll + setData轮询。 - 页面切换链路没有明显
onHide/onUnload阻塞。 - 资源策略对图片体积和布局抖动有约束。
- 内存告警与卸载清理机制已覆盖关键页面。
参考资料
references/runtime-perf-matrix.mdreferences/tuning-recipes.md