2014-12-27 66 views
42

今天我知道可以将include source maps直接放入缩小的JavaScript文件中,而不是将它们放在单独的example.min.map文件中。我想知道:为什么会有人想要做那样的事情为什么内联源地图?

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

那么为什么地球上我想包括源地图到缩小的文件,因为地图的尺寸​​甚至比缩小的代码本身更大

+0

是的,这似乎完全没有意义! – Ryan 2014-12-27 20:57:52

+0

也许.map扩展名是未知的并且会为执行.exe和.dll文件的计算机的管理员抛出错误或问题? – umeboshi 2014-12-27 21:02:24

+0

我还了解到,今天......花了一个小时试图找出为什么没有任何发现,然后发现他们已经存在嵌入到.js文件中...... – 2016-11-18 04:54:35

回答

27

我周围搜索,我可以看到人们内联源地图的唯一原因是用于开发。内联源地图不应用于生产。

将您的缩小文件内联到源映射的理由是,浏览器正在解析开发和生产中完全相同的JavaScript。像Closure Compiler这样的一些缩略语不仅仅是“简化”代码。使用advanced options它也可以执行以下操作:去除死代码,函数内联或主动变量重命名。这使缩小的代码(可能)在功能上与源文件不同。

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

9

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

+0

太棒了。我会尝试。你可能也解决了我的问题。 http://stackoverflow.com/questions/40199998/how-to-generate-custom-source-map-with-custom-webpack-loader – 2016-10-23 07:51:39

2

在某些情况下,您可能希望将内嵌源代码映射到评估代码中。例如,您有一个coffeescript输入字段,并且您希望启用在coffeescript中的代码的debbuging。有一个在评估码有关源代码映射一个计算器问题:

Getting source maps working with evaluated code

你可以包括@sourceURL在留言中注明您的eval代码的URL和加载地图文件(见SourceMap Spec 3 8页)。但是将文件写入某个位置并不总是可行的。

0

cheap-module-source-map对于生产版本更好。

inline-source-map用于测试

13

时做出快速和肮脏的建立如果你使用的是Android设备上的远程调试Chrome浏览器,该浏览器调试器不能随便访问它希望在设备上的任何文件,包括单独的地图文件。如果您将它们包含在内联中,则不存在此问题。

+0

没错,但是一旦你的文件变得大一倍,性能会如何呢? – Remi 2018-02-01 10:15:24

+0

你显然只会在开发中做到这一点 – Tim 2018-02-01 16:32:00

+0

我不同意。如果你有一个DTAP设置,你还可以在测试和验收时使用一个缩放版本,附带一个源代码映射。甚至在产品上也允许在该环境下进行调试。在开发过程中,您不必使用缩小版本的persé。程序包管理器允许为源代码提供单独的文件,您可以将它们一起发送,因此您不必将其包含在初始加载中以防止性能下降。 – Remi 2018-02-01 19:44:27