阅读 467

针对 Source Maps 的一篇介绍(翻译)

原文链接

组合并且压缩你的JavaScript 和 CSS文件是提高性能最方便的方式之一。但是当你需要调试这些压缩后的代码的时候会发生什么呢?它可能是异常噩梦。不过不用怕,这里有一个通过source maps的name来解决的问题的方案。

source maps提供了一种将压缩后的文件代码映射到源文件的初始位置的方式。这意味着在软件的帮助下,你可以轻易的调试你的应用甚至在你已经做了代码优化(压缩)处理的情况下。谷歌以及火狐浏览器的开发者工具目前都内置了对source maps的支持。

这篇博客将告诉你source maps的工作原理以及如何生成。我们将主要关注JS的源映射,CSS的源映射也是相同原理。


注意:Firefox的开发人员工具默认启用对源映射的支持。您可能需要在Chrome中手动启用支持。要执行此操作,请启动Chrome开发工具并打开“ 设置”窗格(右下角的齿轮)。在常规选项卡中,确保启用JS源地图和启用CSS源的地图都打勾。


源映射的工作原理

顾名思义,源映射由一大堆文件组成,使压缩后的代码可以映射回源文件。你可以为每一个压缩后的文件提供不同的源映射。

通过在优化(压缩)后的文件的底部添加特殊注释,向浏览器提供可用的源映射。

//# sourceMappingURL=/path/to/script.js.map
复制代码

此注释通常由用于生成源映射的程序添加。如果启用了对源映射的支持并且开发人员工具已打开,则开发人员工具将仅加载此文件。

您还可以通过X-SourceMap在压缩的JavaScript文件的响应中发送HTTP header来指定源映射。

X-SourceMap: /path/to/script.js.map
复制代码

源映射文件包含一个JSON对象,其中包含有关映射本身和原始JavaScript文件的信息。这是一个简单的例子:

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}
复制代码

让我们仔细看看每个属性。

  • version- 此属性指示文件所遵循的源映射规范的版本。
  • file - 源映射文件的名称。
  • sources - 原始源文件的URL数组。
  • sourceRoot- (可选)sources将解析数组中所有文件的URL 。
  • names - 包含源文件中所有变量和函数名称的数组。
  • mappings- 包含实际代码映射的Base64 VLQ字符串。(这是魔术发生的地方。)

使用UglifyJS生成源映射

UglifyJS是一个受欢迎的命令行工具,可以对你的文件进行组合压缩。版本2 支持大量的命令行标志用以生成source maps。

  • --source-map - 源映射的输出文件。
  • --source-map-root- (可选)这将填充sourceRoot地图文件中的属性。
  • --source-map-url - (可选)服务器上源映射的路径。这将被放在优化文件的注释中。//# sourceMappingURL=/path/to/script.js.map
  • --in-source-map - (可选)输入源映射。如果要压缩已从其他位置的源文件生成的JavaScript文件,这可能很有用。想想JavaScript库。
  • --prefix或-p- (可选)n从sources属性中显示的文件路径中删除多个目录。例如,-p 3将从文件路径中删除前三个目录,因此one/two/three/file.js将成为file.js。使用-p relative将使UglifyJS为您找出源地图和原始文件之间的相对路径。

如下示例:

uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m
复制代码

除此之外还有其他的工具可以用来生成source maps。列表如下:

谷歌浏览器开发者工具中的Source Maps

如果你正确设置了源映射,则应该会看到Sources选项卡的文件窗格中列出的每个原始JavaScript文件。

检查页面的HTML,确认仅引用了压缩的JavaScript文件。开发工具正在加载源映射文件,然后获取每个原始源文件。

火狐浏览器开发者工具中的Source Maps

Firefox用户可以在开发者工具的“ 调试器”选项卡中查看各个源文件。dev工具再次确定源映射可用,然后获取每个引用的源文件。

如果您希望查看压缩版本,请单击选项卡右上角的齿轮图标,然后取消选择 Show original sources(显示原始源)。

总结

使用Source Maps允许开发人员维护以及修复代码时,直接进行调试,同时优化其站点以提高性能。

参考链接

关注下面的标签,发现更多相似文章
评论