71

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

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

那么为什么在地球上我想将源地图包含到缩小文件中,因为地图的大小甚至比缩小代码本身还要大

4

6 回答 6

43

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

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

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

于 2014-12-30T21:35:30.310 回答
29

如果您在 Android 设备上远程调试 Chrome,Chrome 调试器不能只访问设备上它想要的任何文件,并且包括单独的地图文件。如果您将它们包含在内,则不会出现此问题。

于 2016-10-05T15:46:42.077 回答
13

JS 捆绑工具,例如BrowserifyWebpack将捆绑您的所有.js文件,输入一个或多个捆绑包,即使在开发模式下也是如此。所以在这种情况下,将内联源映射添加到生成的包是帮助调试而不带额外文件的最简单方法。

于 2015-05-24T18:18:53.737 回答
3

在某些情况下,您可能希望将内联源映射包含到评估代码中。例如,您有一个 coffeescript 输入字段,并且您想启用在 coffeescript 中调试代码。在评估代码中有一个关于源映射的stackoverflow问题:

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

您可以在评论中包含@sourceURL 以指定评估代码的 URL 并加载地图文件(参见SourceMap Spec 3的第 8 页)。但并不总是可以将文件写入某个位置。

于 2015-08-21T08:17:27.757 回答
1

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

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

于 2016-07-12T18:01:17.113 回答
1

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

于 2021-07-25T22:43:34.843 回答