Source Maps 在生产环境失效的根本原因是未被正确加载或服务端未暴露，而非未生成；常见表现为控制台报错无法跳转源码、断点失效等，需确保生成配置（如 devtool: "source-map"）、路径匹配、MIME 类型支持及监控平台上传一致。
Source Maps 在生产环境为什么经常失效
根本原因不是没生成，而是没被正确加载或服务端没暴露。浏览器控制台看到 bundle.min.js:123 报错，却点不开源码，大概率是 sourceMappingURL 注释指向了错误路径，或服务器拒绝了 .map 文件的请求（比如 Nginx 默认不支持 application/json 或 application/octet-stream MIME 类型）。
常见错误现象：DevTools failed to load SourceMap、点击报错行跳转到压缩后代码而非原始 .ts 或 .jsx、断点打不上。
- Webpack 默认在
production模式下不生成 Source Maps（devtool: false），必须显式配置 - 生成的
.map文件不能放在 public 目录外，否则无法被浏览器 fetch 到 -
sourceMappingURL是相对路径，受 HTML 中<script>标签的src位置影响，不是相对于打包输出目录
Webpack 中配出可用的 production Source Maps
用 devtool: "source-map" 最稳妥：它生成独立 .map 文件，且包含完整原始信息（包括列映射），适合生产调试。别用 cheap-module-source-map——它省略列信息，导致断点不准；也别用 inline-source-map——会把 Base64 写进 JS，增大体积且无法缓存。
关键配置片段：
module.exports = {
mode: "production",
devtool: "source-map", // 必须显式声明
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].[contenthash].js",
sourceMapFilename: "[name].[contenthash].js.map" // 显式控制 .map 文件名，和 JS 对齐
}
};- 确保
output.path和实际部署路径一致，否则.map文件会被写到错的地方 - 如果用了 CDN，
publicPath要设为 CDN 域名，否则sourceMappingURL会指向本地路径 - UglifyJS / Terser 默认保留 Source Maps，但若手动配置了
terserOptions.sourceMap，需设为true
让浏览器真正加载到 .map 文件的三个硬条件
生成只是第一步，浏览器得能 GET 到 .map 文件，且响应头合法。缺一不可。
- 服务器必须允许访问
.map文件：Nginx 需加location ~ \.map$ { add_header Content-Type application/json; }；Express 用app.use(express.static("dist"))即可，但要确认dist目录里真有main.a1b2c3.js.map -
sourceMappingURL注释必须存在且路径可解析：检查生成的main.a1b2c3.js末尾是否有类似//# sourceMappingURL=main.a1b2c3.js.map，且该路径在浏览器 Network 面板中能 200 返回 - Chrome/Firefox 需开启 DevTools 的 “Enable JavaScript source maps” 选项（Settings → Preferences → Debugger → ☑ Enable JavaScript source maps），Safari 默认关闭，需在 Develop → Show Web Inspector → Settings → ☑ Enable source maps
线上错误监控如何关联 Source Maps 定位原始代码
前端监控 SDK（如 Sentry、Bugsnag）上报的是压缩后堆栈，它们靠上传 Source Maps 到自己服务来反解。这和浏览器本地加载是两套逻辑——你本地能看到源码，不代表 Sentry 能。
以 Sentry 为例，关键动作是上传：
npx @sentry/cli releases files $RELEASE upload-sourcemaps dist/ --url-prefix "~/assets/"
-
$RELEASE必须和Sentry.init({ release: "xxx" })中的值严格一致 -
--url-prefix要匹配你线上 JS 的 URL 前缀，比如https://cdn.example.com/assets/main.js就填"~/assets/"；若 JS 在根目录，填"~/" - 上传前确认
dist/下有.map文件，且文件名与 JS 中sourceMappingURL一致（注意 contenthash 是否同步）
最容易被忽略的一点：Source Maps 里记录的是构建时的绝对路径（如 /Users/me/project/src/App.tsx），而 Sentry 只关心相对路径映射。只要上传时路径前缀对得上，它就能把 App.tsx:42:5 正确还原出来——不需要你把源码也传上去。
