【译】JavaScript Source Maps浅析

Link： 原文链接

译文开始：

对网站进行性能优化对一个最容易的方法就是把JS和CSS进行打包压缩。但是当你需要调试这些压缩文件中的代码的时候，会发生什么？可能会是一场噩梦。但是，不用害怕，即将有一个解决方案到来，它就是Source Maps。

source maps提供一种将压缩文件中的代码映射回源文件中原始位置的方法。这意味着，借助一些软件的帮助，即使你的资源被压缩，你也可以轻易调试你的程序。Chrome和Firefox内置的开发者工具都支持source maps了。

在这篇文章中，你将会学习到source maps的实现原理以及怎么去生成source maps。我们主要是关注JavaScript代码的source maps，但是这些原则同样适用于CSS的source maps。

Source Maps实现原理

顾名思义，source map（源映射）就是包含一堆的信息，可以将压缩文件的代码映射回到源代码。你可以为每个压缩文件指定不同的source map。
通过在压缩文件底部添加特殊的注释，向浏览器表明souce map是可用的。

//# sourceMappingURL=/path/to/script.js.map

该注释通常会被用于生成source map的程序添加。仅当开发者工具支持source map启用了以及打开的时候，开发者工具才会加载这些文件。

也可以在压缩的JavaScript文件的响应中通过设置X-SourceMap的HTTP响应头来开启source map。

X-SourceMap: /path/to/script.js.map

下面来看看source map文件的内容：一个JSON对象，包含文件说明以及JavaScript源文件。看个例子：

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}

具体每个属性的说明：

  • version : 这个属性说明这个文件遵循source map规范的哪一个版本。具体可以查看规范
  • file ：source map文件名
  • sources： 源文件URL的一个数组
  • sourceRoot: （可选）源文件数组URL指定的文件根路径
  • names：包含源文件所有变量和函数名的数组。
  • mappings：包含实际代码映射的Base64 VLQ字符串。 （这就是魔术发生的地方）

使用UglifyJS 生成Source Maps

UglifyJS是一个用于合并压缩JS文件的命令行工具。版本2支持很多有助于生成source map的命令行标识。

  • --source-map：source map输出文件
  • --source-map-root：（可选）source map源文件根路径
  • --source-map-url ：（可选）服务器source map文件路径。用于压缩文件的注释中路径。
//# sourceMappingURL=/path/to/script.js.map

以上全部选项可查看文档

来看个试一下生成一个source map，在一个目录中创建一个JS文件test.js
test.js内容：

function test(){
    console.log('test')
}

uglifyjs test.js -o test.min.js --source-map "url='test.min.js.map'"

如果没有安装，需要先安装uglifyJs，执行命令后，生成三个文件。

以上没有用原文的例子，使用自己实现的例子。

test.min.js输出后到代码:

function test(){console.log("test")}
//# sourceMappingURL=test.min.js.map

还有以下其他工具也可以用于生成source maps：

Chorome开发者工具调试Source Maps

为了方便演示，已经偏离原文的例子。

之前生成的test.min.js文件，我们通过引入到html文件中进行调试。
html文件：

<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <script src="./test.min.js"></script>
        <script>
        test()
        </script>
    </body>
</html>

先看看没开启source map的情况是如何：

没开启source map，只加载了test.min.js文件

开启后再尝试：

发现会加载test.js源文件，以及在源文件进行调试。

小结

使用source map可以使开发人员维护直接的调试环境，同时优化其站点的性能。

有用的链接

（完）

作者：GeniusLyzh
出处：http://www.cnblogs.com/GeniusLyzh/
本文链接：https://www.cnblogs.com/GeniusLyzh/p/11763149.html
本文版权归作者和博客园共有，欢迎转载，须保留此段声明，并给出原文链接，谢谢！
如果阅读了本文章，觉得有帮助，欢迎点击右下角推荐
posted @   Aarongo  阅读(1027)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
历史上的今天：
2014-10-30 cookie实现刷新不变化树形菜单
点击右上角即可分享
微信分享提示