[webpack] devtool裏的7種SourceMap模式是什麼鬼？

做者：滴滴公共前端團隊 - 水乙

咱們在使用 webpack 打包咱們的工程模塊時，常常會須要 devtool 開啓 sourceMap 讓咱們能夠調試代碼，可是 webpack 文檔中關於 devtool 給出了7種模式，文檔也寫得很是簡略，初學者很難上手。本文將這7種模式的區別做詳細介紹，但願能對你使用有幫助。

概念有何不一樣

咱們先來看看文檔對這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 裏包裹起來執行，而且會在末尾追加註釋。

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 模式效率對比圖

更多參考：

webpack.github.io/docs/config…

segmentfault.com/a/119000000…

www.cnblogs.com/hhhyaaon/p/…

---

歡迎關注DDFE
GITHUB：github.com/DDFE
微信公衆號：微信搜索公衆號「DDFE」或掃描下面的二維碼