sourcemap可独立生成.map文件或内联至js/css中：前者通过注释//# sourcemappingurl=xxx.map指向外部文件，需同目录部署；后者将base64编码的映射数据直接嵌入文件末尾，体积增大但免额外请求。
SourceMap 可以生成为独立文件（.map）或内联到 JS/CSS 文件中，区别在于调试信息的存放位置和部署方式。关键看构建工具配置，主流工具如 Webpack、Vite、Rollup、Terser 都支持两种模式。
独立文件模式（.map 文件）
编译后的 JS 文件末尾会插入一行注释，指向同名 .map 文件，浏览器自动加载该文件解析源码：
// app.min.js 末尾 //# sourceMappingURL=app.min.js.map
实际部署时需确保 .map 文件与 JS 文件同目录（或按路径正确可访问），否则断点无法映射回源码。
- Webpack：设置
devtool: 'source-map'或'hidden-source-map'（不加注释行） - Vite：默认开发用
source-map，生产环境可通过build.sourcemap: true启用 - Terser CLI：
--source-map参数生成独立文件，配合--output指定 JS 输出路径
内联模式（Base64 或 URL）
SourceMap 内容直接编码后追加在 JS 文件末尾，无需额外请求 .map 文件：
// app.min.js（末尾） //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLm1pbi5qcyIsInNvdXJjZXMiOlsiLi4vYXBwLmpzIl0sInNvdXJjZXNDb250ZW50IjpbImNvbnN0IGFwcCA9ICgpID0+IHtcbiAgY29uc29sZS5sb2coXCJIZWxsbyBXb3JsZCFcIilcbn07XG5hcHAoKTsiXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VSb290IjoiLi4ifQ==
适合开发调试或单文件部署场景，但会使 JS 体积明显增大（尤其含原始源码时）。
- Webpack：
devtool: 'inline-source-map'（含源码）、'eval-source-map'（eval 包裹 + map） - Vite：
build.sourcemap: 'inline' - Terser CLI：
--source-map --source-map-base64启用 base64 内联
如何选择？
生产环境建议用独立文件，并仅在可信环境（如内网、登录后）提供访问权限，避免源码泄露；开发环境可选内联，省去静态资源托管和路径配置问题。
- 安全性要求高 → 独立文件 + 服务端限制
.map访问（如 Nginx 拒绝*.map公开访问） - 快速预览/离线调试 → 内联模式更方便
- CI/CD 流水线 → 独立文件利于归档、分离发布（JS 上 CDN，.map 存内部服务器）
验证是否生效
打开浏览器 DevTools → Sources 面板，展开左侧文件树，应能看到原始源文件（如 src/App.jsx），且断点能准确停在对应行。若只看到压缩后代码，检查：
- JS 文件末尾是否有
sourceMappingURL注释（独立模式）或 data URL（内联模式） - Network 面板中是否成功加载了
.map文件或解析了内联内容 - DevTools 设置里是否启用了 “Enable JavaScript source maps”
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
