Vue 3 性能优化

此 skill 用于定位与修复前端性能问题，同时保持代码可维护。

何时使用此 Skill

• 首屏慢、路由切换慢、列表渲染卡顿
• watch 太多、重复请求、无效渲染
• 打包体积过大、第三方库引入不当

关键最佳实践

• 路由级代码分割：动态导入页面组件。
• 组件懒加载：defineAsyncComponent，必要时配合 <Suspense>。
• computed 优先于 watch：能推导就不要手写同步。
• 避免不必要的 watchers：明确依赖列表，及时 cleanup。
• 静态内容优化：v-once / v-memo 用于不常变化区域（谨慎，先测）。

诊断思路

• 用 Vue DevTools 的性能分析定位“重渲染来源”。
• 检查数据获取：重复请求、竞态、未取消过期请求。

常见反模式

• 把所有页面都同步打进首包
• watchEffect 不加约束，导致隐式依赖膨胀
• 列表里每行组件都做独立请求

使用示例（提示语模板）

• “请把路由页面改成懒加载，并说明对首屏与切换体验的影响。”
• “这个列表页滚动卡顿：请定位重渲染原因，给出 2-3 个优化方案并权衡。”