jquery.js、jquery.min.js、jquery.min.map的区别介绍

JavaScript

jquery.js和jquery.min.js的区别

两个文件的作用是完全一样的,但从文件或上来看我们知道jquery.min.js应该是迷你版的意思，也就是文件会很小，但绝对不是很好看，下面总结了

jquery-1.4.2.js里的代码是没有进行处理的原代码,适合于人们阅读与研究.
jquery-1.4.2.min.js里的代码进行过特殊的处理,如变量的名称基本都写成一个字母,而且格式缩进都被删除了.
所以文件容量比较小(min),一般在网页中调用这个文件.
可以看作:jquery-1.4.2.min.js是jquery-1.4.2.js的编译版本

所在得出结论是jquery-1.4.2.min.js是小，而query-1.4.2.js才是好看的。

JavaScript Source Map 详解

访问 http://libs.baidu.com/jquery/1.10.2/jquery.min.js，打开压缩后的版本，顶部，你可以看到最后一行是这样的：

//@ sourceMappingURL=jquery.min.map

这就是Source Map。它是一个独立的map文件，与源码在同一个目录下，你可以点击进去，看看它的样子。这是一个很有用的功能。

一、从源码转换讲起

JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换压缩，才能投入生产环境。如上面提到的jquery.min.js，都使得实际运行的代码不同于开发代码，除错（debug）变得困难重重。

通常，JavaScript的解释器会告诉你，第几行第几列代码出错。但是，这对于转换后的代码毫无用处。举例来说，jQuery 1.9压缩后只有3行，每行3万个字符，所有内部变量都改了名字。你看着报错信息，感到毫无头绪，根本不知道它所对应的原始位置。

这就是Source map想要解决的问题。

二、什么是Source map

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

jquery.js、jquery.min.js、jquery.min.map的区别介绍

目前，暂时只有Chrome浏览器支持这个功能。在Developer Tools的Setting设置中，确认选中"Enable source maps"。

jquery.js、jquery.min.js、jquery.min.map的区别介绍

三、如何启用Source map

正如前文所提到的，只要在转换后的代码尾部或顶部，加上一行就可以了。

//@ sourceMappingURL=/path/to/file.js.map

map文件可以放在网络上，也可以放在本地文件系统。

摘自：

  • http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
  • http://www.php100.com/html/program/jquery/2013/0905/5888.html