Source Maps簡介

　　提升網站性能最簡單的方式之一是合併壓縮JavaScript和CSS文件。可是當你須要調試這些壓縮文件中的代碼時，那將會是一場噩夢。不過也不用擔憂，souce maps將會幫你解決這一問題。

　　Source map提供了一種方式，可以將壓縮文件中的代碼映射回源文件中對應的位置。這意味着，你能夠藉助一些軟件很輕易地調試應用程序中那些通過優化處理過的資源。Chrome和Firefox提供的開發者工具都內置了對source maps的支持。

　　本文將介紹source maps的工做原理，以及如何生成它們。咱們將主要關注JavaScript代碼的source maps，不過這些原理也一樣適用於CSS。

 

　　提示：Firefox開發者工具中的source maps默認是開啓的。對於Chrome而言，你可能須要手動啓用這一功能（譯者：目前看來，Chrome中這一功能默認也是開啓的）。在Chrome中打開開發者工具（譯者：默認的快捷鍵是F12），而後找到「設置」面板（譯者：開發者工具面板的右上角，點擊有三個點的菜單，其中能夠找到「Settings」菜單），在「General」選項卡中勾選「Enable JS source maps」和「Enable CSS source maps」（譯者：我所使用的Chrome版本中，這兩個設置項在「Preferences」選項卡中）。

 Source Maps的工做原理

　　顧名思義，source map中包含了許多可以將壓縮文件中的代碼映射回源代碼的信息。對於每個壓縮文件，你能夠爲其指定不一樣的source map。

　　經過在通過優化的壓縮文件的末尾添加一行特殊的註釋，來告訴瀏覽器有可用的source map。

//# sourceMappingURL=/path/to/script.js.map

　　該註釋一般由生成source map的程序自動添加。當瀏覽器的開發者工具被打開時，若是source maps功能被啓用，那麼該文件將會被加載。

　　你還能夠經過在壓縮的JavaScript文件的響應中發送X-SourceMap HTTP頭來指定source map。

X-SourceMap: /path/to/script.js.map

　　Source map文件包含一個JSON對象，用來描述source map文件自己以及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 - 一組包含源文件URLs的數組。
• sourceRoot - （可選）sources屬性中那些URLs相對路徑的根目錄。
• names - 包含源文件中全部變量和函數名稱的數組。
• mappings - 一組包含實際代碼映射的Base64 VLQs的字符串（這正是source map起做用的核心）。

使用UglifyJS生成source maps

　　UglifyJS是一個很流行的命令行工具，用來合併和壓縮JavaScript文件。版本2提供了許多的命令行參數，用來幫助咱們生成source maps。

• --source-map - 生成的source map文件的名稱。
• --source-map-root - （可選）指定source map文件中sourceRoot屬性的值。
• --source-map-url - （可選）在通過優化的壓縮文件底部的註釋中指定source map文件的路徑。如：//# sourceMappingURL=/path/to/script.js.map
• --in-source-map - （可選）輸入的source map。假如你正在壓縮的JavaScript文件是從另外一個源文件生成的。例如JavaScript庫。
• --prefix或-p - （可選） 移除source map文件中sources屬性裏URLs的路徑層級。例如，-p 3將會移除路徑中的前三級，這樣「one/two/three/file.js」會變成「file.js」。使用-p relative會讓UglifyJS在source map和源文件之間計算出相對路徑。

　　下面是一個使用這些命令行參數的例子。

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

 

　　注意：若是在Grunt中使用grunt-contrib-uglify插件，請參考這裏查看如何在Gruntfile中使用這些選項。

 

　　還有許多其它可用的工具可以生成source maps文件。下面列出了其中一些。

• Closure
• CoffeeScript編譯器
• Grunt任務中的grunt-jsmin-sourcemap

Chrome開發者工具中的source maps

Chrome開發者工具中的Sources選項卡

　　若是你的source maps設置正確，那麼你將在Sources選項卡中看到全部的JavaScript源文件。

　　查看頁面的HTML代碼，你會發現僅有一個壓縮的JavaScript文件被引用。而開發者工具自動加載了對應的source map文件並獲取了對應的源文件。

Firefox開發者工具中的source maps

Firefox開發者工具中的調試器面板

　　Firefox用戶在開發者工具的調試器中可以看到source maps對應的源文件。開發者工具識別出了source map的存在並自動獲取了對應的源文件。

一些感想

　　使用source map使得開發人員可以在調試環境下直觀地查看並維護代碼，同時網站也得到了更好的性能提高。

　　本文介紹了source maps的工做原理以及如何用UglifyJS生成source maps。若是你的網站使用了壓縮過的資源（推薦這樣作），那麼能夠考慮花點時間將source map整合到其中。

有用的連接

• Source Maps版本3的提案
• UglifyJS
• Source Mapg Demo

 

原文地址：https://blog.teamtreehouse.com/introduction-source-maps