性能优化有一套「发现 → 定位 → 解决」的闭环方法论。本文以真实项目为蓝本,从编码阶段到上线监控,给出一条可落地的 Vue 性能优化路线图。
一、量化指标定位性能瓶颈
任何优化之前先用量化证据锁死问题。
- Lighthouse 一键跑分:首屏、交互、CLS 三条红线
- Performance 面板录制:定位长帧、强制同步布局
- 埋点 SDK:把 FP、FCP、TTI、长任务扔给监控平台
只有当指标低于业务阈值(如 TTI > 3 s)才进入下一步。
二、优化编码
1.组件拆分与懒加载
- 路由级:
const User = () => import('@/views/User.vue')
- 组件级:
defineAsyncComponent
让 Modal 按需加载 - 列表级:虚拟滚动
vue-virtual-scroller
只渲染可见行
2.响应式最小化
ref
优于reactive
:减少深层 Proxy 开销- 冻结只读数据:
Object.freeze(list)
跳过追踪 - 事件防抖:
lodash/debounce
把高频输入压到 300 ms 一次
3.缓存一切可缓存
- 组件缓存:
<KeepAlive include="UserCard">
- 计算缓存:
computed
自动跳过无依赖更新 - 请求缓存:
swr
策略避免重复接口调用
三、网络资源优化
- 图片:统一 WebP + CDN 自适应宽度
- 图标:SVG Symbol 代替雪碧图,减少一次 HTTP 往返
- 第三方库:
lodash-es
按需导入- 大体积库走 CDN,webpack 外部化
- 代码分块:SplitChunksPlugin 自动分离 vendor、runtime、async chunk
四、打包构建优化
- Tree-Shaking:ESM + sideEffects 白名单
- 并行压缩:esbuild-loader 把 Terser 换成 Go 实现
- SourceMap:生产环境用 hidden-source-map,既定位又保密
- Bundle 分析:
vite-bundle-analyzer
找出体积大户
总结
性能优化不是一次性冲刺,而是持续交付的马拉松。用数据说话,用工具落地,用监控守护------让每一次代码提交都带着性能基因,用户才会在毫秒级体验中感受到「丝滑」。