針對 Source Maps 的一篇介紹（翻譯）

紫Young菌發表於2019-01-31

針對 Source Maps 的一篇介紹（翻譯）

原文連結

組合並且壓縮你的JavaScript 和 CSS檔案是提高效能最方便的方式之一。但是當你需要除錯這些壓縮後的程式碼的時候會發生什麼呢？它可能是異常噩夢。不過不用怕，這裡有一個通過source maps的name來解決的問題的方案。

source maps提供了一種將壓縮後的檔案程式碼對映到原始檔的初始位置的方式。這意味著在軟體的幫助下，你可以輕易的除錯你的應用甚至在你已經做了程式碼優化（壓縮）處理的情況下。谷歌以及火狐瀏覽器的開發者工具目前都內建了對source maps的支援。

這篇部落格將告訴你source maps的工作原理以及如何生成。我們將主要關注JS的源對映，CSS的源對映也是相同原理。

注意：Firefox的開發人員工具預設啟用對源對映的支援。您可能需要在Chrome中手動啟用支援。要執行此操作，請啟動Chrome開發工具並開啟“ 設定”窗格（右下角的齒輪）。在常規選項卡中，確保啟用JS源地圖和啟用CSS源的地圖都打勾。

源對映的工作原理

顧名思義，源對映由一大堆檔案組成，使壓縮後的程式碼可以對映回原始檔。你可以為每一個壓縮後的檔案提供不同的源對映。

通過在優化（壓縮）後的檔案的底部新增特殊註釋，向瀏覽器提供可用的源對映。

//# sourceMappingURL=/path/to/script.js.map
複製程式碼

此註釋通常由用於生成源對映的程式新增。如果啟用了對源對映的支援並且開發人員工具已開啟，則開發人員工具將僅載入此檔案。

您還可以通過X-SourceMap在壓縮的JavaScript檔案的響應中傳送HTTP header來指定源對映。

X-SourceMap: /path/to/script.js.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- 此屬性指示檔案所遵循的源對映規範的版本。
  • file - 源對映檔案的名稱。
  • sources - 原始原始檔的URL陣列。
  • sourceRoot- （可選）sources將解析陣列中所有檔案的URL 。
  • names - 包含原始檔中所有變數和函式名稱的陣列。
  • mappings- 包含實際程式碼對映的Base64 VLQ字串。（這是魔術發生的地方。）

使用UglifyJS生成源對映

UglifyJS是一個受歡迎的命令列工具，可以對你的檔案進行組合壓縮。版本2 支援大量的命令列標誌用以生成source maps。

  • --source-map - 源對映的輸出檔案。
  • --source-map-root- （可選）這將填充sourceRoot地圖檔案中的屬性。
  • --source-map-url - （可選）伺服器上源對映的路徑。這將被放在優化檔案的註釋中。//# sourceMappingURL=/path/to/script.js.map
  • --in-source-map - （可選）輸入源對映。如果要壓縮已從其他位置的原始檔生成的JavaScript檔案，這可能很有用。想想JavaScript庫。
  • --prefix或-p- （可選）n從sources屬性中顯示的檔案路徑中刪除多個目錄。例如，-p 3將從檔案路徑中刪除前三個目錄，因此one/two/three/file.js將成為file.js。使用-p relative將使UglifyJS為您找出源地圖和原始檔案之間的相對路徑。

如下示例：

uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m
複製程式碼

除此之外還有其他的工具可以用來生成source maps。列表如下：

谷歌瀏覽器開發者工具中的Source Maps

針對 Source Maps 的一篇介紹（翻譯）
如果你正確設定了源對映，則應該會看到Sources選項卡的檔案窗格中列出的每個原始JavaScript檔案。

檢查頁面的HTML，確認僅引用了壓縮的JavaScript檔案。開發工具正在載入源對映檔案，然後獲取每個原始原始檔。

火狐瀏覽器開發者工具中的Source Maps

針對 Source Maps 的一篇介紹（翻譯）
Firefox使用者可以在開發者工具的“ 偵錯程式”選項卡中檢視各個原始檔。dev工具再次確定源對映可用，然後獲取每個引用的原始檔。

如果您希望檢視壓縮版本，請單擊選項卡右上角的齒輪圖示，然後取消選擇 Show original sources（顯示原始源）。

總結

使用Source Maps允許開發人員維護以及修復程式碼時，直接進行除錯，同時優化其站點以提高效能。

參考連結

相關文章