前端性能优化：从 5 秒到 0.5 秒

页面加载每慢 1 秒，转化率下降 7%。

性能指标

• FCP: 首次内容绘制 (<1.8s)
• LCP: 最大内容绘制 (<2.5s)
• CLS: 累积布局偏移 (<0.1)

优化策略

1. 资源压缩

// 启用 Gzip/Brotli
// CSS/JS 压缩
// 图片压缩：WebP 格式

2. 懒加载

// 图片懒加载
<img loading="lazy" src="image.jpg">

// 路由懒加载
const Home = () => import('./Home.vue')

3. 代码分割

// Webpack 分割
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

4. CDN 加速

静态资源上 CDN，就近访问。

5. 缓存策略

Cache-Control: max-age=31536000
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"

6. 减少重绘重排

/* 使用 transform 代替 top/left */
.element {
  transform: translate(100px, 100px);
}

7. 预加载关键资源

<link rel="preload" href="font.woff2" as="font">
<link rel="prefetch" href="next-page.js">

性能监控

• Lighthouse
• WebPageTest
• Chrome DevTools

优化不是一次性的，是持续的过程。