前端性能优化，让页面快到起飞

正文

优化不是玄学，是可量化、可落地的工程手段。

1. 图片懒加载

<img loading="lazy" src="xxx" />

2. 路由懒加载

const Home = () => import('@/views/Home.vue')

3. 开启 gzip/brotli

   nginx 或 vite 插件配置即可。

4. 减少第三方包体积

   使用 lodash-es 替代 lodash。

5. 虚拟列表处理长列表

   推荐：vue-virtual-scroller、react-window

6. 减少重绘重排

   批量修改 DOM，使用 will-change。

7. 合理使用缓存

   localStorage、memory cache、接口缓存。

8. 图片格式替换

   WebP / AVIF 格式。

9. 移除无用代码

   Tree shaking、purgecss。

10. 监控长任务

    使用 Performance 观察 Long Task，优化逻辑。

个人观点 · 仅供参考