部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度。然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。
为啥变换代码?
前端代码越来越复杂的情况下,开发者通常会使用webpack、UglifyJS2等工具对代码进行打包变换,这样可以减少代码大小,有效提高访问速度。关于变换代码的原因,这里不妨引用一下大神阮一峰的JavaScript Source Map 详解:
- 压缩,减小体积。比如jQuery 1.9的源码,压缩前是252KB,压缩后是32KB。
- 多个文件合并,减少HTTP请求数。
- 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。
如何变换代码?
下面是一个简单的“hello World”程序hello.js
function sayHello()
{
var name = "Fundebug";
var greeting = "Hello, " + Name;
console.log(greeting);
}
sayHello();
使用UglifyJS2对源代码进行压缩变换:
uglifyjs hello.js \
-m toplevel=true \
-c unused=true,collapse_vars=true \
-o hello.min.js
压缩后的代码hello.min.js
function o(){var o="Hello, "+Name;console.log(o)}o();
为啥需要Source Map?
使用Firefox执行hello.js的报错信息是这样:
ReferenceError: Name is not defined
sayHello file:///Users