浅谈webpack devtool里的7种SourceMap模式

原创 黎云锐 随笔 前端 1114阅读 2019-01-17 21:55:09 举报

这篇文章主要介绍了浅谈webpack devtool里的7种SourceMap模式,主要介绍了这7种模式的使用和打包编译后的结果的不同,非常具有实用价值,有兴趣的可以了解一下
我们先来看看文档对这 7 种模式的解释:

注1:

webpack不仅支持这 7 种,而且它们还是可以任意组合上面的eval、inline、hidden关键字,就如文档所说,你可以设置 souremap 选项为 cheap-module-inline-source-map。

注2:

如果你的modules里面已经包含了SourceMaps,你需要用source-map-loader来和合并生成一个新的 SourceMaps。

使用结果有何不同

下面我们将列出这 7 种模式打包编译后的结果,从中看看他们的异同:

eval

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

Each module is executed withevaland//@ sourceURL.

source-map

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

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

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

hidden-source-map

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

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

inline-source-map

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

eval-source-map

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

cheap-module-source-map

在 cheap-module-source-map 下 sourceMap 的内容更少了,sourceMap的列信息减少了,可以看到sourcesContent也没有了。

这么多模式用哪个好?

开发环境推荐:

cheap-module-eval-source-map

生产环境推荐:

cheap-module-source-map

这也是下版本 webpack 使用 -d 命令启动 debug 模式时的默认选项

原因如下:

使用 cheap 模式可以大幅提高souremap 生成的效率。大部分情况我们调试并不关心列信息,而且就算 sourcemap 没有列,有些浏览器引擎(例如 v8) 也会给出列信息。
使用 eval 方式可大幅提高持续构建效率。官方文档提供的速度对比表格可以看到 eval 模式的编译速度很快。
使用 module 可支持babel这种预编译工具(在 webpack 里做为 loader 使用)。
使用 eval-source-map 模式可以减少网络请求。这种模式开启 DataUrl 本身包含完整 sourcemap 信息,并不需要像 sourceURL 那样,浏览器需要发送一个完整请求去获取 sourcemap 文件,这会略微提高点效率。而生产环境中则不宜用 eval,这样会让文件变得极大。
SourceMap模式效率对比图

为了学习工作与休闲娱乐互不冲突,现新建圈【码农茶水铺】用于程序员生活,爱好,交友,求职招聘,吐槽等话题交流,希望各位大神工作之余到茶水铺来喝茶聊天。群号:582735936
了解更多

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复