Source Map简介

部署JavaScript脚本之前,开发者通常会使用UglifyJS2等工具对代码压缩变换。

为什么需要转换代码?

  • 压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。
  • 多个文件合并,减少HTTP请求数。
  • 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

什么是Source Map?

Source Map是一个JSON文件,其中包含了代码转换前后的位置信息。给定一个转换之后的压缩代码的位置,就可以通过Source Map获取转换之前的代码位置,反过来也一样。

Source Map有哪些属性?

  • version:Source Map的版本号。
  • file:转换后的文件名。(可选)
  • sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。(可选)
  • sources:转换前的文件列表。
  • sourcesContent: 转换前的文件内容列表,与sources列表依次对应。(可选)
  • names:转换前的所有变量名和属性名。
  • mappings:记录位置信息的字符串,经过编码。

参考链接