MJingv / jehol-person-blog

Jehol's Blog 🙋 (hexo+react)

https://mjingv.github.io/JeholBlog/

0 stars 1 forks source link

sourcemap #79

Open MJingv opened 2 years ago

MJingv commented 2 years ago

sourcemap

定义

Source Map 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系

生产环境代码解决问题

压缩体积
合并文件，减少请求
xx转js

sourcemap的格式

　　{
　　　　version : 3,//version：Source map的版本，目前为3。
　　　　file: "out.js",//file：转换后的文件名。
　　　　sourceRoot : "",// sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
　　　　sources: ["foo.js", "bar.js"],//sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
　　　　names: ["src", "maps", "are", "fun"],//names：转换前的所有变量名和属性名。
　　　　mappings: "AAgBC,SAAQ,CAAEA"// mappings：记录位置信息的字符串
　　}

mapping属性介绍

两个文件的各个位置是如何一一对应的？这是一个很长的字符串，它分成三层。

　mappings:"AAAAA,BBBBB;CCCCC" //表示，转换后的源码分成两行，第一行有两个位置，第二行有一个位置。

第一层是行对应，以分号（;）表示，每个分号对应转换后源码的一行。所以，第一个分号前的内容，就对应源码的第一行，以此类推。
第二层是位置对应，以逗号（,）表示，每个逗号对应转换后源码的一个位置。所以，第一个逗号前的内容，就对应该行源码的第一个位置，以此类推。
第三层是位置转换，以VLQ编码表示，代表该位置对应的转换前的源码位置。

位置对应的原理

第一位，表示这个位置在（转换后的代码的）的第几列。
第二位，表示这个位置属于sources属性中的哪一个文件。
第三位，表示这个位置属于转换前代码的第几行。
第四位，表示这个位置属于转换前代码的第几列。
第五位，表示这个位置属于names属性中的哪一个变量。

每一位都采用VLQ编码表示；由于VLQ编码是变长的，所以每一位可以由多个字符构成

参考文档