webpack——devtool里的7種SourceMap模式

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

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

注1：

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

注2：

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

使用結果有何不同

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

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 里包裹起來執行，並且會在末尾追加注釋。

Each module is executed with eval and //@ 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

與此同時，你會發現你的 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":""
}

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

感興趣的同學可以參考阮一峰老師的科普文：JavaScript Source Map 詳解

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 的形式被內嵌進了 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 都轉為了 DataURL。

cheap-source-map

和 source-map 生成結果差不多。output 目錄下的index.js內容一樣。

但是 cheap-source-map 生成的 index.js.map 的內容卻比 source-map 生成的 index.js.map 要少很多代碼，我們對比一下上文 source-map 生成的 index.js.map 的結果，發現 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 的內容更少了，sourceMap的列信息減少了，可以看到 sourcesContent 也沒有了。

這么多模式用哪個好？

開發環境推薦：

cheap-module-eval-source-map

生產環境推薦：

cheap-module-source-map

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

原因如下：

1. 使用 cheap 模式可以大幅提高 souremap 生成的效率。大部分情況我們調試並不關心列信息，而且就算 sourcemap 沒有列，有些瀏覽器引擎（例如 v8） 也會給出列信息。

2. 使用 eval 方式可大幅提高持續構建效率。官方文檔提供的速度對比表格可以看到 eval 模式的編譯速度很快。

3. 使用 module 可支持 babel 這種預編譯工具（在 webpack 里做為 loader 使用）。

4. 使用 eval-source-map 模式可以減少網絡請求。這種模式開啟 DataUrl 本身包含完整 sourcemap 信息，並不需要像 sourceURL 那樣，瀏覽器需要發送一個完整請求去獲取 sourcemap 文件，這會略微提高點效率。而生產環境中則不宜用 eval，這樣會讓文件變得極大。

SourceMap模式效率對比圖