vercel-cost-tuning

Vercel 成本优化

概述

了解 Fluid Compute 定价模式、缩短函数执行时间、利用边缘缓存避免调用函数，并配置支出管理，从而优化 Vercel 成本。内容涵盖套餐对比、成本驱动因素和监控。

前提条件

• 有权访问 Vercel 账单控制面板
• 了解当前部署架构
• 有权访问 Vercel Analytics，以了解使用模式

操作说明

步骤 1：了解定价模式

对于新项目，Vercel 使用 Fluid Compute 定价：

资源	Hobby（免费）	Pro（$20/成员/月）	Enterprise
带宽	100 GB	含 1 TB	自定义
Serverless 执行	100 GB-hrs	含 1000 GB-hrs	自定义
Edge Function 调用次数	500K	含 1M	自定义
Edge Middleware 调用次数	1M	含 1M	自定义
图像优化	1000	含 5000	自定义
每日构建次数	6000	6000	自定义
并发构建数	1	1（可增加）	自定义

Fluid Compute 计费明细：

• 活跃 CPU 时间：按实际 CPU 使用量计费，精确到毫秒
• 分配内存：按分配内存的 GB 秒计费
• 优势：只需为实际工作付费，无需为闲置等待付费（例如等待数据库响应）

步骤 2：识别成本驱动因素

# Check usage via API
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v2/usage" | jq .

# Top cost drivers on Vercel:
# 1. Serverless function execution time (CPU + memory)
# 2. Bandwidth (large responses, unoptimized images)
# 3. Edge Middleware invocations (runs on EVERY request)
# 4. Image optimizations (each unique transform costs)
# 5. Build minutes (frequent deploys or slow builds)

步骤 3：降低函数执行成本

// 1. Right-size function memory — don't over-allocate
// vercel.json
{
  "functions": {
    "api/lightweight.ts": { "memory": 128 },    // Simple JSON responses
    "api/standard.ts": { "memory": 512 },       // Database queries
    "api/heavy.ts": { "memory": 1024 }          // Image processing
  }
}

// 2. Move read-only endpoints to Edge Functions (cheaper, no cold starts)
// api/config.ts
export const config = { runtime: 'edge' };
export default function handler() {
  return Response.json({ features: ['a', 'b'] });
}

// 3. Cache function responses at the edge
// Eliminates function invocations entirely for cached routes
export default function handler(req, res) {
  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate=86400');
  res.json(data);
}

步骤 4：降低带宽成本

// vercel.json — compress and cache aggressively
{
  "headers": [
    {
      "source": "/static/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ],
  "images": {
    "sizes": [640, 750, 1080],
    "formats": ["image/avif", "image/webp"],
    "minimumCacheTTL": 86400
  }
}

降低带宽的关键方法：

• 使用 Vercel 的图像优化功能（自动转换为 WebP/AVIF）
• 为静态资源设置较长的缓存标头
• 使用 ISR 提供静态 HTML，而非 SSR
• 压缩 API 响应（Vercel 会自动使用 Brotli 压缩）

步骤 5：优化 Middleware 成本

Middleware 会在每个匹配的请求上运行。请尽量缩小其作用范围：

// middleware.ts — scope to specific paths only
export const config = {
  matcher: [
    // Only run middleware on API routes and protected pages
    '/api/:path*',
    '/dashboard/:path*',
    // Skip static files, images, and public assets
    '/((?!_next/static|_next/image|favicon.ico|public).*)',
  ],
};

export function middleware(request) {
  // Keep logic minimal — this runs on every matched request
  // Avoid: database queries, external API calls, heavy computation
  // Good: cookie checks, header modifications, redirects
}

步骤 6：配置支出管理

在 Vercel 控制面板的 Settings > Billing > Spend Management 中：

Default budget: $200/month on-demand usage
Options:
- Set custom budget limit
- Enable hard limit (pauses all projects when reached)
- Configure email alerts at 50%, 75%, 90%, 100%

# Check current usage against budget via API
curl -s -H "Authorization: Bearer $VERCEL_TOKEN" \
  "https://api.vercel.com/v2/usage?teamId=team_xxx" \
  | jq '{period: .period, bandwidth: .bandwidth, execution: .serverlessFunctionExecution}'

成本优化检查清单

操作	影响	工作量
添加 s-maxage 缓存标头	高 — 避免调用函数	低
为简单端点使用 Edge Functions	中 — 比 serverless 更便宜	低
为函数选择合适的内存大小	中 — 降低 GB-hr 成本	低
限定 middleware 匹配范围	中 — 减少边缘调用次数	低
启用图像优化	中 — 降低带宽	低
使用 ISR 替代 SSR	高 — 提供缓存的 HTML	中
提升构建速度	低 — 减少构建分钟数	中
设置支出管理提醒	安全 — 避免意外账单	低

输出

• 为各端点选择合适的函数内存大小
• 通过边缘缓存减少函数调用
• 限定 Middleware 的作用范围，以尽量减少调用次数
• 配置支出管理和预算提醒
• 通过 API 监控用量

错误处理

错误	原因	解决方案
账单意外激增	高流量端点未缓存	在响应中添加 s-maxage
项目已暂停	达到支出硬性上限	提高上限或优化用量
图像优化额度已用尽	独特图像转换次数过多	缩减 sizes 数组，延长缓存 TTL
构建分钟数已用尽	构建缓慢或部署次数过多	使用 ignoreCommand 跳过非代码变更

示例

通过可衡量的回滚降低调用次数激增

对于高流量读取端点，在预览部署中添加保守的 s-maxage 响应策略，并通过合成请求对比调用次数、缓存命中率和响应正确性与上一版本的差异。发布前设置支出提醒；除非负责人接受其影响范围，否则不要设置会暂停整个账户的硬性上限。如果个性化内容被意外缓存，请立即回滚标头变更，在支持的情况下仅清除受影响部署的缓存，并记录此次回归。

资源

• Vercel 定价
• Fluid Compute 定价
• 支出管理
• 限制
• 用量 API

后续步骤

有关参考架构，请参阅 vercel-reference-architecture。