JavaScript sourceMap 笔记

不才
• 阅读 1213

js source map

建议打开一个真实的项目的sourceMap对照食用

由于前端项目在网络中访问导致为了减少体积进行一系列优化操作,最后导致生产环境出问题无法定位到项目代码中的指定位置,使得调试变成一件很难得事。由此产生了Source Map

它是个什么东西

简单说,sourceMap就是一个文件,里面储存着位置信息。

仔细点说,这个文件里保存的,是转换后代码的位置,和对应的转换前的位置。

有了它,出错的时候,通过断点工具可以直接显示原始代码,而不是转换后的代码。

为什么有它

前端部署生产环境代码,一般可能出现下面几种情况,最后上线的代码和实际生产环境代码相差甚远,导致线上出问题无法进行调试定位错误

(1)压缩,减小体积。

(2)多个文件合并,减少HTTP请求数。

(3)其他语言编译成JavaScript。

怎么用它

webpack vue 生产环境

它的结构

xxx.js.map

- version:Source map的版本,目前为3。

- file:转换后的文件名。

- sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。

- sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。

- names:转换前的所有变量名和属性名。

- mappings:记录位置信息的字符串(主要部分)

- sourcesContent: 转换前的文件内容列表,与sources列表依次对应

mappings

它是一个很长的字符串,分为三层。

每个分号(;)对应转换后源码的一行;(行对应)
每个逗号(,)对应转换后源码的一个位置;(位置对应)
以VLQ编码表示,代表该位置对应的转换前的源码位置。(位置转换)

VLQ

举个🌰

mappings:"AACvB,gBAAgB,EAAE;AAClB"

就表示,转换后的源码分成两行,第一行有三个位置,第二行有一个位置

位置对应的原理
- 第一位,表示这个位置在(转换后的代码的)的第几列。

- 第二位,表示这个位置属于sources属性中的哪一个文件。

- 第三位,表示这个位置属于转换前代码的第几行。

- 第四位,表示这个位置属于转换前代码的第几列。

- 第五位,表示这个位置属于names属性中的哪一个变量。

有几点需要说明。

首先,所有的值都是以0作为基数的。其次,第五位不是必需的,如果该位置没有对应names属性中的变量,可以省略第五位。再次,每一位都采用VLQ编码表示;由于VLQ编码是变长的,所以每一位可以由多个字符构成。

如果某个位置是AAAAA,由于A在VLQ编码中表示0,因此这个位置的五个位实际上都是0。它的意思是,该位置在转换后代码的第0列,对应sources属性中第0个文件,属于转换前代码的第0行第0列,对应names属性中的第0个变量。

VLQ编码表

JavaScript  sourceMap 笔记

硬核 分析

console

源文件

console.log(123);

编译后的文件

console.log(123);
//# sourceMappingURL=1.js.map

map文件

{
  "version":3,
  "sources":["1.js"],
  "names":["console","log"],
  "mappings":"AAAAA,QAAQC,IAAI"
}

mappings 通过;分割 得到1行, 再通过,分割每一行得到位置 [3]

分析

AAAAA 0, 0, 0, 0, 0
QAAQC 16, 0, 0, 16, 2
IAAI 8, 0, 0, 8

0   1.js    0/0     console
16  1.js    0/16    log
8   1.js    0/8     

参考文章

JavaScript Source Map 详解
【JS基础】sourceMap是个啥

我的链接

不才's blog
不才 GitHub

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Souleigh ✨ Souleigh ✨
3年前
前端性能优化 - 雅虎军规
无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢?可以遵循雅虎的前端优化35条军规,这样对于优化有一个比较清晰的方向.35条军规1.尽量减少HTTP请求个数——须权衡2.使用CDN(内容分发网络)3.为文件头指定Expires或CacheControl,使内容具有缓存性。4.避免空的
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这