什么是 min js

经常会看到一些 js library 的 CDN 会提供 *.min.js 的库文件，这篇文章就是研究一下什么是 min js。

min js

简单来讲 min js 就是 js 的压缩版本，它的优点是：

• 减小体积
• 传输效率快
• 防止窥视和窃取源代码

很显然 min js 的缺点是：

• 可读性差
• 可读性引发的 debug 等问题

压缩原理

min js 压缩主要是做了两方面的工作：

1. 压缩：删除 js 代码中所有注释、跳格符号、换行符号及无用的空格，从而压缩 js 文件大小
2. 混淆：经过编码将变量和函数原命名改为毫无意义的命名，删除无用代码，内联函数，等价语句替换等(以防止他人窥视和窃取源码)

source map

source map 就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。

在 min js 文件的最后添加如下的代码即可以启用 source map：

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

source map 格式如下所示：

{
	version : 3,
	file: "out.js",
	sourceRoot : "",
	sources: ["foo.js", "bar.js"],
	names: ["src", "maps", "are", "fun"],
	mappings: "AAgBC,SAAQ,CAAEA"
}

• version：Source map的版本，目前为3。
• file：转换后的文件名。
• sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
• sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
• names：转换前的所有变量名和属性名。
• mappings：记录位置信息的字符串。

min js 和 source map 两个文件的各个位置是如何一一对应的，关键就是 map 文件的mappings 属性。这是一个很长的字符串，它分成三层：

1. 第一层是行对应，以分号（;）表示，每个分号对应转换后源码的一行。所以，第一个分号前的内容，就对应源码的第一行，以此类推。
2. 第二层是位置对应，以逗号（,）表示，每个逗号对应转换后源码的一个位置。所以，第一个逗号前的内容，就对应该行源码的第一个位置，以此类推。
3. 第三层是位置转换，以 VLQ 编码表示，代表该位置对应的转换前的源码位置。

举例来理解：

{
  mappings:"AAAAA,BBBBB;CCCCC"
}

上面的 mappings 表示转换后的源码分成两行，第一行有两个位置，第二行有一个位置。

位置对应关系，每个位置使用五位，表示五个字段，从左边算起：

1. 第一位，表示这个位置在（转换后的代码的）的第几列。
2. 第二位，表示这个位置属于sources属性中的哪一个文件。
3. 第三位，表示这个位置属于转换前代码的第几行。
4. 第四位，表示这个位置属于转换前代码的第几列。
5. 第五位，表示这个位置属于names属性中的哪一个变量。

References

1. javascript 中 .min.js 和.js 文件的区别？
2. JavaScript Source Map 详解
3. cdnjs - The #1 free and open source CDN built to make life easier for developers