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：记录位置信息的字符串，经过编码。

参考链接