link:
译文开始:
对网站进行性能优化对一个最容易的方法就是把js和css进行打包压缩。但是当你需要调试这些压缩文件中的代码的时候,会发生什么?可能会是一场噩梦。但是,不用害怕,即将有一个解决方案到来,它就是source maps。
source maps提供一种将压缩文件中的代码映射回源文件中原始位置的方法。这意味着,借助一些软件的帮助,即使你的资源被压缩,你也可以轻易调试你的程序。chrome和firefox内置的开发者工具都支持source maps了。
在这篇文章中,你将会学习到source maps的实现原理以及怎么去生成source maps。我们主要是关注javascript代码的source maps,但是这些原则同样适用于css的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..." }
具体每个属性的说明:
uglifyjs是一个用于合并压缩js文件的命令行工具。版本2支持很多有助于生成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:
为了方便演示,已经偏离原文的例子。
之前生成的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可以使开发人员维护直接的调试环境,同时优化其站点的性能。
(完)
如对本文有疑问, 点击进行留言回复!!
Parallels Desktop v15.1.4-47270 商业版下载 Mac安装Windows首选虚拟机
关于LPC824Lite开发板下载程序时提示"Invalid ROM Table"
MySQL 5.7 关于 JSON 类型的子集Key/Value获取方法分享
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
网友评论