Claude代码生成图文卡片的工程实践与性能优化

1次阅读

没有评论

共计 1789 个字符，预计需要花费 5 分钟才能阅读完成。

在初期使用 Claude API 生成图文卡片时，我们遇到了两个典型问题：

性能瓶颈 ：当并发请求超过 50QPS 时，API 响应时间从平均 200ms 骤增至 1.5s，且触发限流（429 错误）。前端同步渲染模式导致页面卡顿，首屏时间超过 3 秒
样式失控 ：生成的卡片在不同平台（微信 /WebView/H5）显示差异明显，特别是 flex 布局在 iOS Safari 上的表现异常，字体加载出现 FOIT（Flash of Invisible Text）现象

对比了三种主流方案：

SSR（Next.js）：
优点：SEO 友好，首屏性能好
缺点：服务器成本高，Claude API 延迟直接影响 TTFB
CSR（React+SWR）：
优点：客户端资源利用率高
缺点：低端设备渲染性能差
边缘计算（Cloudflare Workers）：
优点：全球低延迟
缺点：调试困难

最终方案 ：
– 边缘缓存 + 客户端异步渲染
– 技术栈：Cloudflare CDN → Redis → Web Workers → Vanilla Extract

// 缓存键设计：claude:hash(apiKey+prompt)
const generateCacheKey = (apiKey: string, prompt: string): string => {const hash = crypto.createHash('sha256')
  return `claude:${hash.update(apiKey + prompt).digest('hex')}`
}

// 缓存配置：// - 热门内容：TTL 1 小时（高频查询）// - 普通内容：TTL 10 分钟
// - 错误响应：TTL 30 秒（快速恢复）const getTTL = (contentType: 'hot' | 'normal' | 'error'): number => {
  return {
    hot: 3600,
    normal: 600,
    error: 30
  }[contentType]
}

// worker.ts
self.onmessage = (e) => {const { html, css} = parseClaudeResponse(e.data)

  // 使用 OffscreenCanvas 避免阻塞主线程
  const canvas = new OffscreenCanvas(800, 600)
  renderCard(canvas, { html, css})

  self.postMessage({blob: await canvas.convertToBlob()
  })
}

// 主线程调用
const worker = new Worker('./worker.ts')
worker.postMessage(apiResponse)
worker.onmessage = (e) => {img.src = URL.createObjectURL(e.data.blob)
}

使用 Vanilla Extract 实现原子化样式：

// cardStyles.css.ts
import {style} from '@vanilla-extract/css';

export const card = style({
  display: 'flex',
  // 自动添加 hash 类名如 .card_absd123
  variants: {
    platform: {wechat: { padding: '12px'},
      web: {padding: '16px'}
    }
  }
});