【譯】Source Maps淺析

2019 年 10 月 30 日
筆記

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：

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可以使開發人員維護直接的調試環境，同時優化其站點的性能。

有用的鏈接

（完）