为什么内联源地图？

Question

今天我了解到可以将源映射直接包含到缩小的 JavaScript 文件中，而不是将它们放在单独的 example.min.map 文件中。 我想知道：为什么会有人想要做那样的事情？

拥有源映射的好处对我来说很明显：例如，可以在运行缩小文件时使用原始的、未压缩的源文件调试错误。 最小化的好处也很明显：源文件的大小大大减小，浏览器下载速度更快。

那么，既然地图的大小甚至比缩小代码本身还要大，那么我到底为什么要将源地图包含到缩小文件中呢？

Answer 1

我四处搜索，这是我能看到人们内联源地图用于开发的唯一原因。 内联源映射不应在生产中使用。

使用缩小文件内联源映射的理由是浏览器在开发和生产中解析完全相同的JavaScript。 像Closure Compiler这样的一些缩小器不仅仅是“缩小”代码。 使用高级选项，它还可以执行以下操作：删除代码，函数内联或主动变量重命名。 这使得缩小的代码（可能）在功能上与源文件不同。

当然，这仍然可以通过引用外部源映射文件来完成，但是有些人似乎更喜欢内联他们的构建过程。

Answer 2

如果您在Android设备上远程调试Chrome，Chrome调试器不仅可以访问设备上所需的任何文件，还包括单独的地图文件。 如果您将它们包含在内，则不会出现此问题。

Answer 3

像Browserify或Webpack这样的JS捆绑工具会将所有.js文件捆绑在一起或几个捆绑包中，即使在开发模式下也是如此。 因此，在这种情况下，将内联源映射添加到生成的bundle是帮助调试而不带来额外文件的最简单方法。

Answer 4

在某些情况下，您可能希望将内联源图包含到已评估的代码中。 例如，您有一个coffeescript输入字段，并且您希望在coffeescript中启用对代码的重新编译。 在评估的代码中有关于源映射的stackoverflow问题：

获取源映射使用已评估的代码

您可以在注释中包含@sourceURL以指定eval代码的URL并加载地图文件（请参阅SourceMap规范3的第8页）。 但是并不总是可以将文件写入某个位置。

Answer 5

如果您正在开发浏览器扩展，inline-source-map 是唯一的调试选项，因为扩展本身无法访问 sourcemap 文件——即使您可能必须在 manifest.json 中指定所有 sourcemap 文件（浏览器扩展的配置文件）。

Answer 6

cheap-module-source-map对于生产构建来说要好得多。

inline-source-map用于在测试时进行快速和脏的构建

Answer 7

用例（对我而言）是不支持源映射的非浏览器环境（或者根本不支持，因此需要 webpack。）

或者换一种说法，webpack 没有 web。