【譯】Source Maps淺析
Time：2019/10/27~2019/10/29
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：
- coffeeScript Compiler
- GruntJS Task for JSMin
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可以使開發人員維護直接的除錯環境，同時優化其站點的效能。
有用的連結
- Source Map 詳解
- JavaScript Source Map 介紹
- UglifyJS2
- Source Map 修訂版提案
（完