淺談webpack devtool里的7種SourceMap模式

更新時間：2019年01月14日 11:35:28 作者：起舞弄清影

這篇文章主要介紹了淺談webpack devtool里的7種SourceMap模式，主要介紹了這7種模式的使用和打包編譯后的結(jié)果的不同，非常具有實用價值，有興趣的可以了解一下

我們先來看看文檔對這 7 種模式的解釋：

模式	解釋
eval	每個module會封裝到 eval 里包裹起來執(zhí)行，并且會在末尾追加注釋 //@ sourceURL.
source-map	生成一個SourceMap文件.
hidden-source-map	和 source-map 一樣，但不會在 bundle 末尾追加注釋.
inline-source-map	生成一個 DataUrl 形式的 SourceMap 文件.
eval-source-map	每個module會通過eval()來執(zhí)行，并且生成一個DataUrl形式的SourceMap.
cheap-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，同時 loader 的 sourcemap 也被簡化為只包含對應(yīng)行的。

注1：

webpack不僅支持這 7 種，而且它們還是可以任意組合上面的eval、inline、hidden關(guān)鍵字，就如文檔所說，你可以設(shè)置 souremap 選項為 cheap-module-inline-source-map。

注2：

如果你的modules里面已經(jīng)包含了SourceMaps，你需要用source-map-loader來和合并生成一個新的 SourceMaps。

使用結(jié)果有何不同

下面我們將列出這 7 種模式打包編譯后的結(jié)果，從中看看他們的異同：

eval

webpackJsonp([1],[ 
function(module,exports,__webpack_require__){  
eval(
   ...   
//# sourceURL=webpack:///./src/js/index.js?'
  )
 }, 
function(module,exports,__webpack_require__){  
eval(
   ...   
//# sourceURL=webpack:///./src/static/css/app.less?./~/.npminstall/css-loader/0.23.1/css-loader!./~/.npminstall/postcss-loader/1.1.1/postcss-loader!./~/.npminstall/less-loader/2.2.3/less-loader'
  )
 }, 
function(module,exports,__webpack_require__){  
 eval(
   ...   
 //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"
  )
 },
...])

eval 模式會把每個 module 封裝到eval 里包裹起來執(zhí)行，并且會在末尾追加注釋。

Each module is executed withevaland//@ sourceURL.

source-map

webpackJsonp([1],[ 
function(e,t,i){...}, 
function(e,t,i){...}, 
function(e,t,i){...}, 
function(e,t,i){...},
 ...
])//# sourceMappingURL=index.js.map

與此同時，你會發(fā)現(xiàn)你的 output 目錄下多了一個index.js.map文件。

我們可以把這個 index.js.map 格式化一下，方便我們在下文的觀察比較：

{ 
"version":3, 
"sources":[
  "webpack:///js/index.js","webpack:///./src/js/index.js",  
  "webpack:///./~/.npminstall/css-loader/0.23.1/css-loader/lib/css-base.js",
  ...
], 
"names":["webpackJsonp","module","exports"...], 
"mappings":"AAAAA,cAAc,IAER,SAASC...", 
"file":"js/index.js", 
"sourcesContent":[...], 
"sourceRoot":""
}

關(guān)于 sourceMap 行列信息如何映射源代碼的詳解，此處不是我們要重點討論的話題，從略。

hidden-source-map

webpackJsonp([1],[ 
function(e,t,i){...}, 
function(e,t,i){...}, 
function(e,t,i){...}, 
function(e,t,i){...},
 ...
])

與 source-map 相比少了末尾注釋，

但 output 目錄下的 index.js.map 沒有少

inline-source-map

webpackJsonp([1],[ 
function(e,t,i){...}, 
function(e,t,i){...}, 
function(e,t,i){...}, 
function(e,t,i){...},
 ...
])
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9...

可以看到末尾的注釋 sourceMap 作為DataURL的形式被內(nèi)嵌進了 bundle中，由于 sourceMap 的所有信息都被加到了bundle中，整個 bundle 文件變得碩大無比。

eval-source-map

webpackJsonp([1],[ 
function(module,exports,__webpack_require__){  
eval(
   ...   
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...
  )
 }, function(module,exports,__webpack_require__){  
eval(
   ...   
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...
  )
 }, 
 function(module,exports,__webpack_require__){  
eval(
   ...   
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...
  )
 },
 ...
]);

和 eval 類似，但是把注釋里的sourceMap 都轉(zhuǎn)為了 DataURL。

cheap-source-map

和 source-map 生成結(jié)果差不多。output 目錄下的index.js內(nèi)容一樣。

但是 cheap-source-map 生成的 index.js.map 的內(nèi)容卻比 source-map 生成的 index.js.map 要少很多代碼，我們對比一下上文 source-map 生成的 index.js.map 的結(jié)果，發(fā)現(xiàn)source屬性里面少了列信息，只剩一個"webpack:///js/index.js"。

// index.js.map
{ 
"version":3, "file":"js/index.js", 
"sources":["webpack:///js/index.js"], 
"sourcesContent":[...], 
"mappings":"AAAA", 
"sourceRoot":""
}

cheap-module-source-map

// index.js.map
{ 
"version":3, "file":"js/index.js", 
"sources":["webpack:///js/index.js"], 
"mappings":"AAAA", "sourceRoot":""
}

在 cheap-module-source-map 下 sourceMap 的內(nèi)容更少了，sourceMap的列信息減少了，可以看到sourcesContent也沒有了。

這么多模式用哪個好？

開發(fā)環(huán)境推薦：

cheap-module-eval-source-map

生產(chǎn)環(huán)境推薦：

cheap-module-source-map

這也是下版本 webpack 使用 -d 命令啟動 debug 模式時的默認(rèn)選項

原因如下：

使用 cheap 模式可以大幅提高souremap 生成的效率。大部分情況我們調(diào)試并不關(guān)心列信息，而且就算 sourcemap 沒有列，有些瀏覽器引擎（例如 v8）也會給出列信息。
使用 eval 方式可大幅提高持續(xù)構(gòu)建效率。官方文檔提供的速度對比表格可以看到 eval 模式的編譯速度很快。
使用 module 可支持babel這種預(yù)編譯工具（在 webpack 里做為 loader 使用）。
使用 eval-source-map 模式可以減少網(wǎng)絡(luò)請求。這種模式開啟 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那樣，瀏覽器需要發(fā)送一個完整請求去獲取 sourcemap 文件，這會略微提高點效率。而生產(chǎn)環(huán)境中則不宜用 eval，這樣會讓文件變得極大。

SourceMap模式效率對比圖