性能提示

有很多功能和配置项可以调整以提高应用程序的性能。本页列出了一些推荐的设置。

常规

您应该定期更新到 @opennextjs/cloudflare (opens in a new tab) 的最新可用版本，以获得最新的性能和安全更新。

缓存

缓存可以通过仅在数据更改/页面重新生成时获取数据来大幅提高应用程序的性能。

为了充分利用缓存，您应该首先阅读 Next.js 如何实现缓存。"Next.js 中的缓存"指南 (opens in a new tab) 是一个不错的起点。

然后您应该检查 如何配置缓存 以适用于 OpenNext 适配器。参见下文获取一些建议。

增量缓存

增量缓存是包含所有缓存数据的存储（即页面、fetch、unstable_cache）。

如果您的站点是 SSG，您应该使用基于 Workers Static Assets 的缓存。这是最快的可用选项。请注意，由于 Workers Static Assets 是只读的，此选项不能与重新验证一起使用。

当您的应用程序使用重新验证时，请改用基于 R2 的存储。我们建议以下设置以获得最佳性能：

• 通过使用 withRegionalCache(...) 包装处理器来使用区域缓存
  • 使用 long-lived 模式
  • 您应该不需要显式设置 shouldLazilyUpdateOnCacheHit 或 bypassTagCacheOnCacheHit，因为它们默认设置为性能最高的模式
• 设置 自动缓存清除

标签缓存

标签缓存并不是真正的缓存。它仅存储标签被重新验证的时间戳。

它应该为使用 revalidateTag 或 revalidatePath 的基于 App-Router 的应用程序进行配置。

基于 D1 的标签缓存仅应在您的站点接收低流量时使用。基于 Durable Object 的标签缓存是大多数站点的推荐选项。参见 参考指南 了解可用的配置选项。

专门使用 revalidateTag（而不使用 revalidatePath）的应用程序将受益于使用 withFilter 包装器和 softTagFilter 过滤器。

静态资产

您应该添加一个 public/_headers 文件来缓存应用程序提供的静态资产。

参见 Cloudflare 文档 (opens in a new tab) 了解默认值和语法的详细解释。

多个 Workers (opens in a new tab)

将中间件和主服务器部署到不同的 Workers 有助于提高性能。因为当页面可以从缓存中检索时，完全可以绕过主服务器。

排查性能问题

您可以对代码进行性能分析以排查性能问题。

构建未最小化的代码

当代码未最小化时，代码性能分析结果更易阅读，您可以使用以下设置生成未最小化的代码

next.config.ts

const nextConfig = {
  // ...
  experimental: {
    serverMinification: false,
  },
  webpack: (config) => {
    config.optimization.minimize = false;
    return config;
  },
};

CLI

构建应用程序时使用 --noMinify 选项：

opennextjs-cloudflare build --noMinify

记录性能分析

您应该首先通过运行以下命令启动应用程序的本地版本

opennextjs-cloudflare preview

应用程序运行后，遵循 Workers 文档中的步骤 (opens in a new tab) 记录 CPU 性能分析。

然后您可以检查性能分析结果，并检查应用程序的任何特定部分是否意外缓慢。