浅谈webpack devtool里的7种SourceMap模式


Posted in Javascript onJanuary 14, 2019

我们先来看看文档对这 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 withevaland//@ 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 行列信息如何映射源代码的详解,此处不是我们要重点讨论的话题,从略

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 devtool里的7种SourceMap模式

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

Javascript 相关文章推荐
JavaScript 继承详解(二)
Jul 13 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 #Javascript
用npm-run实现自动化任务的方法示例
Jan 14 #Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 #Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 #Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 #Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 #Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 #Javascript
You might like
使用php判断网页是否gzip压缩
2013/06/25 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
2014/05/12 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python实现统计单词出现的个数
2015/05/28 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
法律进企业活动方案
2014/03/04 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
辞旧迎新演讲稿
2014/09/15 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
居安思危观后感
2015/06/11 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
Java实现学生管理系统(IO版)
2022/02/24 Java/Android