weapp-vite-wevu-performance-best-practices
Purpose
在 weapp-vite + wevu 项目中做“可测量、可回归”的性能优化，优先处理运行时瓶颈（setData 、滚动渲染、页面切换、资源加载、内存）。
Trigger Signals
-
用户反馈页面卡顿、滚动掉帧、交互延迟。
-
用户反馈页面切换慢、首屏慢、偶发白屏。
-
用户提到 setData 频繁、payload 大、调试日志告警。
-
用户提到图片导致卡顿/内存上涨。
-
用户提到 iOS 内存告警、被系统回收、闪退。
-
用户要求“做一套性能优化方案/Checklist/基线与回归机制”。
Scope Boundary
本 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 。
Quick Start
-
建立基线：明确慢点是 setData 、渲染、切换、资源还是内存。
-
先开低风险优化：weapp.wevu.preset: 'performance'
- 针对页面启用 autoSetDataPick 。
-
按五类场景逐项收敛：setData -> 渲染 -> 切换 -> 资源 -> 内存 。
-
每次只改一类变量，并附带最小验证命令与回归信号。
Execution Protocol
-
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
-
每轮改动给出“预期收益 + 可观测信号 + 回滚开关”。
-
优先跑定向验证，再决定是否扩大验证范围。
Guardrails
-
不要一次性同时改“构建策略 + 运行时策略 + 业务逻辑”。
-
不要只看平均值，至少观察慢链路（P95/P99）或最差帧表现。
-
不要把“告警消失”当作“性能已达标”的唯一依据。
-
不要在未建立基线时做大规模重构。
Output Contract
应用本 skill 时，输出必须包含：
-
性能问题分类（setData/render/nav/resource/memory）。
-
文件级最小改动建议（按优先级）。
-
对应验证命令与验收信号。
-
风险、回滚点与后续观察项。
Completion Checklist
-
有明确的优化前后基线对照。
-
setData 高频路径已收敛（频率/范围/payload）。
-
滚动与曝光逻辑不依赖高频 onPageScroll + setData 轮询。
-
页面切换链路没有明显 onHide/onUnload 阻塞。
-
资源策略对图片体积和布局抖动有约束。
-
内存告警与卸载清理机制已覆盖关键页面。
References
-
references/runtime-perf-matrix.md
-
references/tuning-recipes.md