Vue项目性能损耗集中在数据响应、渲染逻辑、资源加载和内存管理四环节：冻结静态数据、虚拟滚动长列表、异步分时加载、CDN与按需引入第三方库。
Vue项目中的性能损耗点不是随机出现的，而是集中在数据响应、渲染逻辑、资源加载和内存管理这几个关键环节。找准位置，针对性处理，效果立竿见影。
控制响应式数据范围
Vue的响应式系统会为每个响应式属性创建依赖追踪，数据越多，开销越大。静态配置、API返回的只读字段、临时计算中间值，都不必进入响应式体系。
- 用 Object.freeze() 冻结不需要更新的大型对象（如字典项、枚举配置）
- 非响应式数据存入 setup() 中的普通变量 或 ref(null) 后手动赋值，避免 reactive 包裹
- 从 API 获取列表数据后，对其中的不可变字段（如 id、code）不做深层响应式处理，必要时用 markRaw() 跳过代理
优化长列表与高频渲染
卡顿最常发生在滚动、搜索、筛选等交互密集场景，根源往往是 DOM 节点过多或 diff 过于频繁。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 列表必须使用 唯一且稳定 的
key（推荐用 id，禁用 index） - 超过 100 条的数据，放弃全量 v-for，改用 vue-virtual-scroller 或 recycle-list 实现虚拟滚动
- 搜索/过滤时，用 computed 缓存结果，避免每次输入都触发全量遍历；若计算复杂，可加节流（throttle）或防抖（debounce）
- 避免在模板中写函数调用（如
@click="handle(item, index)"），改用预绑定或事件委托
拆分加载与执行时机
首屏白屏久、交互卡，往往是因为主线程被大量同步任务阻塞。把任务“错峰”安排，体验立刻不同。
立即学习“前端免费学习笔记（深入）”；
- 路由级：用 异步组件 + webpackChunkName 实现按需加载，尤其对后台管理系统的子模块
- 数据级：基础数据优先加载，图表、统计、关系图谱等重渲染模块延迟 500–1000ms 加载
- 渲染级：多个图表不同时初始化，间隔 50–100ms 渲染，避免集中触发 layout 和 paint
- 用 requestIdleCallback 或 setTimeout(..., 0) 将低优先级任务（如日志上报、非关键 DOM 更新）让出主线程
构建与资源层面精简
再快的代码，如果打包体积大、请求慢，用户也感知不到。这一层优化见效最快，也最容易被忽略。
- 第三方库务必 按需引入（如 Element Plus 的
defineComponent方式，或 unplugin-vue-components 自动导入） - 静态资源走 CDN，配合 public 目录外链 或构建时替换 base URL
- Vite 项目开启 rollupOptions.external 抽离 vue、vue-router 等基础依赖，利用浏览器缓存
- 图片启用 懒加载 + webp 格式 + 尺寸约束，大图加 loading 占位，避免布局偏移（CLS）
