前端打包产物调试，Source Map如何配置才不泄露源码

线上排错最怕看到这种堆栈：`a.b is not a function`，点进去是压缩成一行的 JS，变量名全是 `n`、`t`、`e`。于是有人提议：生产环境把 Source Map 开起来吧。安全同学立刻皱眉：开了不就等于把源码挂到 CDN 上？其实问题不在于“开不开”，而在于 Source Map 怎么生成、放在哪里、给谁访问。

Source Map 本身是调试构件，不是普通静态资源。配置得当，它能让你看到原始文件、行号和调用栈；配置不当，它也能让任何人顺着 `.map` 文件把 `sourcesContent` 里的源码原样还原出来。所以生产环境的核心原则只有一句：浏览器和外部用户不该拿到 `.map`，但监控平台可以。

Source Map 到底泄露了什么

一个 `.map` 文件通常包含 `mappings`、`sources`、`sourcesContent`。最危险的是 `sourcesContent`，它可能直接内嵌源码原文。即使没有 `sourcesContent`，`sources` 里的路径也会暴露目录结构、业务模块名、包名，甚至接口命名。如果打包产物末尾还带着 `//# sourceMappingURL=app.js.map`，浏览器 DevTools 会自动请求这个文件；只要服务器不拦，任何人也能直接下载。

因此，`inline-source-map`、`eval-source-map` 这类开发配置绝不能带到生产。前者把 map 以 base64 塞进 JS 文件，后者通过 `eval` 注入，都会让源码暴露面成倍扩大。

生产首选：hidden-source-map 加“上传后删除”

Webpack 生产推荐：

module.exports = {
  devtool: 'hidden-source-map',
}

Vite 对应配置：

export default {
  build: {
    sourcemap: 'hidden',
  },
}

`hidden-source-map` / `hidden` 会生成完整的 `.map`，但不会在 JS 末尾追加 `sourceMappingURL` 注释。浏览器不会主动请求，外部用户也很难直接发现。接下来关键一步：在 CI 中把 `.map` 上传到 Sentry、自建错误监控或日志平台，上传成功后删除产物目录里的 `.map`，或者根本不把这些文件同步到静态服务器。

以 Sentry 为例，Webpack 和 Vite 都有对应插件，可以配置上传后删除：

sourcemaps: {
  filesToDeleteAfterUpload: ['./dist/**/*.map'],
}

这样线上报错仍然能还原出可读堆栈，但外部访问 `https://your.site/assets/app.js.map` 只会得到 404。

只想定位行号：考虑 nosources-source-map

如果监控平台只需要行列信息，不需要源码上下文，Webpack 可以使用：

devtool: 'nosources-source-map'

它生成的 map 不包含 `sourcesContent`，能减少源码原文泄露风险，但 `sources` 路径仍可能暴露目录结构。Vite 目前没有完全等价的 `nosources` 开关，通常还是靠 `hidden` 加平台权限、上传后删除来兜底。对于金融、后台、核心业务系统，建议默认不把完整源码上传到任何第三方平台，只保留必要堆栈。

服务器和 CI 再补几刀

不要只依赖打包配置。Nginx 或网关层可以加一道兜底：

location ~* \.map$ {
  deny all;
  return 404;
}

如果监控平台必须回源访问 map，就限制来源 IP，而不是对整个公网开放。构建产物不要提交 Git，`.gitignore` 里加上 `*.map`。上传 token 放 CI secret，不要写进仓库。用环境变量区分构建策略：开发环境 `eval-cheap-module-source-map`，预发 `source-map`，生产 `hidden-source-map`。上线后定期检查 `curl -I https://your.site/assets/app.js.map`，确认返回 403/404，而不是 200。

调试与安全可以兼得

Source Map 不是非黑即白。开发阶段尽情开，预发阶段按需开，生产阶段用 `hidden-source-map` 生成、上传监控平台、删除或隔离 `.map`，再用 Nginx 和 CI 权限兜底。真正安全的做法不是彻底放弃 Source Map，而是把它当成内部调试构件来管理：外部拿不到，内部能还原，构建链路可追踪。这样既不用对着压缩代码猜 bug，也不用担心某天在 CDN 上看到自己的源码。