边缘计算×前端：Cloudflare Workers/Vercel Edge 让你的网站快到离谱

为什么前端需要边缘计算？

传统架构中，用户请求需要穿越半个互联网到达源站服务器：

用户（东京）→ CDN 节点（东京，仅缓存静态）→ 源站（美西，动态计算）
延迟：~10ms          ~150ms 跨太平洋                ~50ms 计算
总计：~210ms

边缘计算把计算逻辑推到离用户最近的节点：

用户（东京）→ Edge 节点（东京，直接计算）
延迟：~10ms        ~5ms 本地计算
总计：~15ms

14 倍延迟降低——这就是边缘计算的威力。

---

三大边缘平台对比

维度	Cloudflare Workers	Vercel Edge Functions	Deno Deploy
运行时	V8 Isolate	V8 Isolate	Deno
冷启动	<5ms	<5ms	~20ms
全球节点	300+ 城市	30+ 区域	35+ 区域
免费额度	10万次/天	按项目计费	100万次/月
语言	JS/TS/WASM	JS/TS	JS/TS/WASM
包大小限制	10MB	4MB	无限制
KV 存储	Workers KV	Edge Config	Deno KV
框架集成	框架无关	Next.js 深度集成	Fresh

---

实战场景一：Geo 路由

根据用户地理位置路由到不同内容，零延迟：

// Cloudflare Workers
export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
    const country = request.cf?.country as string;

    const routes: Record<string, string> = {
      CN: 'https://cn.example.com',
      JP: 'https://jp.example.com',
      US: 'https://us.example.com',
      EU: 'https://eu.example.com',
    };

    const target = routes[country] || routes['US'];

    return Response.redirect(target, 302);
  },
};

Vercel Edge 版本

// middleware.ts (Next.js)
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US';

  const localeMap: Record<string, string> = {
    CN: '/zh-CN',
    TW: '/zh-TW',
    JP: '/ja',
  };

  const locale = localeMap[country] || '/en';

  if (!request.nextUrl.pathname.startsWith(locale)) {
    return NextResponse.redirect(new URL(locale, request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static).*)'],
};

---

实战场景二：A/B 测试

无需客户端 JS，在边缘层直接分流：

export default {
  async fetch(request: Request, env: Env) {
    const url = new URL(request.url);

    // 读取或分配实验组
    let variant = getCookie(request, 'ab-variant');

    if (!variant) {
      variant = Math.random() < 0.5 ? 'control' : 'experiment';
    }

    // 从 KV 读取对应版本的 HTML
    const html = await env.KV.get(`landing:${variant}`);

    const response = new Response(html, {
      headers: { 'Content-Type': 'text/html' },
    });

    // 设置 Cookie 保持分组一致性
    response.headers.append(
      'Set-Cookie',
      `ab-variant=${variant}; Path=/; Max-Age=86400`
    );

    return response;
  },
};

function getCookie(request: Request, name: string): string | null {
  const cookies = request.headers.get('Cookie') || '';
  const match = cookies.match(new RegExp(`${name}=([^;]+)`));
  return match ? match[1] : null;
}

优势对比

方案	首屏闪烁	性能影响	SEO 友好	实现复杂度
客户端 JS 分流	❌ 闪烁	降低 LCP	❌	低
服务端分流	✅ 无闪烁	增加延迟	✅	中
边缘分流	✅ 无闪烁	几乎无影响	✅	中

---

实战场景三：个性化内容

export default {
  async fetch(request: Request, env: Env) {
    const country = request.cf?.country;
    const timezone = request.cf?.timezone;

    // 根据时区显示本地时间
    const localTime = new Date().toLocaleTimeString('zh-CN', {
      timeZone: timezone,
    });

    // 根据国家显示本地货币
    const currencyMap: Record<string, { symbol: string; rate: number }> = {
      CN: { symbol: '¥', rate: 7.2 },
      JP: { symbol: '¥', rate: 150 },
      US: { symbol: '$', rate: 1 },
    };

    const currency = currencyMap[country] || currencyMap['US'];

    // 获取基础页面并注入个性化数据
    const response = await fetch(request);
    const html = await response.text();

    const personalized = html
      .replace('{{LOCAL_TIME}}', localTime)
      .replace('{{CURRENCY_SYMBOL}}', currency.symbol);

    return new Response(personalized, {
      headers: response.headers,
    });
  },
};

---

实战场景四：API 聚合与缓存

在边缘层聚合多个 API，减少客户端请求：

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext) {
    const cache = caches.default;
    const cacheKey = new Request(request.url);

    // 1. 检查边缘缓存
    let response = await cache.match(cacheKey);
    if (response) return response;

    // 2. 并行请求多个 API
    const [user, posts, notifications] = await Promise.all([
      fetch('https://api.example.com/user', { headers: request.headers }),
      fetch('https://api.example.com/posts?limit=10'),
      fetch('https://api.example.com/notifications/unread'),
    ]);

    // 3. 聚合响应
    const data = {
      user: await user.json(),
      posts: await posts.json(),
      notifications: await notifications.json(),
    };

    response = new Response(JSON.stringify(data), {
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'public, max-age=60',
      },
    });

    // 4. 写入边缘缓存
    ctx.waitUntil(cache.put(cacheKey, response.clone()));

    return response;
  },
};

---

边缘 KV 存储：全球低延迟数据库

Cloudflare Workers KV

// 写入
await env.KV.put('user:123:preferences', JSON.stringify({
  theme: 'dark',
  language: 'zh-CN',
}));

// 读取（最终一致性，~60s 全球同步）
const prefs = await env.KV.get('user:123:preferences', 'json');

// 列表
const list = await env.KV.list({ prefix: 'user:123:' });

Vercel Edge Config

import { get } from '@vercel/edge-config';

// 读取配置（全球同步，~1s 延迟）
const flags = await get('feature-flags');

if (flags?.newHomepage) {
  return newHomepage();
}
return oldHomepage();

---

从传统架构迁移

迁移路径

阶段 1：静态资源上 CDN（1-2 天）
  → HTML/JS/CSS/图片 → CDN 边缘缓存
  → 动态请求仍走源站

阶段 2：边缘中间件（1-2 周）
  → 重定向、A/B 测试、Geo 路由 → Edge
  → 业务逻辑仍在源站

阶段 3：轻量 API 边缘化（2-4 周）
  → 读多写少的 API → Edge + KV
  → 写操作仍走源站

阶段 4：重度逻辑边缘化（按需）
  → SSR → Edge SSR
  → 流式响应 → Edge Streaming

注意事项

限制	说明	应对
无 Node.js API	没有 fs、path 等	使用 Web API 替代
执行时间限制	Workers: 30ms (免费) / 30s (付费)	拆分长任务
包大小限制	Workers: 10MB	Tree-shaking、WASM
无全局状态	每次请求独立 Isolate	使用 KV/D1 持久化
冷启动虽快但非零	V8 Isolate ~5ms	预热关键路由

---

性能实测

工具库网站使用 Cloudflare CDN + 静态导出架构：

指标              传统 SSR    边缘静态
TTFB              200-500ms   10-30ms
LCP               1.5-3s      0.3-0.8s
全球 P50 延迟     150ms       15ms
全球 P99 延迟     800ms       50ms

---

总结

边缘计算是前端性能优化的终极武器——不是在服务器上优化 50ms，而是把 150ms 的网络延迟降到 5ms。2026 年，如果你的动态页面还没有跑在边缘上，你正在给用户白白浪费 100ms+ 的等待时间。从 Geo 路由、A/B 测试到 API 聚合，边缘计算让前端开发者拥有了"在全球 300+ 城市部署代码"的超能力。