如何解决TypeScript-Next.js 14开发环境编译缓慢问题

一、调整Next.js核心配置 #

• 启用增量编译并剥离类型检查：在next.config.js中配置，让Next.js专注于代码编译，把类型检查单独拆分出来

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      incrementalCacheHandlerPath: require.resolve('next/dist/server/lib/incremental-cache/file-system-cache'),
    },
    typescript: {
      ignoreBuildErrors: true, // 开发环境跳过类型检查，单独用tsc监听
    },
    webpack: (config) => {
      // 启用文件系统缓存，加快重复编译速度
      config.cache = {
        type: 'filesystem',
        buildDependencies: {
          config: [__filename],
        },
      }
      return config
    },
  }
  module.exports = nextConfig
  

二、优化TypeScript编译配置 #

• 缩小检查范围并启用增量类型检查：修改tsconfig.json，减少不必要的类型检查工作

  {
    "compilerOptions": {
      "skipLibCheck": true, // 跳过第三方库的类型检查，大幅节省时间
      "incremental": true, // 启用增量类型检查，只检查改动的文件
      "tsBuildInfoFile": ".tsbuildinfo", // 存储增量检查信息的文件
      "noEmit": true, // 开发环境无需生成编译产物
      "strict": false // 如果不是必须，暂时关闭严格模式，后续再逐步开启
    },
    "include": ["src/**/*", "app/**/*", "pages/**/*"], // 只检查业务代码目录
    "exclude": ["node_modules", ".next", "dist", "**/*.test.ts", "**/*.spec.ts"] // 排除无需检查的目录
  }
  

三、优化依赖与工具链 #

• 升级到最新稳定版：确保Next.js、TypeScript、Node.js都是最新稳定版本，新版本通常包含大量性能优化（比如TypeScript 5.x的编译速度提升、Next.js 14的App Router优化）
• 清理冗余依赖：删除package.json中未使用的依赖，尤其是体积大、编译时需要处理的库
• 确保使用SWC：Next.js默认用SWC替代Babel，不要手动切换回Babel；如果必须用Babel，尽量减少插件数量，只保留必要的转换逻辑

四、优化开发工作流 #

• 单独运行类型检查：开发时打开另一个终端窗口，执行tsc --watch单独做类型检查，让Next.js的编译流程不被类型检查阻塞
• 避免大范围代码改动：尽量不要修改全局样式、公共基础组件的核心逻辑，这类改动会触发大量依赖文件的重新编译
• 启用快速刷新：确保Next.js的Fast Refresh功能正常开启，默认是启用的，不要在配置中禁用

五、系统与硬件层面优化 #

• 分配足够内存：启动开发服务器时增加Node.js的内存限制，比如执行NODE_OPTIONS="--max-old-space-size=8192" npm run dev，分配8GB内存给Node.js
• 使用SSD存储：将项目放在固态硬盘上，编译过程中频繁的缓存读写会比HDD快很多
• 释放系统资源：关闭不必要的后台程序，减少CPU和内存占用，让编译过程获得更多系统资源

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