当前位置：首页 > news >正文

SourceMap原理

news 来源：原创 2025/7/13 6:38:03

点击查看原文

1 webpack中使用

详见 js的模块化-webpack打包示例

2 webpack的配置


const { resolve } = require('path')module.exports = {mode: 'development',devtool: 'source-map',entry: './src/index.js',output: {path: resolve(__dirname, 'dist'),filename: "bundle.js"}
}

devtool有很多类型，这里可以看看source-map

详细情况可以看官网的取值

打包后，可以看到bundle.js与bundle.js.map文件

在这里插入图片描述

可以看到bundle.js中

/******/ (() => { // webpackBootstrap
/*!**********************!*\!*** ./src/index.js ***!\**********************/
console.log('hello webpack')
/******/ })()
;
//# sourceMappingURL=bundle.js.map

最后一行指明了当前打包后的文件对应的sourceMap文件

3 source map文件含义

查看bundle.js.map

{"version": 3,"file": "bundle.js","mappings": ";;;;AAAA,4B","sources": ["webpack://test/./src/index.js"],"sourcesContent": ["console.log('hello webpack')"],"names": [],"sourceRoot": ""
}

version: source map的版本
file: 打包后的的文件
mappings：代码位置映射
sources：原文件路径
sourcesContent：对应源码的内容
names：源码中的变量名
sourceRoot：源码根目录

4 mappings原理

4.1 初步设计

从自问自答开始：
若原文件source.txt只有一行‘hello world’被打包成了bundle.txt也只有一行‘world hello’，如何映射二者关系？

很简单，打包后的字母的二维坐标和打包前的字母位置的二维坐标使用map保存下来形成一一映射关系即可

source map的思路也是如此

4.2 一一映射

很简单的思路，原‘hello world’的 ‘h’ 在第1行第1列，则记作（1，1）

打包后变成了‘world hello’，h则第1行第7列，则记作（1，7）

原字符串	h	e	l	l	o		w	o	r	l	d
原坐标	1,1	1,2	1,3	1,4	1,5	1,6	1,7	1,8	1,9	1,10	1,11
打包后字符串	w	o	r	l	d		h	e	l	l	o
原字符串对应打包后的字符串的位置	1,7	1,8	1,9	1,10	1,11	1,6	1,1	1,2	1,3	1,4	1,5

我们写作

1，7，source.txt，1，1

打包后行列，原文件名，对应原文件行列

4.3 省略行号

再参考一下打包后的文件：

/******/ (() => { // webpackBootstrap
/*!**********************!*\!*** ./src/index.js ***!\**********************/
console.log('hello webpack')
/******/ })()
;
//# sourceMappingURL=bundle.js.map

其对应的mappings是;;;;AAAA,4B

那么分号是什么意思呢？其实就是换行，代码中第五行才是真实代码，所以需要换四行，即四个分号

参考这个思路，我们打包后的文件的行号可以省略使用分号表示即可，以打包后的文件为视角，有效代码则映射到原代码中，打包后的文件中遇到换行则使用分号代替

即原来的：1，7，source.txt，1，1可以表示为7, source.txt, 1,1 （因为第一行就是代码，无需使用换行的分号）

4.4 省略文件名

source.txt也可以优化，即用sources数组存放原文件名，使用index表示位置

则7, source.txt, 1,1可以表示为7, 0, 1,1

同理1，8，source.txt，1，2可以表示为8，0，1,2

4.5 使用分词

代码中通常都是一个词一个词的，就如hello world映射world hello，应该是hello整个词的位置发生改变

hello world -> world hello

1,1, source.txt, 1,7 -------- 打包后world单词位置（1，1），原代码文件名，原代码world起始位置（1，7）

1,7, source.txt, 1,1---------打包后hello单词位置（7，1），原代码文件名，原代码hello起始位置（1，1）

我们可以使用数组names来存放分词

再按照之前思路----当前行用分号表示，只看当前行的第几列，源文件使用sources数组存放

sources: ['source.txt']
names:['hello', 'world']'hello world' -> 'world hello'world:
1,0,1,7,1: 1 - 当前打包后的文件的第一列的单词，0 - 原文件中sources数组中的位置，即原文件名 = sources[0] = 'source.txt'1 - 对应原文件第几行7 - 对应原文件第几列1 - 对应单词为names数组下标为1的单词，即names[1] = 'world'
hello:
7,0,1,1,0：...

练习：

'hello wang ma zi' -> 'hello ma zi wang'  (sayHello.js) -> (bundle.js)
names: ['hello', 'wang', 'ma', 'zi']
sources: ['sayHello.js']
则bundle.js中的王应该如何表示？wang的w处于bundle.js的第1行第13列（1，13）
原文件名在sources数组的下标为0，
对应原文件的坐标为第1行第7列（1，7）
wang对应names中的下标1
则应该为13,0,1,7,1

4.6 使用相对位置

从刚才的练习中不难看出，随着字符串增长，第一个数字也会增长(13, 0, 1, 7, 1)

若练习中的字符串再长一些，例如:

'hello wang ma zi ni hao a chi fan le ma' -> 'hello ma zi wang ni hao a fan chi le ma'  (sayHello.js) -> (bundle.js)
names: ['hello', 'wang', 'ma', 'zi', 'ni', 'hao', 'a', 'chi', 'fan', 'le', 'ma']
sources: ['sayHello.js']则对于fan应该是：1，27，0, 1, 31, 8 -> 27, 0, 1, 31, 8

由此可见，随着数字越来越大，则越不便保存

我们可以考虑使用前一个分词的相对位置进行保存

对于上述hello，列位置是1，则下一个分词ma对于hello，应该是增长了6

即hello的h往右挪6个即为ma的m

回到最初的例子

sources: ['source.txt']
names:['hello', 'world']'hello world' -> 'world hello'world:
1,0,1,7,1: 1 - 当前打包后的文件的第一列的单词，0 - 原文件中sources数组中的位置，即原文件名 = sources[0] = 'source.txt'1 - 对应原文件第几行7 - 对应原文件第几列1 - 对应单词为names数组下标为1的单词，即names[1] = 'world'hello:
不使用相对位置：7,0,1,1,0
使用相对位置: 6,0,1,1,0

则我们第一个数字其实表示的就是当前单词的首字母对上一个单词的首字母的偏移量了

4.7 使用VLQ编码

分析一下我们这五个位置

第一个位置是偏移量，一般单词不会很长，则第一个位置上的数不会很大
第二个位置上源文件名在sources数组中的下标，原文件可能很多，这个数字可能会比较大
第三个位置表示源文件行数，这个位置可能极大，一些大文件可能几千行
第四个位置表示源文件某行的第几列，一般写代码也不会一行写太多‘
第五个位置则为变量名下标，也有可能很大

那么对于这几个可能很大的数字，我们应该如何表示呢？尤其是第三个位置

我们可以使用VLQ编码

例如数字1，23，456，7，8

我们使用比特组来表示这些数字，一个比特组有六位

6	5	4	3	2	1
是否连续，1连续0不连续	表示数字大小	表示数字大小	表示数字大	表示数字大	表示数字正负，1负数，0正数

对于数字1

转为二进制则为1，一个比特组中间四个bit表示数字，填入1，则为0001由于只有一个数字，当然与后面的23不连续，则第六位填入0，为正数，第一位填入0则转为000010

对于数字23，需要使用两个比特组，第二个比特组开始已经不需要符号位，可以将符号为作为保存数据使用

二进制表示为10111，而一个比特组表示数字的位数只有四位，则需要两个比特组则将其拆为 1 0111，将0111放入第一个比特组，1放入第二个第一个比特组，应该表示连续，则第六位是1，正数，第一位为0
则为101110这种情况第二个比特组比较特殊，已经不需要符号位，因为23第一个比特组就已经表示了这个数字是正数
则第二个比特组的第一个比特也用来表示数据，第六个比特应该表示与后面的456不连续，使用0
即应该表示为000001即最终表示为 101110 000001

同理，对于数字456

456的二进制：111001000
9位，第一个比特组4位，第二个及以后都是五位表示数据，则只需要两个比特组
第一个比特组表连续与正数，第二个表终止即不连续，
则：110000 011100

最终：1，23，456，7，8应该表示为：

000010 101110 000001 110000 011100 001110 010000

最后转成十进制再对应base64编码

十进制：2 46 1 48 28 14 16
base64编码：CuBwcOQ

在这里插入图片描述

结尾的话

如有疑问可以评论区交流，欢迎点赞收藏，感谢支持

参考文件：掘金社区文章

SourceMap原理

点击查看原文 1 webpack中使用详见 js的模块化-webpack打包示例 2 webpack的配置 const { resolve } require(path)module.exports {mode: development,devtool: source-map,entry: ./src/index.js,output: {path: resolve(__dirname, dist),filename: "bundle.js&q…...

编程日记 2025/7/13 6:38:03

硬件基础--14_电功率

电功率电功率:指电流在单位时间内做的功(表示用电器消耗电能快慢的一个物理量)。单位:瓦特(W)，简称瓦。公式:PUI(U为电压，单位为V，i为电流，单位为A，P为电功率，单位为W)。单位换算:进位为1000&#xff…...

编程日记 2025/7/9 10:33:26

练习题：110

目录 Python题目题目题目分析需求理解关键知识点实现思路分析代码实现代码解释函数定义： 计算值的总和： 测试函数： 运行思路结束语 Python题目题目定义一个函数，接受一个字典作为参数，返回字…...

编程日记 2025/7/9 1:08:33

Promise使用

Promise 是 JavaScript 中用于处理异步操作的一种对象，它代表了一个异步操作的最终完成（或失败）及其结果值。Promise 有三种状态： 1. pending（进行中）：初始状态，既不是成功也不是失…...

编程日记 2025/7/12 23:06:04

心理咨询法律咨询预约咨询微信小程序系统源码独立部署

预约咨询微信小程序：基于ThinkPHPUniapp的全场景解决方案与SEO深度优化指南在心理健康、医疗问诊、法律咨询等领域线上化需求激增的背景下，预约咨询微信小程序凭借其灵活部署、多场景适配与隐私安全保障，成为机构与从业者提升服务效率的核心…...

编程日记 2025/7/9 1:30:10

JavaFX基础- Button 的基本使用

说明本文记录一下对Button的基本使用，包括但不限于样式的设置，事件的监听等。按钮样式的设置方式一 ： Java代码的方式 // 创建一个按钮Button button new Button("按钮");// 设置按钮的位置button.setLayoutX(50);button.set…...

编程日记 2025/7/5 1:54:40

Golang使用 ip2region 查询IP的地区信息

利用 ip2region 进行 IP 地址定位 import ("fmt""log""github.com/lionsoul2014/ip2region/binding/golang/xdb" )func main() {ip : "213.118.179.98"dbPath : ".\\cmd\\ip\\ip2region.xdb"// 1、初始化查询器//searcher,…...

编程日记 2025/7/11 1:17:33

阿里云数据学习20250327

课堂链接：阿里云培训中心 (aliyun.com) 一、课堂问题 (一)课时3 1.支持字符集的含义是什么...

编程日记 2025/6/28 3:05:32

RAG - 五大文档切分策略深度解析

文章目录切分策略1. 固定大小分割（Fixed-Size Chunking）2. 滑动窗口分割（Sliding Window Chunking）3. 自然语言单元分割（Sentence/Paragraph Segmentation）4. 语义感知分割（Semantic-Aware Seg…...

编程日记 2025/7/10 17:27:17

软件测试之接口测试

🍅 点击文末小卡片 ，免费获取软件测试全套资料，资料在手，涨薪更快接口测试定义接口是前后端沟通的桥梁，是数据传输的通道，包括外部接口、内部接口。内部接口又包括:上层服务与下层服务接口&#xff…...

编程日记 2025/7/9 1:36:07

synchronized锁与lock锁的区别

引言在学习多线程时，当时为了解决线程并发问题，曾有两种锁，一种是synchronized同步块，同步方法，一种就是Lock锁，那么这两种锁之间有什么区别？谁更好用呢？ synchronized 同步方法…...

编程日记 2025/7/9 11:29:18

Open HarmonyOS 5.0 分布式软总线子系统 (DSoftBus) 详细设计与运行分析报告

1. HarmonyOS 5.0 与分布式软总线 (DSoftBus) 概述 1.1 HarmonyOS 5.0 架构概览 HarmonyOS 5.0，又称鸿蒙星河版，标志着操作系统架构的重大演进，其核心在于转向自研的微内核系统 1。此版本摒弃了先前版本中兼容安卓的双框架模式，全…...

编程日记 2025/7/10 8:29:44

蓝桥杯备考：多米诺骨牌

这道题要求上下方格子和之差要最小，其实就是算每个上下格子的差求和的最小值这道题其实是动态规划01背包问题我们直接按步骤做吧 step1:定义状态表示f[i][j]表示从1到i个编号的差值里选出刚好j个数的最小操作次数 step2:推导状态转移方程如图这就是我们的状态…...

编程日记 2025/7/9 5:23:20

C++：allocator类(动态数组续）

1.为什么需要 allocator？ 在 C 中，动态内存管理通常通过 new 和 delete 完成： int* p new int; // 分配内存构造对象 delete p; // 析构对象释放内存但 new 和 delete 有两个问题： 耦合性：将内…...

编程日记 2025/7/10 15:01:58

Go语言手动内存对齐的四大场景与实践指南

Go语言手动内存对齐的四大场景与实践指南引言：Go的内存对齐机制 Go语言通过编译器自动处理内存对齐问题，开发者通常无需关心底层细节。然而，在特定场景下，手动干预内存对齐是避免程序崩溃或数据错乱的必要操作。本文将深入探讨G…...

编程日记 2025/7/12 6:14:00

libva基础

Libva（Lib Video Acceleration）是一个开源的库，实现了 **VA-API**（Video Acceleration API），旨在为视频处理提供跨平台的硬件加速支持。 1、核心功能与作用硬件加速抽象层：Libva 作为中间层&…...

编程日记 2025/7/2 7:04:07

如何在 AI 搜索引擎（GEO）霸屏曝光，快速提升知名度？

虽然大多数人仍然使用 Google 来寻找答案，但正在发生快速转变。ChatGPT、Copilot、Perplexity 和 DeepSeek 等 LLM 已成为主流。这主要是因为每个都有自己的免费和公共版本，并且总是有重大的质量改进。许多人每天都使用这些工具来提问和搜索互联网&…...

编程日记 2025/7/9 14:27:32

Java入门知识总结——章节（二）

ps：本章主要讲数组、二维数组、变量一、数组数组是一个数据容器，可用来存储一批同类型的数据 🔑：注意类也可以是一个类的数组 public class Main {public static class Student {String name;int age; // 移除 unsignedint…...

编程日记 2025/7/5 1:21:35

Python 序列构成的数组(元组不仅仅是不可变的列表)

元组不仅仅是不可变的列表有些 Python 入门教程把元组称为“不可变列表”，然而这并没有完全概括元组的特点。除了用作不可变的列表，它还可以用于没有字段名的记录。鉴于后者常常被忽略，我们先来看看元组作为记录的功用。元组和记录元…...

编程日记 2025/7/12 6:05:37

OJ题：移动零

双指针法 c 语言实现 void moveZeroes(int* nums, int numsSize) {int dest,cur; //创建临时指针和目标指针destcur0;//出初始化while(cur<numsSize)//遍历{if(nums[cur]!0){swap(&nums[cur],&nums[dest]);cur;dest;}else{cur;}}} 思路是建立两个指针&#xff0…...

编程日记 2025/7/10 14:01:23

wait函数等待多个子进程

父进程等待多个子进程时可以使用 wait() 函数，但有一些要点需要注意，下面为你详细介绍相关内容。可以使用 wait() 函数等待多个子进程的原理 wait() 函数会让调用它的父进程暂停执行，直到它的某个子进程结束，然后返回结束子进程…...

编程日记 2025/7/11 16:52:42

数据湖的数据存储与管理策略：构建高效的数据管理框架

数据湖的数据存储与管理策略：构建高效的数据管理框架在大数据时代，数据湖作为存储和管理海量数据的关键技术，已经成为众多企业数字化转型的重要组成部分。数据湖的核心优势在于其能够支持结构化、半结构化和非结构化数据的存储，然而，随着数据量的增加和复杂度的提升，如…...

编程日记 2025/7/8 7:45:37

Linux进程管理之进程的概念、进程列表和详细的查看、进程各状态的含义

进程的概念进程是程序执行的实例，在Linux中，每个进程都有一个唯一的PID（进程ID）。查看当前系统中有哪些进程在Linux系统中，查看当前运行的进程可以使用几个常用命令： ps - 显示当前进程的快照。常用选…...

编程日记 2025/7/4 0:29:57

3万字长文详解Android AIDL 接口设计

目录第一章：AIDL 概述 1.1 什么是 AIDL？定义与核心作用 1.2 AIDL 的典型使用场景第二章：AIDL 语法规则 2.1 支持的数据类型：从基础到高级 2.2 接口声明：写好通信的 “剧本” 2.3 方向标记：数据流向的 “交通灯” 第三章：AIDL 文件编写 3.1 创建 AIDL 文件：从…...

编程日记 2025/7/9 10:50:13

HFSS 使用入门

资源下载资源： https://download.csdn.net/download/wangjun_huster/90547193 下载破解： https://download.csdn.net/download/wangjun_huster/90547551 安装 https://www.bilibili.com/list/ml3403866295?oid925751664&bvidBV1CT4y1u7LB 入门…...

编程日记 2025/7/12 10:32:23

精心整理-2024最新网络安全-信息安全全套资料（学习路线、教程笔记、工具软件、面试文档）.zip

2024最新网络安全-信息安全全套资料（学习路线、教程笔记、工具软件、面试文档），视频教程文档资料共55GB。一、网络安全-信息安全学习路线 0、网络安全-信息安全思维导图.jpg 1、网络安全大师课 V2024.pdf 2、网络安全行业白皮书.pdf 3、网络…...

编程日记 2025/6/28 1:36:31

RAG基建之PDF解析的“流水线”魔法之旅

将PDF文件和扫描图像等非结构化文档转换为结构化或半结构化格式是人工智能的关键部分。然而，由于PDF的复杂性和PDF解析任务的复杂性，这一过程显得神秘莫测。在RAG（Retrieval-Augmented Generation）基建之PDF解析的“魔法”与“陷阱”中，我们介绍了PDF解析的主要任务，对现…...

编程日记 2025/7/11 15:48:29

leetcode刷题日记——跳跃游戏

[ 题目描述 ]： [ 思路 ]： 题目要求在给出的每次可移动最大步数中选择一个移动步数，如果有一种选择能达到终点就返回true，如果没有一种选择能够达到终点就返回false因为每次给出的最大步数不同，步数越大，…...

编程日记 2025/7/9 22:09:20

Scala 数组

Scala 数组引言 Scala 作为一门多范式编程语言，融合了面向对象和函数式编程的特点。数组是编程语言中非常基础和常见的数据结构，在 Scala 中也不例外。本文将详细介绍 Scala 中的数组，包括其定义、操作以及在实际开发中的应用。 Scala 数…...

编程日记 2025/7/10 17:48:36

基于华为设备技术的端口类型详解

以下是基于华为设备技术网页的端口类型详解（截至2025年3月）： 一、Access端口定义：仅允许单个VLAN通过，用于连接终端设备（如PC、打印机） 处理流程： 接收帧：未带标签…...

编程日记 2025/7/10 19:51:01

使用 Go 和 Gin 实现高可用负载均衡代理服务器

前言在现代分布式系统中，负载均衡是保障服务高可用性和性能的核心技术。本文将基于 Go 语言和 Gin 框架实现一个支持动态路由、健康检查、会话保持等特性的企业级负载均衡代理服务器，并提供完整的压力测试方案和优化建议。通过本方案实现的负载均衡代理具备以下优势：单…...

编程日记 2025/7/10 4:26:23

零基础驯服GitHub Pages

各位互联网流浪汉、赛博吉普赛人、以及不小心点进来的产品经理们！今天我们要用程序员的方式搞点大事情——不写代码、不买服务器、不氪金，免费拥有一个能吹牛的个人网站！准备好你的键盘和表情包收藏夹，我们的奇幻漂流开始了&#…...

编程日记 2025/7/7 22:52:19

OpenBMC：BmcWeb 生效路由5 优化trie

OpenBMC：BmcWeb 生效路由4 将路由添加到Trie中-CSDN博客在url被添加到trie中后，validate的最后一步是优化trie void validate() {for (std::unique_ptr<BaseRule>& rule : allRules){if (rule){std::unique_ptr<BaseRule> upgraded = rule->upgrade();if…...

编程日记 2025/7/4 20:03:51

买卖股票的最佳时机（121）

121. 买卖股票的最佳时机 - 力扣（LeetCode） 解法： class Solution { public:int maxProfit(vector<int>& prices) {int cur_min prices[0];int max_profit 0;for (int i 1; i < prices.size(); i) {if (prices[i] > cur…...

编程日记 2025/7/2 22:58:03

强大的AI网站推荐（第四集）—— Gamma

网站：Gamma 号称：展示创意的新媒介博主评价：快速展示创意，重点是展示，在几秒钟内快速生成幻灯片、网站、文档等内容推荐指数：🌟🌟🌟🌟🌟&#x…...

编程日记 2025/7/2 7:06:41

Business Trip and Business Travel

Business Trip and Business Travel References Background I would like to introduce the background. Dave is going on a business trip, but he’s very busy, so he needs Leo’s help to buy the plane ticket. Panda is an agent of China Eastern /ˈiːstərn/ Airl…...

编程日记 2025/7/9 1:35:49