Source Map 在生产环境还原压缩 JS 代码需构建、部署、运行三阶段协同：构建时正确生成独立 map 文件并配置 sourceMappingURL；部署时私有化托管 map 并鉴权访问；运行时浏览器自动加载还原堆栈与断点，服务端可解析错误定位原始源码。
在生产环境中使用 Source Map 还原压缩混淆的 JavaScript 代码，核心是“生成可信赖的映射文件 + 安全可控地加载解析 + 精准还原错误与断点”。它不是简单放一个 .map 文件就生效，而是一套需兼顾调试能力与代码安全的协作流程。
构建阶段：正确生成 Source Map 并绑定路径
必须确保压缩产物（如 app.min.js）末尾包含有效的 sourceMappingURL 注释，且指向的 .map 文件真实存在、路径可访问。常见配置如下：
-
Webpack：设
devtool: 'source-map'（生成独立文件），避免用inline-source-map（会把 map 内联进 JS，增大体积且暴露风险） -
Terser Plugin（Webpack 内）：启用
sourceMap: true，并确认output.sourceMapFilename输出路径合理 -
Vite / Rollup：开启
build.sourcemap: true或output.sourcemap: true - 检查生成的 JS 文件末尾是否含类似
//# sourceMappingURL=app.min.js.map—— 浏览器和 Node.js 调试器都依赖这行定位 map
部署阶段：控制 .map 文件的可见性与访问权限
Source Map 文件包含原始源码（若启用了 sourcesContent），直接公开到 CDN 或静态目录等于变相泄露源码。推荐做法：
- 将 .map 文件单独上传至内部私有服务器（如内网 Nginx 或对象存储），不与 JS 同域部署
- 在 JS 中改写 sourceMappingURL 为完整 URL，例如：
//# sourceMappingURL=https://sourcemap.internal.example.com/v1.2.3/app.min.js.map - 对该域名设置 IP 白名单或 Token 鉴权（如 Nginx 用
valid_referers或后端校验X-Debug-Key），防止外部爬取 - 禁用搜索引擎抓取（
robots.txt屏蔽该域名）
运行时：浏览器中还原堆栈与断点
用户浏览器报错时，只要满足以下条件，DevTools 就能自动加载并展示原始代码：
- 开发者工具已开启 Source Map 支持（Chrome：设置 → 勾选 Enable JavaScript source maps；Firefox 默认开启）
- JS 文件通过
<script></script>标签加载（非动态eval或字符串执行） - 浏览器能成功请求到 .map 文件（查看 Network 面板过滤
.map，确认状态码 200） - 打开 Sources 面板 → 左侧文件树展开
webpack://或localhost/下的原始路径，即可设置断点、查看变量、单步执行
错误监控：服务端手动解析线上堆栈
当用户上报错误（如 at app.min.js:45:212），前端 SDK 可采集该位置，由后端用 source-map 库还原：
- 服务端下载对应版本的
app.min.js.map（缓存或按需拉取） - 调用
consumer.originalPositionFor({ line: 46, column: 213 })（注意：Source Map 行列号是 0-based，报错中是 1-based） - 返回
{ source: 'src/utils/api.ts', line: 82, column: 15, name: 'fetchData' }，再读取原始文件第 82 行附近内容作为上下文 - 配合版本号、环境标签（prod/staging）、用户操作链路，就能在监控后台直接展示“哪一行源码出的问题”
不复杂但容易忽略：Source Map 生效的前提是构建、部署、运行三者坐标严格对齐。少一个环节，还原就失效。关键是把 map 当作敏感资产来管理，而不是调试开关随便开着。
