前端性能优化：从 5 秒到 1 秒的实战经验

背景

负责公司官网重构，首屏加载时间从 5.2 秒优化到 0.9 秒，分享关键优化点。

优化一：代码分割与懒加载

// ❌ 全部打包
import { Chart, Table, Modal } from "@/components";

// ✅ 按需加载
const Chart = lazy(() => import("@/components/Chart"));
const Table = lazy(() => import("@/components/Table"));

使用 Webpack 或 Vite 的代码分割功能，减少初始包体积。

优化二：图片优化

<!-- 使用 WebP 格式 -->
<img src="image.webp" alt="...">

<!-- 响应式图片 -->
<img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 768px, 1200px"
     src="large.jpg">

<!-- 懒加载 -->
<img loading="lazy" src="image.jpg">

图片体积减少 60%。

优化三：CDN 加速

将静态资源部署到 CDN，利用边缘节点加速。

优化四：减少 HTTP 请求

• 合并小图标为 SVG Sprite
• 使用 CSS 代替图片
• 内联关键 CSS

优化五：启用缓存

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

优化六：使用性能监控

// 监控首屏时间
new PerformanceObserver((list) => {
    list.getEntries().forEach((entry) => {
        console.log("FCP:", entry.startTime);
    });
}).observe({ entryTypes: ["paint"] });

优化效果

指标	优化前	优化后
首屏时间	5.2s	0.9s
LCP	4.8s	1.2s
包体积	2.1MB	380KB

总结

性能优化是持续过程，需要度量和迭代。