什么是JavaScript的Source Map_它如何映射压缩后的代码呢

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免费学习笔记（深入）”；

标签： javascript java js json typescript 编码 浏览器 app 工具 栈