传统 CDN 主要缓存静态资源，对于动态内容无能为力。边缘计算（Edge Computing）将计算能力推到离用户最近的网络节点，可以在边缘节点上执行 JavaScript 代码，实现动态内容的加速、个性化渲染、A/B 测试、甚至安全防护。Cloudflare Workers 是目前最成熟的边缘计算平台，与 WordPress 结合可以带来革命性的性能提升。

边缘 CDN 的优势 超越了传统的静态缓存。当用户请求到达边缘节点时，边缘 Worker 可以：

  • 检查请求的 URL 和 Cookie，决定是否返回缓存页面

  • 如果缓存未命中，向源站（WordPress）发起请求，获取 HTML 后缓存到边缘

  • 对响应内容进行修改（比如添加 HTML 片段、替换文本、插入脚本）

  • 根据用户地理位置返回不同语言版本

  • 在边缘节点上处理表单提交和 API 请求，减少源站负载

Cloudflare Workers 与 WordPress 的典型集成方案：

第一步，在 Cloudflare 仪表盘中创建 Worker，编写 JavaScript 代码处理请求：

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const cacheKey = new Request(url.toString(), request);
  const cache = caches.default;
  
  // 尝试从边缘缓存获取响应
  let response = await cache.match(cacheKey);
  if (response) {
    return response;
  }
  
  // 缓存未命中，向源站请求
  const originResponse = await fetch(request);
  
  // 只缓存 GET 请求且响应成功的 HTML
  if (request.method === 'GET' && originResponse.status === 200 && 
      originResponse.headers.get('content-type')?.includes('text/html')) {
    // 克隆响应以便缓存
    const responseToCache = originResponse.clone();
    // 设置缓存时间（如 1 小时）
    const headers = new Headers(responseToCache.headers);
    headers.set('Cache-Control', 'public, max-age=3600');
    const cachedResponse = new Response(responseToCache.body, {
      status: responseToCache.status,
      statusText: responseToCache.statusText,
      headers: headers,
    });
    event.waitUntil(cache.put(cacheKey, cachedResponse));
  }
  
  return originResponse;
}

动态内容智能化缓存 是边缘计算的核心能力。你可以根据 Cookie 判断用户是否登录，登录用户不缓存页面，非登录用户则从边缘返回缓存：

async function handleRequest(request) {
  const cookie = request.headers.get('Cookie') || '';
  if (cookie.includes('wordpress_logged_in')) {
    // 登录用户直接请求源站
    return fetch(request);
  }
  // 非登录用户使用缓存
  return fetchWithCache(request);
}

HTML 流式修改 是边缘计算的另一个高级应用。在返回 HTML 之前，你可以在边缘节点上修改内容，比如插入一个动态的 Cookie 通知条、根据用户 IP 显示不同地区的电话号码、或者添加性能监控脚本：

async function handleRequest(request) {
  const response = await fetchWithCache(request);
  const html = await response.text();
  
  // 在 </body> 前插入一段脚本
  const modifiedHtml = html.replace('</body>', `
    <script>
      console.log('从边缘节点注入的脚本');
    </script>
    </body>
  `);
  
  return new Response(modifiedHtml, {
    status: response.status,
    headers: response.headers,
  });
}

智能路由与 A/B 测试 也可以在边缘节点上实现。根据请求头中的用户信息，将流量分配到不同版本的后端：

  
async function handleRequest(request) {
  const url = new URL(request.url);
  const userAgent = request.headers.get('User-Agent') || '';
  
  // 移动端用户路由到移动版后端
  if (userAgent.includes('Mobile')) {
    url.hostname = 'mobile.yourdomain.com';
  }
  
  // A/B 测试：50% 用户访问新版
  if (Math.random() < 0.5) {
    url.hostname = 'beta.yourdomain.com';
  }
  
  return fetch(url.toString(), request);
}

缓存预热 是边缘 CDN 的进阶功能。在网站发布新内容时，自动触发边缘节点的缓存预热，确保用户访问时缓存已经生效：

// 在 WordPress 文章发布时，通过 Webhook 触发
async function warmCache(urls) {
  for (const url of urls) {
    await fetch(url, { cf: { cacheTtl: 3600 } });
  }
}

成本与效果 方面，Cloudflare Workers 的免费额度为每天 10 万次请求，对大多数中小网站足够。使用边缘 CDN 后，全球用户的访问延迟可以从几百毫秒降低到几十毫秒，Core Web Vitals 的 LCP 和 FID 指标会有显著改善。

边缘计算代表了 WordPress 性能优化的下一个前沿。将计算推向边缘，不仅减轻了源服务器和数据库的压力，还让全球用户都能获得一致的快速体验。对于面向全球用户的网站，边缘 CDN 是值得认真评估的优化方案。