如何为Next.js本地开发缓存首屏加载编译结果

1. 启用Next.js持久化磁盘缓存 #

Next.js 12及以上版本支持将编译结果持久化到磁盘，只要代码没有变更，下次启动就能直接复用缓存，无需重新编译。在next.config.js中添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    persistentCache: true,
  },
  // 指定缓存目录（可选，默认是.next/cache）
  cacheDirectory: '.next/cache',
}

module.exports = nextConfig

这个配置会把模块编译产物、页面构建结果等都存在磁盘上，重启服务器时直接读取缓存，跳过重复编译步骤。

2. 确保TurboPack（Next.js 13+）的缓存生效 #

如果你的devTurbo命令是启用了TurboPack，建议直接使用官方的next dev --turbo命令，替代自定义的devTurbo，确保TurboPack自带的高效缓存逻辑正常工作，它对模块编译和页面构建的缓存复用能力比传统webpack模式更强。

3. 优化预取脚本的执行时机 #

当前脚本是等服务器端口开放后就发起预取，但此时服务器可能还未完成初始化。可以调整wait-on的监听目标，改为等待Next.js的开发就绪标识文件，确保服务器真正能处理请求：

# 替换原来的wait-on命令
wait-on http://localhost:3000/_next/static/development/_devPagesManifest.js

4. 额外优化点 #

• 升级Node.js到18.x或更高版本：新版本Node对文件系统缓存、模块解析的优化更好，能进一步提升缓存复用效率
• 减少不必要的文件监听：在next.config.js中排除不需要监听的文件/目录，减少服务器启动时的扫描时间：

  const nextConfig = {
    watchOptions: {
      ignored: ['**/node_modules/**', '**/.git/**', '**/.next/**'],
    },
  }
  

当以上配置生效后，只要代码没有变更，第二次启动开发服务器时，Next.js会直接加载磁盘缓存的编译结果，预取页面的请求也会因为页面已经编译完成而瞬间响应，总启动时间会从原来的45-60秒大幅缩短到几秒内。

内容的提问来源于stack exchange，提问作者Ryan