Next JS 13 App项目在VS Code中保存及智能提示卡顿问题求助

问题确认 #

你的情况是典型的App Router项目开发时内存累积、重复编译引发的VS Code性能下降，具体表现：

• 开发服务运行越久，文件保存、代码提示、格式化的延迟越严重
• 反复编辑page.tsx会触发Next.js多次编译，切换文件时卡顿加剧
• 重启VS Code和开发服务后暂时恢复，但一段时间后问题复发
• 仅App Router项目受影响，React/Next.js 13 Pages项目运行正常
• 已尝试将.next加入tsconfig、禁用扩展，无效

可行解决步骤 #

1. 限制Next.js开发服务器的内存缓存

App Router默认缓存策略可能随运行时间积累过多内存，修改next.config.js限制缓存大小并切换到文件系统缓存：

/** @type {import('next').NextConfig} */
const nextConfig = {
  cacheMaxMemorySize: 52428800, // 限制内存缓存为50MB
  webpack: (config) => {
    config.cache = {
      type: 'filesystem',
      cacheDirectory: './.next/cache/webpack',
      maxMemoryGenerations: 1, // 减少内存缓存代际数量
    };
    return config;
  },
};

module.exports = nextConfig;

通过限制内存缓存、改用文件缓存，避免内存溢出导致的编译与VS Code联动卡顿。

2. 优化VS Code的TypeScript服务配置

在项目根目录的.vscode/settings.json中添加以下配置，降低TypeScript服务的计算负担：

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.inlayHints.parameterNames.enabled": "none",
  "files.exclude": {
    "**/.next": true,
    "**/node_modules": true
  },
  "search.exclude": {
    "**/.next": true,
    "**/node_modules": true
  }
}

• 使用项目本地TS版本避免版本冲突
• 关闭不必要的内嵌提示减少计算量
• 明确排除.next和node_modules目录，降低VS Code索引压力

3. 调整Prettier/ESLint的运行策略

App Router的文件结构会让格式化工具每次保存扫描大量文件，可做以下调整：

• 关闭自动格式化，改为手动触发（快捷键Ctrl+Shift+I）：

  // .vscode/settings.json
  {
    "editor.formatOnSave": false
  }
  

• 开启ESLint缓存，避免重复校验：

  // .eslintrc.json
  {
    "cache": true,
    "cacheLocation": "./.eslintcache"
  }
  

4. 定期清理缓存

• 每次重启开发服务前，手动删除.next和node_modules/.cache目录
• 在VS Code中执行Ctrl+Shift+P → Developer: Reload Window和TypeScript: Restart TS Server
• 删除.vscode/.tsbuildinfo文件（如果存在），重置TypeScript编译缓存

5. 排查项目代码问题

• 检查是否存在循环导入：App Router的组件嵌套结构容易出现循环依赖，导致TS反复编译
• 检查page.tsx中是否有不当的服务端/客户端组件混用，比如在客户端组件中频繁调用服务端函数
• 更新Next.js到最新稳定版：部分旧版App Router存在内存泄漏bug，新版本已修复

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