前端性能优化：从 3 秒到 300 毫秒的实战经验

背景

接手了一个老项目，首屏加载 3 秒+，用户流失严重。经过一周优化，降到 300 毫秒。分享实战经验。

性能分析

工具

• Chrome DevTools Lighthouse
• WebPageTest
• 浏览器 Network 面板

发现问题

1. 未压缩资源：5MB → 1.2MB
2. 图片未优化：2MB → 400KB
3. 阻塞渲染：12 个 CSS/JS 文件
4. 接口慢：平均 800ms

优化方案

1. 代码分割

// ❌ 之前：全部打包
import { Chart, Table, Modal } from "./components";

// ✅ 优化后：按需加载
const Chart = lazy(() => import("./components/Chart"));
const Table = lazy(() => import("./components/Table"));

配合 React Suspense:

<Suspense fallback={<Loading />}>
  <Chart />
</Suspense>

2. 图片优化

<!-- 响应式图片 -->
<img 
  src="image-400.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  alt="描述"
/>

• 使用 WebP 格式 (体积减少 30%)
• 懒加载非首屏图片
• CDN 加速

3. 资源压缩

// webpack 配置
optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin(), // JS 压缩
    new CssMinimizerPlugin() // CSS 压缩
  ]
}

开启 Gzip/Brotli:

# Nginx 配置
brotli on;
brotli_types text/css application/javascript image/svg+xml;

4. 缓存策略

# 静态资源长期缓存
location ~* \.(js|css|png|jpg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML 不缓存
location ~* \.html$ {
  expires -1;
  add_header Cache-Control "no-cache";
}

5. 接口优化

// ❌ 串行请求
const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

// ✅ 并行请求
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
]);

• 接口聚合：减少请求次数
• 数据预取：预测用户行为
• 服务端渲染：首屏直出

6. 移除无用代码

// 使用 webpack-bundle-analyzer 分析
npm install -D webpack-bundle-analyzer

// 配置
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
plugins: [new BundleAnalyzerPlugin()]

删除未使用的：

• 组件
• 工具函数
• 第三方库

优化结果

指标	优化前	优化后	提升
首屏加载	3.2s	0.3s	90%
资源体积	5MB	0.8MB	84%
Lighthouse	45	95	+50

持续监控

// 性能监控
window.addEventListener("load", () => {
  const perf = performance.getEntriesByType("navigation")[0];
  sendToAnalytics({
    loadTime: perf.loadEventEnd - perf.fetchStart,
    domReady: perf.domContentLoadedEventEnd - perf.fetchStart
  });
});

结语

性能优化是持续过程，不是一次性任务。建立监控、定期分析、持续改进，才能保持良好体验！

#前端 #性能优化 #Web 开发 #JavaScript #用户体验