Source Map 是用于将压缩/编译后代码映射回原始源码的 JSON 文件，核心字段包括 sources、names 和 Base64 VLQ 编码的 mappings；由 Webpack、TSC 等工具生成，通过 sourceMappingURL 注释启用，调试时提升可读性但需注意上线安全。
Source Map 是一种映射文件，用来把压缩、混淆或编译后的 JavaScript 代码，准确对应回原始的、可读的源代码位置。
Source Map 的核心作用
它不是运行时必需的，而是在开发调试阶段起关键作用。浏览器开发者工具（如 Chrome DevTools）通过它，让你在查看压缩版 JS 时，依然能像调试原始代码一样：断点打在 .ts 或未压缩的 .js 上，错误堆栈显示原始行号和文件名，变量名也保持可读。
它怎么建立映射关系
Source Map 本质是一个 JSON 文件（通常以 .map 结尾），里面包含三类关键信息：
- sources：原始源文件路径列表，比如 ["src/index.ts", "src/utils.js"]
- names：原始变量/函数名列表，比如 ["getUser", "apiUrl", "fetchData"]
- mappings：最核心字段，用一种紧凑的 Base64 VLQ 编码格式，逐段描述“压缩后某位置 → 原始文件第几行第几列、用了哪个 name”
例如，压缩后代码第 123 行第 45 列的 token，mapping 可能指向 sources[0] 的第 8 行第 12 列，name 是 "handleClick" —— 浏览器就据此还原显示。
立即学习“Java免费学习笔记（深入）”；
如何生成和启用 Source Map
常见构建工具默认支持：
- Webpack：设置 devtool: 'source-map'（生产环境可用 'hidden-source-map'，只供错误监控平台解析）
- TSC（TypeScript）：编译时加 --sourceMap 或 tsconfig.json 中设 "sourceMap": true
- UglifyJS / Terser：命令行加 --source-map 参数
生成后，压缩 JS 文件末尾会自动插入一行注释，如：
//# sourceMappingURL=index.min.js.map
浏览器看到这行，就会去加载同目录下的 .map 文件。
注意几个实际细节
Source Map 不影响运行性能，但暴露源码结构，上线前需权衡安全：
- 内网部署或测试环境可全量保留
- 公开线上站点建议不发布 .map 文件，或仅上传到错误监控系统（如 Sentry）私有解析
- 避免在 .map 中包含绝对路径或敏感路径信息，可用 Webpack 的 devtoolModuleFilenameTemplate 控制输出格式
基本上就这些 —— 它不复杂，但容易忽略配置时机和发布策略。
