提高網站性能最簡單的方式之一是合並壓縮JavaScript和CSS文件。但是當你需要調試這些壓縮文件中的代碼時，那將會是一場噩夢。不過也不用擔心，souce maps將會幫你解決這一問題。
Source map提供了一種方式，能夠將壓縮文件中的代碼映射回源文件中對應的位置。這意味着，你可以借助一些軟件很輕易地調試應用程序中那些經過優化處理過的資源。Chrome和Firefox提供的開發者工具都內置了對source maps的支持。
本文將介紹source maps的工作原理，以及如何生成它們。我們將主要關注JavaScript代碼的source maps，不過這些原理也同樣適用於CSS。
提示：Firefox開發者工具中的source maps默認是開啟的。對於Chrome而言，你可能需要手動啟用這一功能（譯者：目前看來，Chrome中這一功能默認也是開啟的）。在Chrome中打開開發者工具（譯者：默認的快捷鍵是F12），然后找到“設置”面板（譯者：開發者工具面板的右上角，點擊有三個點的菜單，其中可以找到“Settings”菜單），在“General”選項卡中勾選“Enable JS source maps”和“Enable CSS source maps”（譯者：我所使用的Chrome版本中，這兩個設置項在“Preferences”選項卡中）。
Source Maps的工作原理
顧名思義，source map中包含了許多能夠將壓縮文件中的代碼映射回源代碼的信息。對於每一個壓縮文件，你可以為其指定不同的source map。
通過在經過優化的壓縮文件的末尾添加一行特殊的注釋，來告訴瀏覽器有可用的source map。
//# sourceMappingURL=/path/to/script.js.map
該注釋通常由生成source map的程序自動添加。當瀏覽器的開發者工具被打開時，如果source maps功能被啟用，那么該文件將會被加載。
你還可以通過在壓縮的JavaScript文件的響應中發送X-SourceMap HTTP頭來指定source map。
X-SourceMap: /path/to/script.js.map
Source map文件包含一個JSON對象，用來描述source map文件本身以及JavaScript源文件的一些信息。下面是一個例子：
{ version: 3, file: "script.js.map", sources: [ "app.js", "content.js", "widget.js" ], sourceRoot: "/", names: ["slideUp", "slideDown", "save"], mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..." }
讓我們來仔細看看這些屬性。
- version - 此屬性用於說明source map文件的版本。
- file - source map文件的名稱。
- sources - 一組包含源文件URLs的數組。
- sourceRoot - （可選）sources屬性中那些URLs相對路徑的根目錄。
- names - 包含源文件中所有變量和函數名稱的數組。
- mappings - 一組包含實際代碼映射的Base64 VLQs的字符串（這正是source map起作用的核心）。
使用UglifyJS生成source maps
UglifyJS是一個很流行的命令行工具，用來合並和壓縮JavaScript文件。版本2提供了許多的命令行參數，用來幫助我們生成source maps。
- --source-map - 生成的source map文件的名稱。
- --source-map-root - （可選）指定source map文件中sourceRoot屬性的值。
- --source-map-url - （可選）在經過優化的壓縮文件底部的注釋中指定source map文件的路徑。如：//# sourceMappingURL=/path/to/script.js.map
- --in-source-map - （可選）輸入的source map。假如你正在壓縮的JavaScript文件是從另一個源文件生成的。例如JavaScript庫。
- --prefix或-p - （可選） 移除source map文件中sources屬性里URLs的路徑層級。例如，-p 3將會移除路徑中的前三級，這樣“one/two/three/file.js”會變成“file.js”。使用-p relative會讓UglifyJS在source map和源文件之間計算出相對路徑。
下面是一個使用這些命令行參數的例子。
uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m
注意：如果在Grunt中使用grunt-contrib-uglify插件，請參考這里查看如何在Gruntfile中使用這些選項。
還有許多其它可用的工具能夠生成source maps文件。下面列出了其中一些。
Chrome開發者工具中的source maps
Chrome開發者工具中的Sources選項卡
如果你的source maps設置正確，那么你將在Sources選項卡中看到所有的JavaScript源文件。
查看頁面的HTML代碼，你會發現僅有一個壓縮的JavaScript文件被引用。而開發者工具自動加載了對應的source map文件並獲取了對應的源文件。
Firefox開發者工具中的source maps
Firefox開發者工具中的調試器面板
Firefox用戶在開發者工具的調試器中能夠看到source maps對應的源文件。開發者工具識別出了source map的存在並自動獲取了對應的源文件。
一些感想
使用source map使得開發人員能夠在調試環境下直觀地查看並維護代碼，同時網站也獲得了更好的性能提升。
本文介紹了source maps的工作原理以及如何用UglifyJS生成source maps。如果你的網站使用了壓縮過的資源（推薦這樣做），那么可以考慮花點時間將source map整合到其中。
有用的鏈接
原文地址：https://blog.teamtreehouse.com/introduction-source-maps