经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » webpack » 查看文章
浅谈webpack devtool里的7种SourceMap模式
来源:jb51  时间:2019/1/15 9:17:16  对本文有异议

我们先来看看文档对这 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

  1. webpackJsonp([1],[
  2. function(module,exports,__webpack_require__){
  3. eval(
  4. ...
  5. //# sourceURL=webpack:///./src/js/index.js?'
  6. )
  7. },
  8. function(module,exports,__webpack_require__){
  9. eval(
  10. ...
  11. //# 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'
  12. )
  13. },
  14. function(module,exports,__webpack_require__){
  15. eval(
  16. ...
  17. //# sourceURL=webpack:///./src/tmpl/appTemplate.tpl?"
  18. )
  19. },
  20. ...])

eval 模式会把每个 module 封装到eval 里包裹起来执行,并且会在末尾追加注释。

Each module is executed withevaland//@ sourceURL.

source-map

  1. webpackJsonp([1],[
  2. function(e,t,i){...},
  3. function(e,t,i){...},
  4. function(e,t,i){...},
  5. function(e,t,i){...},
  6. ...
  7. ])//# sourceMappingURL=index.js.map

与此同时,你会发现你的 output 目录下多了一个index.js.map文件。

我们可以把这个 index.js.map 格式化一下,方便我们在下文的观察比较:

  1. {
  2. "version":3,
  3. "sources":[
  4. "webpack:///js/index.js","webpack:///./src/js/index.js",
  5. "webpack:///./~/.npminstall/css-loader/0.23.1/css-loader/lib/css-base.js",
  6. ...
  7. ],
  8. "names":["webpackJsonp","module","exports"...],
  9. "mappings":"AAAAA,cAAc,IAER,SAASC...",
  10. "file":"js/index.js",
  11. "sourcesContent":[...],
  12. "sourceRoot":""
  13. }

关于 sourceMap 行列信息如何映射源代码的详解,此处不是我们要重点讨论的话题,从略

hidden-source-map

  1. webpackJsonp([1],[
  2. function(e,t,i){...},
  3. function(e,t,i){...},
  4. function(e,t,i){...},
  5. function(e,t,i){...},
  6. ...
  7. ])

与 source-map 相比少了末尾注释,

但 output 目录下的 index.js.map 没有少

inline-source-map

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

可以看到末尾的注释 sourceMap 作为DataURL的形式被内嵌进了 bundle中,由于 sourceMap 的所有信息都被加到了bundle中,整个 bundle 文件变得硕大无比。

eval-source-map

  1. webpackJsonp([1],[
  2. function(module,exports,__webpack_require__){
  3. eval(
  4. ...
  5. //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
  6. )
  7. }, function(module,exports,__webpack_require__){
  8. eval(
  9. ...
  10. //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
  11. )
  12. },
  13. function(module,exports,__webpack_require__){
  14. eval(
  15. ...
  16. //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
  17. )
  18. },
  19. ...
  20. ]);

和 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"

  1. // index.js.map
  2. {
  3. "version":3, "file":"js/index.js",
  4. "sources":["webpack:///js/index.js"],
  5. "sourcesContent":[...],
  6. "mappings":"AAAA",
  7. "sourceRoot":""
  8. }

cheap-module-source-map

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

在 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模式效率对比图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号