性能优化编年史:从 6 秒到 800 毫秒的十八项改动

接手时首屏 6.2 秒,交付时 0.8 秒。历时六周,十八项改动,全部记录在案。

第一周:低成本高收益(6.2s → 3.8s)

改动收益代价
开启 gzip-1.4s几乎为零
图片懒加载 + WebP-0.7s
移除 3 个未用依赖-0.3s半天排查

第二周:打包重构(3.8s → 2.1s)

  • 路由级代码分割:主包 1.8MB → 620KB
  • antd 按需引入 + moment 换 dayjs
  • 关键 CSS 内联,其余异步加载

第三、四周:渲染优化(2.1s → 1.2s)

  • 长列表虚拟滚动,首屏只渲染 20 条
  • 接口预取:路由切换时并行请求下一页数据
  • Skeleton 替代 Spinner,感知时间再降一截

第五、六周:服务器端(1.2s → 0.8s)

  • OPcache + 静态片段缓存
  • 数据库慢查询清零(三条索引 + 两处改写)
  • 静态资源上 CDN

复盘

性能优化不是玄学,是度量 → 假设 → 验证的循环。先测,再改,每一项都要有数字。

评论 (2)
热心读者2026-08-15 15:21
正好接手一个 5 秒的项目,照着清单开工了。
阿凯2026-08-16 15:21
表格里连代价都标了,这份记录值一个 Star。

发表评论