我们项目的代码在经过编译打包后,会将开发时多个文件的代码合并到同一份文件中,而且还会经过各种压缩,合并,代码丑化等等操作,转换完最终生成的代码才会用于线上环境,所以我们线上实际运行的代码跟我们开发时的代码是有非常大的不同,如果此时出现了bug,那么我们只能定位到转换后代码的位置,但此时的代码已经面目全非了
转换后的代码类似下面这样
虽然这种代码对计算机非常友好,但是我们debug将会变得很困难,这时候就需要sourcemap了
简单来说,Sourcemap 就是一个信息文件,它里面存储着代码转换前后的对应位置信息,也就是转换压缩后的代码所对应的转换前的源代码位置,是源代码和生产代码的映射, Sourcemap 解决了在打包过程中,代码经过压缩,去空格以及 babel 编译转化后,由于代码之间差异性过大,debug 困难的问题
大家的项目在开发完进行build后,在打包文件夹里除了有js,css,图片等资源,一定还见过 .js.map文件,这种就是sourcemap文件
点开一个打包后的js文件,拉到最后一行,可以看到 //# sourceMappingURL=main.js.map
有了这行,就可以启用sourcemap,这个sourceMappingURL就是标记了该文件的sourcemap的地址,这个sourcemap文件可以放在本地,也可以放在网络上
再点开一个 .js.map 文件看看,有一堆类似乱码的东西,后面看一个简单一点的
生成的方法有很多,而且有很多前端的工具都支持,如webpack,uglifyjs,gulp等,这里就不详细讲述了,对怎么生成sourcemap感兴趣可以看这个文章
https://code.tutsplus.com/tutorials/source-maps-101--net-29173
我们看一个简单一点的代码
const value = 123;
console.log(value);
用webpack打包后的代码
console.log(123);
//# sourceMappingURL=bundle.js.map
生成的sourcemap文件
{
version : 3,
file : bundle.js ,
mappings : AACAA,QAAQC,IADM ,
sources : [
webpack://studysourcemap/./test.js
],
sourcesContent : [
const value = 123;\nconsole.log(value);
],
names : [
console ,
log
],
sourceRoot :
}
每个属性的含义如下
关于sourcemap的版本
第一版生成的map文件大概有转化后文件的10倍大,第二版则将体积减少了20%~30%,第三版又在v2的基础上体积减少了一半
正是因为有了第三代 Source Map Revision 3 Proposal 这个标准,不同的打包工具和浏览器才能使用sourcemap,github上的一个根据这个标准生成sourcemap的库 https://github.com/mozilla/source-map
这里主要关注mappings和names属性,mappings属性是一个很长的字符串,它分成三个部分
举一个简单的例子,假设有如下的mappings属性
mappings : AACAA;QAAQC,IADM ,
有一个分号,说明有两行代码,分号前 AACAA
是第一行,后面 QAAQC,IADM
是第二行
第二行有一个逗号,说明这一行分为两段,QAAQC
和 IADM
分号跟逗号大家应该都没什么疑问,主要就是英文字母这一块的意义位置对应的原理
每一段最多有5个部分
那么这五个部分是怎么来的,我们一步一步来看
假设文件a.js有一行代码 I Love SourceMap
,最终打包后输出的文件为bundle.js,内容为 Javascript is awesome
,如下
那么怎么表示映射关系
以 Love 为例,它原始的位置为(0,2),输出后是awesome,位置为(0,14),那么我们可以这样来映射
像这样写成一种固定的格式,里面包含了原始位置和输出后的位置,单词,同时还有原始文件名,因为可能把多个文件进行处理输出,如果不写文件名,就不知道输入位置来自哪个文件
输出后的单词 | 映射关系 |
---|---|
Javascript | 0|0|a.js|0|7|SourceMap |
is | 0|11|a.js|0|0|I |
awesome | 0|14|a.js|0|2|Love |
我们可以优化一下,把a.js和最后面的单词提出来各放到一个数组里,用sources记录所有的原始文件名,names记录原始文件中的所有单词,然后用下标表示他们,以Love为例,就变成
很多时候,我们输出的文件其实是只有一行的,所以可以把输出文件的行号省略掉,就变成
考虑到,如果文件特别大的话,那么行列的数值可能会特别大,所以可以考虑用相对位置来代替绝对位置来表示,只用绝对位置表示第一个单词的位置,后面的都使用相对前一个单词的位置
原始单词 | 输入位置 | 输出单词 | 输出位置 | 映射 |
---|---|---|---|---|
I | (0,0) 绝对位置 | is | (0,11)绝对位置 | 11|0|0|0|0 |
Love | (0,2) 相对I的位置 | awesome | (0,3)相对is的位置 | 3|0|0|2|1 |
SourceMap | (0,5) 相对Love的位置 | Javascript | (0,-14) 相对awesome的位置 | -14|0|0|5|2 |
所以我们现在可以得到这么一个初步的map文件
{
names: ['I', 'Love', 'SourceMap'],
sources: ['a.js'],
mappings: [11|0|0|0|0, 3|0|0|2|1, -14|0|0|5|2]
}
但是mappings这里十分难看,而且还需要用|
来分隔,多占一个位置,用 vlq 编码就可以解决分隔数字的问题,他的核心思路是在连续的数字上做标记,我们先来理解一下,拿上面 mappings 属性的第一个为例,去掉|
,然后在连续的字符上加上一个标记
110000
从左往右开始读取,数字1有标记,说明还有连续,再取下一个,是1,这个1没被标记,第一个数结束,所以第一个数是11
继续往下,0没被标记,说明是一个完整的数字,第二个数就是0
依此类推。。。
最终就能得到11,0,0,0,0
而 vlq 利用6位二进制数进行存储,其中第一位就表示是否连续的标识位,最后一位表示正数还是负数(0正数,1负数) ,中间只有4位,因此一个单元表示的范围为[-15,15],如果超过了就要用连续标识位了
看几个例子来理解,每一步的变化我都用不同颜色标记了
第三步(按...5554分割),最右边4位是因为他还需要额外多表示一位符号位,其余的都可以用5位来表示数值
倒数第二步倒顺序,是因为VLQ表示数据字节组的顺序是倒过来的
最终我们可以得到他们的 vlq 编码
十进制数值 | vlq编码 | vlq编码每一段对应的数值 |
---|---|---|
5 | 001010 | 10 |
-19 | 100111 000001 | 39和1 |
然后再把它转成base64编码,可以查下面这张表
就可以得到5和-19的base64 vlq编码了,因为5的 vlq 编码数值是10,所以查上表可得到K,同理-19可以得到n和B,最终能得到5和-19的 base64 vlq 编码分别是K和nB
这里有一个网站可以自己转换验证一下https://www.murzwin.com/base64vlq.html
然后我们回过头为我们最开始那个简单的js文件手动生成一下map文件来验证一下
const value = 123;
console.log(value);
打包后的代码
console.log(123);
//# sourceMappingURL=bundle.js.map
sources和names是可以先确定好的
{
sources : [ a.js ],
names : [ console , log ],
}
再得到 base64 vlq 编码
原始位置 | 输出位置 | sources索引 | names索引 | 映射 | 每一部分的vlq编码 | base64 vlq编码 | |
---|---|---|---|---|---|---|---|
console | (1,0)绝对 | (0,0)绝对 | 0 | 0 | 0 | 0 | 1 |
log | (0,8)相对 | (0,8)相对 | 0 | 1 | 8 | 0 | 0 |
123 | (-1,6)相对 | (0,4)相对 | 0 | 无 | 4 | 0 | -1 |
所以我们可以得到最终的map文件
{
sources : [ a.js ],
names : [ console , log ],
mappings : AACAA,QAAQC,IADM ,
// ...其他的
}
反过来也能根据sourcemap文件推出原始的位置,这里就不再演示了
https://juejin.cn/post/7023537118454480904
https://juejin.cn/post/6963076475020902436
https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.1ce2c87bpj24
https://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
http://www.qiutianaimeili.com/html/page/2019/05/89jrubx1soc.html
以上便是本次分享的全部内容,希望对你有所帮助^_^
喜欢的话别忘了 分享、点赞、收藏 三连哦~。
欢迎关注公众号 ELab团队 收获大厂一手好文章~
我们来自字节跳动,是旗下大力教育前端部门,负责字节跳动教育全线产品前端开发工作。
我们围绕产品品质提升、开发效率、创意与前沿技术等方向沉淀与传播专业知识及案例,为业界贡献经验价值。包括但不限于性能监控、组件库、多端技术、Serverless、可视化搭建、音视频、人工智能、产品设计与营销等内容。
字节跳动校/社招内推码: TNT1PUK
投递链接: https://jobs.toutiao.com/s/NRArN4k