sourceMap是个啥
为啥用sourceMap
这几天在搞前端错误日志，作过线上发布的都知道，咱们发布到生产环境的代码，通常都有以下步骤：javascript
- 压缩混淆，减少体积
- 多个文件合并，减小
HTTP请求数 - 经过编译或者转译，将其余语言编译成
JavaScript
这三个步骤，都使得实际运行的代码不一样于开发代码，不论是 debug 仍是捕获线上的报错，都会变得困难重重。html
解决这个问题的方法，就是使用sourceMap。前端
啥是sourceMap
简单说，sourceMap就是一个文件，里面储存着位置信息。java
仔细点说，这个文件里保存的，是转换后代码的位置，和对应的转换前的位置。webpack
有了它，出错的时候，经过断点工具能够直接显示原始代码，而不是转换后的代码。web
sourceMap长啥样
经过webpack等工具，咱们可使用 sourceMap，这里不细说配置方法，能够看这里数组
sourceMap是一个map文件，与源码在同一个目录下。app
在压缩代码的最后一行，会有这样的一个引用：工具
//# sourceMappingURL=app.js.map
指向的就是咱们的map文件。优化
sourceMap的格式以下：
{
version : 3, //SourceMap的版本，目前为3
sources: ["foo.js", "bar.js"], //转换前的文件，该项是一个数组，表示可能存在多个文件合并
names: ["src", "maps", "are", "fun"], //转换前的全部变量名和属性名
mappings: "AACvB,gBAAgB,EAAE;AAClB;", //记录位置信息的字符串
file: "out.js", //转换后的文件名
sourcesContent: " \t// The module cache\n", //转换后的代码
sourceRoot : "" //转换前的文件所在的目录。若是与转换前的文件在同一目录，该项为空
}
其余的都很好解释，咱们详细说一下mappings属性。
mappings
以"AACvB,gBAAgB,EAAE;AAClB;"为例:
- 每一个分号对应转换后源码的一行；
- 每一个逗号对应转换后源码的一个位置；
-
AACvB表明该位置转换前的源码位置，以VLQ编码表示；
位置对应的原理
位置关系的保存经历了诸多步骤和优化，这个不详细说了，想看的能够看这里，咱们只说最后的结果。
在每一个位置中：
- 第一位，表示这个位置在【转换后代码】的第几列。
- 第二位，表示这个位置属于【sources属性】中的哪个文件。
- 第三位，表示这个位置属于【转换前代码】的第几行。
- 第四位，表示这个位置属于【转换前代码】的第几列。
- 第五位，表示这个位置属于【names属性】的哪个变量。
举例
假设如今有a.js，内容为feel the force，处理后为b.js，内容为the force feel
以the为例，它在输出中的位置是(0,0)，a.js是sources的第1个(这里只是举例)，输入中的位置是(0,5)，the是names的第2个(这里只是举例)。
那么映射关系为：
0 1 0 5 2
最后将 01052 表示为 Base64 VLQ 便可。
说明：
- 全部的值都是以0做为基数
- 第五位不是必需的，若是该位置没有对应
names属性中的变量，能够省略第五位 - 每一位都采用
VLQ编码表示，因为VLQ编码是可变长的，因此每一位能够由多个字符构成 - 为何不保存转换后代码的行号，由于咱们输出的文件老是一行，这样输出的行号就能够省略，由于都是0，不必写出来
- 对于输出后的位置来讲，到后边会发现它的列号特别大，为了不这个问题，采用相对位置进行描述
相对位置是啥呢，看示意图：
第一次记录的输入位置和输出位置是绝对的，日后的输入位置和输出位置都是相对上一次的位置移动了多少，例如the的输出位置为(0,-10),由于the在feel的左边数10下才能到这个位置。
VLQ编码
VLQ是Variable-length quantity 的缩写，是一种通用的、使用任意位数的二进制来表示一个任意大的数字的一种编码方式。这种编码最先用于MIDI文件，后来被多种格式采用，它的特色就是能够很是精简地表示很大的数值，用来节省空间。
这种编码须要用最高位表示连续性，若是是1，表明这组字节后面的一组字节也属于同一个数；若是是0，表示该数值到这就结束了。
这样干巴巴说不太容易懂，仍是举个栗子说明一下吧。
如何对数值137进行VLQ编码：
| 步骤 | 结果 |
|---|---|
| 将137改写成二进制形式 | 10001001 |
| 七位一组作分组，不足的补0 | 0000001 0001001 |
| 最后一组开头补0，其他补1 | 10000001 00001001 |
因此，137的VLQ编码形式为10000001 00001001
Base64 VLQ
与通常的VLQ的区别：
- 一个
Base64字符只能表示6bit(2^6)的数据 -
Base64 VLQ须要可以表示负数，因而用最后一位来做为符号标志位。 - 因为只能用6位进行存储，而第一位表示是否连续的标志，最后一位表示正数/负数。中间只有4位，所以一个单元表示的范围为
[-15,15]，若是超过了就要用连续标识位了。
表示正负的方式：
- 若是这组数是某个数值的
VLQ编码的第一组字节，那它的最后一位表明"符号"，0为正，1为负； - 若是不是，这个位没有特殊含义，被算做数值的一部分。
咱们再来举个栗子说明下使用方法。
如何对数值137进行Base64 VLQ编码：
| 步骤 | 结果 |
|---|---|
| 将137改写成二进制形式 | 10001001 |
| 127是正数，末位补0 | 100010010 |
| 五位一组作分组，不足的补0 | 01000 10010 |
| 将组倒序排序 | 10010 01000 |
| 最后一组开头补0，其他补1 | 110010 001000 |
| 转64进制 | y和I |
因此 137 经过Base64 VLQ表示为yl
能够看出：
- 在
Base64 VLQ中，编码顺序是从低位到高位 - 而在
VLQ中，编码顺序是从高位到低位