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="https://www.cnblogs.com/GeniusLyzh/p/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 修訂版提案
（完）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/178075.html
標籤：JavaScript
上一篇：VUE 元素拖拽、移動
下一篇：js陣列去重