【譯】JavaScript Source Maps 淺析

時間 2019-12-08

標籤 javascript source maps 淺析欄目 JavaScript 简体版

原文原文鏈接

Link：原文連接javascript

譯文開始：html

對網站進行性能優化對一個最容易的方法就是把JS和CSS進行打包壓縮。可是當你須要調試這些壓縮文件中的代碼的時候，會發生什麼？可能會是一場噩夢。可是，不用懼怕，即將有一個解決方案到來，它就是Source Maps。html5

source maps提供一種將壓縮文件中的代碼映射回源文件中原始位置的方法。這意味着，藉助一些軟件的幫助，即便你的資源被壓縮，你也能夠輕易調試你的程序。Chrome和Firefox內置的開發者工具都支持source maps了。java

在這篇文章中，你將會學習到source maps的實現原理以及怎麼去生成source maps。咱們主要是關注JavaScript代碼的source maps，可是這些原則一樣適用於CSS的source maps。git

Source Maps實現原理

顧名思義，source map（源映射）就是包含一堆的信息，能夠將壓縮文件的代碼映射回到源代碼。你能夠爲每一個壓縮文件指定不一樣的source map。經過在壓縮文件底部添加特殊的註釋，向瀏覽器代表souce map是可用的。github

//# 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..."
}
複製代碼

具體每一個屬性的說明：bash

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的狀況是如何：