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源文件,以及在源文件进行调试。
JavaScript Source Maps浅析的更多相关文章
- Introduction to JavaScript Source Maps
下载jquery时候发现:jquery.min.map 这什么鬼呀? https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/core.js http ...
- 【译】Source Maps浅析
Time:2019/10/27~2019/10/29 Link: 原文链接 译文开始: 对网站进行性能优化对一个最容易的方法就是把JS和CSS进行打包压缩.但是当你需要调试这些压缩文件中的代码的时候, ...
- Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT Source Maps 详解
系列 Sentry-Go SDK 中文实践指南 一起来刷 Sentry For Go 官方文档之 Enriching Events Snuba:Sentry 新的搜索基础设施(基于 ClickHous ...
- WebStorm 9 自动编译 LESS 产出 CSS 和 source maps
1.双击桌面Chrome图标,打开Chrome,按键盘“F12”键,打开开发工具界面,点击其右上角的“设置”按钮,勾选“Enable JavaScript source maps” 及“Enable ...
- JavaScript Source Map 详解
源码地址: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html 上周,jQuery 1.9发布. 这是2.0版之前的最后 ...
- javascript source map 的使用
之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大意 ...
- 前端构建:Source Maps详解
一.前言 当使用CoffeeScript.ClojureScript编写前端脚本时,当使用Less.Sacc编写样式规则时,是否觉得调试时无法准确找到源码位置呢?当使用jquery.min.js等经压 ...
- Source Maps简介
提高网站性能最简单的方式之一是合并压缩JavaScript和CSS文件.但是当你需要调试这些压缩文件中的代码时,那将会是一场噩梦.不过也不用担心,souce maps将会帮你解决这一问题. Sourc ...
- [AngualrJS + Webpack] Production Source Maps
When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a ...
随机推荐
- linux服务器上如何使用nginx访问本地静态资源
查看80端口是否被占用,一般80端口多被apache服务占用. netstat -anp|grep 80 2.修改apache服务的端口号 vim /etc/apache2/ports.conf 3. ...
- 【HDU6709】Fishing
题目大意:有 N 条鱼,每条鱼都有钓鱼和烤鱼的时间,钓鱼的时间均相同,每条鱼都有自己的烤鱼时间,一次只能烤一条鱼,且不能间断.现要求通过某种顺序将所有的鱼钓上来并烤完,求最小的时间是多少. 题解: 对 ...
- python之ORM
pymysql python操作数据库的基本步骤: 导入相应的python模块: 使用connect函数连接数据库,并返回一个connection对象: 通过connection对象的cursor方法 ...
- 交互式数据可视化-D3.js(三)比例尺
线性比例尺 线性比例尺是常用比例尺常用方法有: var linear = d3.scaleLinear() - 创建一个定量的线性比例尺. linear.domain([numbers]) - 定义或 ...
- c++命名空间namespace
namespace 变量作用域的作用空间,这样可以防止相同名称的变量被调用时带来的问题#include "iostream" #include <string> usi ...
- Acwing-275-传纸条(DP)
链接: https://www.acwing.com/problem/content/description/277/ 题意: 给定一个 N*M 的矩阵A,每个格子中有一个整数. 现在需要找到两条从左 ...
- qt5--鼠标操作
#include "mylabel.h" #include <QDebug> #include <QPointF> #include <QPoint& ...
- Centos 由字符界面 init 3 切换图形界面 init 5
Centos6 和 Centos7 由字符界面切换成 图形界面方法不同,下面分别介绍. 一.Centos6 切换方法 yum -y install xorg* yum -y groupinstall ...
- 计算机网络(四),TCP三次握手
目录 1.三次握手详情 2.为什么需要三次握手才能建立连接 3.首次握手的隐患---SYN超时的问题 4.建立连接之后,Client出现故障 四.TCP三次握手 1.三次握手详情 (1)一开始,客户端 ...
- 论文阅读:ClickNF: a Modular Stack for Custom Network Functions
摘要: 网络功能虚拟化最近允许用等效的软件实现代替专用设备, Click路由器是朝这个方向迈出的第一步,它定义了用于通用数据包处理的模块化平台. 尽管Click具有重大影响,但它不提供本机L4实现,而 ...