部署前端之前屹电，開發(fā)者通常會對代碼進行打包壓縮阶剑，這樣可以減少代碼大小，從而有效提高訪問速度危号。然而牧愁，壓縮代碼的報錯信息是很難Debug的，因為它的行號和列號已經(jīng)失真外莲。這時就需要Source Map來還原真實的出錯位置了猪半。
為啥變換代碼兔朦？
前端代碼越來越復雜的情況下，開發(fā)者通常會使用webpack磨确、UglifyJS2等工具對代碼進行打包變換沽甥，這樣可以減少代碼大小，有效提高訪問速度乏奥。變換代碼的原因如下：
- 壓縮摆舟，減小體積。比如jQuery 1.9的源碼邓了，壓縮前是252KB恨诱，壓縮后是32KB。
- 多個文件合并骗炉，減少HTTP請求數(shù)照宝。
- 其他語言編譯成JavaScript。最常見的例子就是CoffeeScript句葵。
什么是Source Map?
Source Map是一個JSON文件硫豆，而它包含了代碼轉換前后的位置信息。也就是說笼呆，給定一個轉換之后的壓縮代碼的位置，就可以通過Source Map獲取轉換之前的代碼位置旨别，反過來也一樣诗赌。
Source Map各個屬性的含義如下:
- version：Source Map的版本號。
- sources：轉換前的文件列表秸弛。
- names：轉換前的所有變量名和屬性名铭若。
- mappings：記錄位置信息的字符串，經(jīng)過編碼递览。
- file：(可選)轉換后的文件名叼屠。
- sourceRoot：(可選)轉換前的文件所在的目錄。如果與轉換前的文件在同一目錄绞铃，該項為空镜雨。
- sourcesContent:(可選)轉換前的文件內容列表，與sources列表依次對應儿捧。
Source Map真正神奇之處在于mappings屬性荚坞，它記錄了位置是如何對應的。
