前端性能优化实战

代码分割通过动态 import 和 React.lazy 按需加载路由与组件，减少首屏 JavaScript 体积。Next.js 的 App Router 默认按路由自动分割。

图片优化使用 Next.js Image 组件，自动提供 WebP/AVIF 格式、响应式尺寸和懒加载。Core Web Vitals 中的 LCP、FID、CLS 是 Google 排名与用户体验的核心指标。

使用 Lighthouse 和 Web Vitals 扩展进行性能审计，优先修复影响最大的瓶颈，如大体积 bundle、未优化的图片和阻塞渲染的资源。