VS Code调试Vite+React+TS项目启动缓慢，出现source-map超时警告

问题原因 #

1. Sourcemap 类型与调试工具兼容性问题：Vite 开发模式默认生成的 sourcemap 类型（如inline-source-map）包含完整代码映射信息，体积较大，VS Code 的 js-debug 工具解析这类 sourcemap 时容易超时，触发“Processing source-maps of XXX.js took longer than YYY ms”警告，导致调试启动时页面空白等待。
2. 调试工具的默认等待策略：js-debug 默认会等待所有 sourcemap 处理完成后才允许页面执行，这进一步拉长了启动等待时间——即使是全新的基础模板项目，React 核心依赖的 sourcemap 解析也会消耗不少时间。

解决方法 #

1. 调整 Vite 的 Sourcemap 配置 #

开发模式下使用更轻量化的 sourcemap 类型，在保证调试定位能力的同时减少解析耗时。修改vite.config.ts：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    sourcemap: 'cheap-module-source-map'
  }
})

cheap-module-source-map去掉了列信息，生成和解析速度更快，完全满足日常调试中定位到行的需求。

2. 优化 VS Code 调试配置 #

在.vscode/launch.json中调整参数，平衡启动速度和断点定位准确性：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "pauseForSourceMap": false,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "/*": "${webRoot}/*"
      }
    }
  ]
}

• pauseForSourceMap: false：让页面无需等待所有 sourcemap 解析完成即可加载，加快启动速度。
• sourceMapPathOverrides：确保调试工具能快速将编译后的代码映射回原始 TS 文件，避免断点定位到生成的 JS 文件后延迟跳转。

另外，建议开启 VS Code 的 js-debug 预览版优化：打开设置，搜索debug.javascript.usePreview并勾选启用，新版工具对 Vite 生态的 sourcemap 处理有针对性优化。

3. 排除第三方依赖的 Sourcemap #

如果不需要调试第三方库的代码，可以在 Vite 配置中排除node_modules下的文件生成 sourcemap，减少需要处理的文件量：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    sourcemap: {
      exclude: ['node_modules/**']
    }
  }
})

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