上个月接手一个后台项目，首屏加载 3.2 秒，用户反馈「点开要等一下」。经过一周优化，稳定在 1.1 秒左右。下面按收益从高到低记录。
1. 先量化，再优化
优化之前必须建立基线。我使用的是 Lighthouse + 真实用户监控两条线：实验室数据看瓶颈，真实数据看用户感受。
2. 拆包与懒加载
- 路由级代码分割，首屏只加载必要模块
- 图表、编辑器等重型依赖改为动态导入
- 对图片统一使用懒加载与合适的压缩格式
3. 减少主线程阻塞
把非关键逻辑延后到 requestIdleCallback，把大列表改成虚拟滚动，长任务从 320ms 降到 60ms 以内。
4. 缓存策略
静态资源使用内容哈希 + 长缓存；接口按业务特点设置 SWR 缓存，页面切换时优先展示旧数据再后台更新。
结果对比
| 指标 | 优化前 | 优化后 |
|---|---|---|
| 首屏时间 | 3.2s | 1.1s |
| 首次内容绘制 | 1.8s | 0.7s |
| JS 体积 | 860KB | 310KB |
性能优化没有终点，但每一次可量化的提升，都会实实在在反映在留存上。