Link： "原文鏈接" 譯文開始： 對網站進行性能優化對一個最容易的方法就是把JS和CSS進行打包壓縮。但是當你需要調試這些壓縮文件中的代碼的時候，會發生什麼？可能會是一場噩夢。但是，不用害怕，即將有一個解決方案到來，它就是Source Maps。 source maps提供一種將壓縮文件中的代碼 ...
Link： 原文鏈接
譯文開始：
對網站進行性能優化對一個最容易的方法就是把JS和CSS進行打包壓縮。但是當你需要調試這些壓縮文件中的代碼的時候，會發生什麼？可能會是一場噩夢。但是，不用害怕，即將有一個解決方案到來，它就是Source Maps。
source maps提供一種將壓縮文件中的代碼映射回源文件中原始位置的方法。這意味著，藉助一些軟體的幫助，即使你的資源被壓縮，你也可以輕易調試你的程式。Chrome和Firefox內置的開發者工具都支持source maps了。
在這篇文章中，你將會學習到source maps的實現原理以及怎麼去生成source maps。我們主要是關註JavaScript代碼的source maps，但是這些原則同樣適用於CSS的source maps。
Source Maps實現原理
顧名思義，source map（源映射）就是包含一堆的信息，可以將壓縮文件的代碼映射回到源代碼。你可以為每個壓縮文件指定不同的source map。
通過在壓縮文件底部添加特殊的註釋，向瀏覽器表明souce map是可用的。
//# sourceMappingURL=/path/to/script.js.map該註釋通常會被用於生成source map的程式添加。僅當開發者工具支持source map啟用了以及打開的時候，開發者工具才會載入這些文件。
也可以在壓縮的JavaScript文件的響應中通過設置X-SourceMap的HTTP響應頭來開啟source map。
X-SourceMap: /path/to/script.js.map下麵來看看source map文件的內容：一個JSON對象，包含文件說明以及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： 源文件URL的一個數組
- sourceRoot: （可選）源文件數組URL指定的文件根路徑
- names：包含源文件所有變數和函數名的數組。
- mappings：包含實際代碼映射的Base64 VLQ字元串。 （這就是魔術發生的地方）
使用UglifyJS 生成Source Maps
UglifyJS是一個用於合併壓縮JS文件的命令行工具。版本2支持很多有助於生成source map的命令行標識。
- --source-map：source map輸出文件
- --source-map-root：（可選）source map源文件根路徑
- --source-map-url ：（可選）伺服器source map文件路徑。用於壓縮文件的註釋中路徑。
//# sourceMappingURL=/path/to/script.js.map以上全部選項可查看文檔
來看個試一下生成一個source map，在一個目錄中創建一個JS文件test.js
test.js內容：
function test(){
console.log('test')
}uglifyjs test.js -o test.min.js --source-map "url='test.min.js.map'"如果沒有安裝，需要先安裝uglifyJs，執行命令後，生成三個文件。
以上沒有用原文的例子，使用自己實現的例子。
test.min.js輸出後到代碼:
function test(){console.log("test")}
//# sourceMappingURL=test.min.js.map還有以下其他工具也可以用於生成source maps：
Chorome開發者工具調試Source Maps
為了方便演示，已經偏離原文的例子。
之前生成的test.min.js文件，我們通過引入到html文件中進行調試。
html文件：
<html>
<head>
<title>test</title>
</head>
<body>
<script src="./test.min.js"></script>
<script>
test()
</script>
</body>
</html>先看看沒開啟source map的情況是如何：
沒開啟source map，只載入了test.min.js文件
開啟後再嘗試：
發現會載入test.js源文件，以及在源文件進行調試。
小結
使用source map可以使開發人員維護直接的調試環境，同時優化其站點的性能。
有用的鏈接
（完）
