weapp-vite-wevu-performance-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

weapp-vite-wevu-performance-best-practices

Purpose

在

weapp-vite + wevu

项目中做“可测量、可回归”的性能优化，优先处理运行时瓶颈（

setData

、滚动渲染、页面切换、资源加载、内存）。

Implement "measurable, regressable" performance optimization in

weapp-vite + wevu

projects, prioritize handling runtime bottlenecks (

setData

, scroll rendering, page switching, resource loading, memory).

Trigger Signals

用户反馈页面卡顿、滚动掉帧、交互延迟。
用户反馈页面切换慢、首屏慢、偶发白屏。
用户提到
```
setData
```
频繁、payload 大、调试日志告警。
用户提到图片导致卡顿/内存上涨。
用户提到 iOS 内存告警、被系统回收、闪退。
用户要求“做一套性能优化方案/Checklist/基线与回归机制”。

Users report page lag, scroll frame drops, and interaction delays.
Users report slow page switching, slow first screen load, and occasional white screens.
Users mention frequent
```
setData
```
calls, large payloads, and debug log alerts.
Users mention that images cause lag/memory increase.
Users mention iOS memory alerts, process recycling by the system, and crashes.
Users request "a set of performance optimization solutions/Checklist/baseline and regression mechanism".

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
```
。

This skill focuses on "performance diagnosis and optimization implementation".

The following scenarios should not use this as the primary skill:

It is mainly an engineering architecture/subpackage/build orchestration issue. Use
```
weapp-vite-best-practices
```
.
It is mainly a
```
.vue
```
macro and template compatibility issue. Use
```
weapp-vite-vue-sfc-best-practices
```
.
It is mainly lifecycle/store/event semantic refactoring. Use
```
wevu-best-practices
```
.
It is mainly a migration solution from native to wevu. Use
```
native-to-weapp-vite-wevu-migration
```
.

Quick Start

建立基线：明确慢点是
```
setData
```
、渲染、切换、资源还是内存。

先开低风险优化：

weapp.wevu.preset: 'performance'

+ 针对页面启用

autoSetDataPick

。

按五类场景逐项收敛：

setData -> 渲染 -> 切换 -> 资源 -> 内存

。

每次只改一类变量，并附带最小验证命令与回归信号。

Establish a baseline: clarify whether the bottleneck is
```
setData
```
, rendering, switching, resources, or memory.
Enable low-risk optimizations first:
```
weapp.wevu.preset: 'performance'
```
+ enable
```
autoSetDataPick
```
for pages.
Converge item by item according to five types of scenarios:
```
setData -> rendering -> switching -> resources -> memory
```
.
Only change one type of variable at a time, and attach the minimum verification command and regression signal.

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

每轮改动给出“预期收益 + 可观测信号 + 回滚开关”。
优先跑定向验证，再决定是否扩大验证范围。

Baseline first

Collect key link data: page switching time, first screen rendering time, scroll duration link, timing of memory alerts.
Distinguish between "occasional jitter" and "stable reproduction" scenarios, prioritize reproducing stable issues.

setData path (highest priority)

First enable/confirm

setData

strategies:

patch

suspendWhenHidden

highFrequencyWarning

Use
```
autoSetDataPick
```
to reduce unused template fields from entering the snapshot.
Avoid direct high-frequency
```
setData
```
in high-frequency callbacks (especially
```
onPageScroll
```
).

Render path

Do not listen to
```
onPageScroll
```
unless necessary.
Prioritize using
```
useIntersectionObserver()
```
for element exposure and visibility logic.
Prioritize CSS / platform animations for animations, do not use continuous
```
setData
```
to drive full-page animations.

Navigation path

Control the time-consuming logic of the previous page's
```
onHide/onUnload
```
, postpone execution if necessary.
Request data in advance for the "window period before jumping to onLoad" of subpackage pages.
Combine subpackages and
```
lazyCodeLoading
```
to reduce injection and blocking during switching.

Resource + Memory path

Provide images according to the display size, avoid large images and unrestrained
```
widthFix/heightFix
```
.
Release caches, listeners, timers and long-lifecycle objects in the
```
onMemoryWarning()
```
callback.
Ensure the closed loop of side effect cleanup (listeners, timers, long task callbacks) when pages/components are unmounted.

Verify narrowly

Provide "expected benefit + observable signal + rollback switch" for each round of changes.
Prioritize running targeted verification before deciding whether to expand the verification scope.

Guardrails

不要一次性同时改“构建策略 + 运行时策略 + 业务逻辑”。
不要只看平均值，至少观察慢链路（P95/P99）或最差帧表现。
不要把“告警消失”当作“性能已达标”的唯一依据。
不要在未建立基线时做大规模重构。

Do not modify "build strategy + runtime strategy + business logic" at the same time.
Do not only look at the average value, observe at least the slow links (P95/P99) or worst frame performance.
Do not take "alert disappearance" as the only basis for "performance has reached the standard".
Do not carry out large-scale refactoring without establishing a baseline.

Output Contract

应用本 skill 时，输出必须包含：

性能问题分类（setData/render/nav/resource/memory）。
文件级最小改动建议（按优先级）。
对应验证命令与验收信号。
风险、回滚点与后续观察项。

When applying this skill, the output must include:

Performance problem classification (setData/render/nav/resource/memory).
File-level minimum change suggestions (by priority).
Corresponding verification commands and acceptance signals.
Risks, rollback points and subsequent observation items.

Completion Checklist

有明确的优化前后基线对照。
```
setData
```
高频路径已收敛（频率/范围/payload）。
滚动与曝光逻辑不依赖高频
```
onPageScroll + setData
```
轮询。
页面切换链路没有明显
```
onHide/onUnload
```
阻塞。
资源策略对图片体积和布局抖动有约束。
内存告警与卸载清理机制已覆盖关键页面。

There is a clear baseline comparison before and after optimization.
```
setData
```
high-frequency paths have been converged (frequency/range/payload).
Scroll and exposure logic does not rely on high-frequency
```
onPageScroll + setData
```
polling.
There is no obvious
```
onHide/onUnload
```
blocking in the page switching link.
The resource policy has constraints on image size and layout jitter.
Memory alert and unmount cleanup mechanisms have covered key pages.

References

```
references/runtime-perf-matrix.md
```
```
references/tuning-recipes.md
```

```
references/runtime-perf-matrix.md
```
```
references/tuning-recipes.md
```