[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”或扫描下面的二维码