Source Map簡(jiǎn)介

部署JavaScript腳本之前，開(kāi)發(fā)者通常會(huì)使用UglifyJS2等工具對(duì)代碼壓縮變換。

為什么需要轉(zhuǎn)換代碼？

• 壓縮，減小體積。比如jQuery 1.9的源碼，壓縮前是252KB，壓縮后是32KB。
• 多個(gè)文件合并，減少HTTP請(qǐng)求數(shù)。
• 其他語(yǔ)言編譯成JavaScript。最常見(jiàn)的例子就是CoffeeScript。

什么是Source Map?

Source Map是一個(gè)JSON文件，其中包含了代碼轉(zhuǎn)換前后的位置信息。給定一個(gè)轉(zhuǎn)換之后的壓縮代碼的位置，就可以通過(guò)Source Map獲取轉(zhuǎn)換之前的代碼位置，反過(guò)來(lái)也一樣。

Source Map有哪些屬性？

• version：Source Map的版本號(hào)。
• file：轉(zhuǎn)換后的文件名。(可選)
• sourceRoot：轉(zhuǎn)換前的文件所在的目錄。如果與轉(zhuǎn)換前的文件在同一目錄，該項(xiàng)為空。(可選)
• sources：轉(zhuǎn)換前的文件列表。
• sourcesContent: 轉(zhuǎn)換前的文件內(nèi)容列表，與sources列表依次對(duì)應(yīng)。(可選)
• names：轉(zhuǎn)換前的所有變量名和屬性名。
• mappings：記錄位置信息的字符串，經(jīng)過(guò)編碼。

參考鏈接

• Source Map入門教程
• JavaScript Source Map 詳解
• Source Map Revision 3 Proposal