浅谈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 添加和移除函数的通用方法
Oct 20 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
jQuery电话号码验证实例
Jan 05 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
javascript浅层克隆、深度克隆对比及实例解析
Feb 09 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 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广告加载类用法实例
2014/09/23 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python正则表达式完全指南
2017/05/25 Python
python实现简单名片管理系统
2018/11/30 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
合伙协议书
2014/04/23 职场文书
高中学生评语大全
2014/04/25 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
2015年副班长工作总结
2015/05/15 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
golang的文件创建及读写操作
2022/04/14 Golang