前端性能优化实战：我踩过的坑和总结的经验

前言：性能优化是前端开发的永恒话题。从最初盲目地"压缩代码"到后来系统地分析和优化，今天把这些经验整理出来，希望能帮你少走一些弯路。

性能优化的核心思路

在开始之前，先明确一个原则：先测量，再优化。

bash

# 常用性能分析工具
- Chrome DevTools Lighthouse
- WebPageTest
- Chrome Performance 面板
- bundle-analyzer (打包分析)

我的优化流程：

用 Lighthouse 跑分，找出瓶颈
用 Performance 面板分析运行时性能
用 bundle-analyzer 分析包体积
针对性优化
再次测量验证效果

一、加载性能优化

技巧 1：代码分割的正确姿势

// ❌ 错误：所有代码打包在一起
import { ComponentA } from './components'
import { ComponentB } from './components'
import { ComponentC } from './components'

// ✅ 正确：路由级别分割
const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))
const Dashboard = lazy(() => import('./pages/Dashboard'))

// ✅ 进阶：组件级别分割
const HeavyComponent = lazy(() => import('./components/HeavyComponent'))

// 配合 Suspense 使用
<Suspense fallback={<Loading />}>
  <HeavyComponent />
</Suspense>

实际效果：首屏包体积从 2MB 降到 400KB

技巧 2：图片优化的组合拳

jsx

// 1. 响应式图片
<img 
  src="image-800.jpg"
  srcSet="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="描述"
/>

// 2. 懒加载
<img 
  src="placeholder.jpg"
  data-src="actual-image.jpg"
  loading="lazy"
  alt="描述"
/>

// 3. 现代格式
// AVIF 通常比 WebP/JPEG 更小（同等观感下压缩率更高），再用 WebP/JPEG 做兼容回退
<picture>
  <source srcSet="image.avif" type="image/avif" />
  <source srcSet="image.webp" type="image/webp" />
  <img src="image.jpg" alt="描述" loading="lazy" />
</picture>

我用的图片优化工具：

XnConvert（批量转换/压缩，适合做 AVIF/WebP 等格式输出）
Squoosh.app（在线压缩）
imagemin（构建时压缩）
Cloudinary/Imgix（CDN 优化）

技巧 3：预加载关键资源

html

<!-- DNS 预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- 预连接 -->
<link rel="preconnect" href="https://api.example.com" />

<!-- 预加载关键资源 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/css/critical.css" as="style" />

<!-- 预获取可能需要的资源 -->
<link rel="prefetch" href="/next-page.js" />

使用场景：

preload：当前页面必需的资源
prefetch：下一页可能需要的资源
preconnect：提前建立连接

技巧 4：Tree Shaking 最大化

// ❌ 错误：引入整个库
import _ from 'lodash'
_.debounce(func, 300)

// ✅ 正确：按需引入
import debounce from 'lodash/debounce'

// ✅ 更好：使用原生或更小的库
import { debounce } from 'throttle-debounce'

// 配置 package.json
{
  "sideEffects": false  // 告诉打包器可以安全删除未使用代码
}

二、运行时性能优化

技巧 5：避免不必要的重渲染

jsx

// ❌ 问题：父组件更新导致子组件无意义渲染
const Parent = () => {
  const [count, setCount] = useState(0)
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <Child data={someObject} />  {/* someObject 每次都是新的 */}
    </div>
  )
}

// ✅ 解决：React.memo + useMemo + useCallback
const Child = React.memo(({ data, onAction }) => {
  console.log('Child rendered')
  return <div>{data.name}</div>
})

const Parent = () => {
  const [count, setCount] = useState(0)
  
  const data = useMemo(() => ({ name: 'John' }), [])
  const onAction = useCallback(() => {}, [])
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <Child data={data} onAction={onAction} />
    </div>
  )
}

技巧 6：虚拟列表处理大数据

jsx

// 场景：渲染 10000 条数据
// ❌ 直接渲染会卡死
{items.map(item => <Item key={item.id} data={item} />)}

// ✅ 使用虚拟列表
import { FixedSizeList } from 'react-window'

const VirtualList = ({ items }) => (
  <FixedSizeList
    height={600}
    itemCount={items.length}
    itemSize={50}
    width="100%"
  >
    {({ index, style }) => (
      <div style={style}>
        <Item data={items[index]} />
      </div>
    )}
  </FixedSizeList>
)

性能对比：

直接渲染：10000 条 → 5-10 秒，内存 200MB+
虚拟列表：10000 条 → <100ms，内存 20MB

技巧 7：防抖和节流

jsx

// 场景：搜索框输入
// ❌ 每次输入都请求
<input onChange={(e) => search(e.target.value)} />

// ✅ 防抖：停止输入后 300ms 再请求
const debouncedSearch = useMemo(
  () => debounce((value) => {
    api.search(value)
  }, 300),
  []
)
<input onChange={(e) => debouncedSearch(e.target.value)} />

// 场景：滚动监听
// ✅ 节流：每 100ms 执行一次
const throttledHandler = useMemo(
  () => throttle(() => {
    handleScroll()
  }, 100),
  []
)
window.addEventListener('scroll', throttledHandler)

技巧 8：Web Worker 处理计算密集型任务

// main.js
const worker = new Worker('./worker.js')

worker.postMessage(data)
worker.onmessage = (e) => {
  console.log('计算结果:', e.data)
}

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data)
  self.postMessage(result)
}

适用场景：

大量数据处理
复杂计算
图片/视频处理

三、缓存策略

技巧 9：HTTP 缓存配置

nginx

# Nginx 配置示例

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

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

# API：根据业务设置
location /api/ {
  add_header Cache-Control "no-cache";
}

技巧 10：Service Worker 离线缓存

// 使用 Workbox 简化配置
import { registerRoute } from 'workbox-routing'
import { CacheFirst, NetworkFirst } from 'workbox-strategies'
import { ExpirationPlugin } from 'workbox-expiration'

// 静态资源：缓存优先
registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif|css|js)$/,
  new CacheFirst({
    cacheName: 'static-resources',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 60,
        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 天
      }),
    ],
  })
)

// API 请求：网络优先
registerRoute(
  /\/api\//,
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 3,
  })
)

四、构建优化

技巧 11：Webpack/Vite 配置优化

// webpack.config.js
module.exports = {
  // 代码分割
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
    runtimeChunk: 'single',
  },
  
  // Tree Shaking
  mode: 'production',
  
  // 压缩
  terserOptions: {
    compress: {
      drop_console: true,  // 生产环境移除 console
      drop_debugger: true,
    },
  },
}

技巧 12：分析打包体积

bash

# 安装分析工具
npm install --save-dev webpack-bundle-analyzer

# webpack 配置
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

plugins: [
  new BundleAnalyzerPlugin({
    analyzerMode: 'static',  // 生成报告文件
  }),
]

# 运行后打开报告，找出体积大的依赖

我优化过的案例：

moment.js → dayjs（200KB → 2KB）
lodash 全量 → 按需（70KB → 5KB）
多个图表库 → 统一用 ECharts（减少重复）

五、性能监控

技巧 13：核心性能指标监控

// 使用 Web Vitals
import { onCLS, onFID, onFCP, onLCP, onTTFB } from 'web-vitals'

onCLS(console.log)  // 累积布局偏移
onFID(console.log)  // 首次输入延迟
onFCP(console.log)  // 首次内容绘制
onLCP(console.log)  // 最大内容绘制
onTTFB(console.log) // 首字节时间

// 发送到分析服务
function sendToAnalytics(metric) {
  const body = {
    name: metric.name,
    value: metric.value,
    delta: metric.delta,
    rating: metric.rating,
    id: metric.id,
    navigationType: metric.navigationType,
    url: window.location.href,
  }
  
  navigator.sendBeacon('/analytics', JSON.stringify(body))
}

技巧 14：错误监控

// 全局错误监听
window.addEventListener('error', (event) => {
  reportError({
    type: 'js-error',
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    stack: event.error?.stack,
  })
})

window.addEventListener('unhandledrejection', (event) => {
  reportError({
    type: 'promise-rejection',
    reason: event.reason,
  })
})

// React 错误边界
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    reportError({
      type: 'react-error',
      error,
      componentStack: errorInfo.componentStack,
    })
  }
  
  render() {
    return this.props.children
  }
}