Vercel 部署优化指南

1. 构建优化

// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true,
    optimizePackageImports: ['lucide-react', 'date-fns']
  },
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

2. 开启 Analytics

npm install @vercel/analytics @vercel/speed-insights

import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function Layout({ children }) {
  return (
    <html>
      <body>{children}</body>
      <Analytics />
      <SpeedInsights />
    </html>
  )
}

3. Edge Runtime

export const runtime = 'edge'

export async function GET(request: Request) {
  // 在边缘节点执行，延迟更低
  return Response.json({ status: 'ok' })
}

4. ISR 增量静态再生

// 每 60 秒重新验证
export const revalidate = 60

export default async function Page() {
  const data = await fetch('https://api.example.com/data')
  return <Component data={data} />
}

5. 环境变量管理

# 通过 Vercel CLI 设置
vercel env add DATABASE_URL production
vercel env add API_SECRET preview

Vercel 部署优化指南

1. 构建优化

// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true,
    optimizePackageImports: ['lucide-react', 'date-fns']
  },
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

2. 开启 Analytics

npm install @vercel/analytics @vercel/speed-insights

import { Analytics } from '@vercel/analytics/react'
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function Layout({ children }) {
  return (
    <html>
      <body>{children}</body>
      <Analytics />
      <SpeedInsights />
    </html>
  )
}

3. Edge Runtime

export const runtime = 'edge'

export async function GET(request: Request) {
  // 在边缘节点执行，延迟更低
  return Response.json({ status: 'ok' })
}

4. ISR 增量静态再生

// 每 60 秒重新验证
export const revalidate = 60

export default async function Page() {
  const data = await fetch('https://api.example.com/data')
  return <Component data={data} />
}

5. 环境变量管理

# 通过 Vercel CLI 设置
vercel env add DATABASE_URL production
vercel env add API_SECRET preview