<p>inline-source-map 的核心做法是将 SourceMap JSON 以 base64 编码后内联至 JS 文件末尾，格式为 //# sourceMappingURL=data:application/json;charset=utf-8;base64,...，浏览器 DevTools 自动解码并解析映射，无需额外请求 .map 文件。</p>
inline-source-map 的核心做法是把整个 SourceMap 内容以 base64 编码的 JSON 字符串，拼接到生成的 JS 文件末尾，并用标准注释标记，浏览器 DevTools 读到这个注释就会自动解析并加载映射关系。
Base64 映射表是怎么嵌进去的
构建工具（如 Webpack）在生成 JS 文件时，不是单独输出 .map 文件，而是：
- 先生成完整的 SourceMap JSON 对象（含 version、sources、mappings 等字段）
- 将该 JSON 字符串 UTF-8 编码后，用 Base64 编码（不是 URL 安全变体）
- 拼接成形如
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...的单行注释 - 追加到 JS 文件最末尾（换行后），不破坏 JS 语法
浏览器怎么识别和使用它
当 DevTools 加载 JS 文件时，会扫描文件末尾的注释。只要匹配到 sourceMappingURL=data:... 这种格式，就直接解码 base64，得到原始 SourceMap JSON，然后按规范解析 mappings 字段，完成位置映射。
这个过程完全在前端完成，无需额外 HTTP 请求，也不依赖服务器配置或 .map 文件是否可访问。
和外部 .map 文件的关键区别
外部 source-map 模式下，JS 文件末尾是类似 //# sourceMappingURL=bundle.js.map 的路径引用，浏览器需发起一次额外请求获取 .map 文件；而 inline-source-map 把所有信息“打包进一个文件”，省去网络开销，但会让 JS 文件体积明显增大（尤其源码多时）。
实际效果示例
一段压缩后的 JS 文件末尾可能长这样：
console.log("ok");//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFFBQVEiLCJmaWxlIjoiYnVuZGxlLmpzIn0=
其中 base64 解码后就是：{"version":3,"sources":["index.js"],"names":[],"mappings":"AAAA,QAAQ","file":"bundle.js"} —— 这就是最简 SourceMap 结构。
