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

感兴趣的同学可以参考阮一峰老师的科普文: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——devtool里的7种SourceMap模式的更多相关文章

  1. [webpack] devtool里的7种SourceMap[转]

    modle: development cheap-source-map debug 不太方便,不是以原来的文件的形式cheap-module-source-map 可以 debugcheap-modu ...

  2. webpack 安装vue(两种代码模式compiler 和runtime)

    使用webpack安装vue,import之后,运营项目报错,如下: [Vue warn]: You are using the runtime-only build of Vue where the ...

  3. java web学习总结(二十九) -------------------JavaBean的两种开发模式

    SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...

  4. 十五天精通WCF——第六天 你必须要了解的3种通信模式

    wcf已经说到第六天了,居然还没有说到这玩意有几种通信模式,惭愧惭愧,不过很简单啦,单向,请求-响应,双工模式,其中的第二种“请求-响应“ 模式,这个大家不用动脑子都清楚,这一篇我大概来分析下. 一: ...

  5. 【转】虚拟机VMware3种网络模式(桥接、nat、Host-only)的工作原理

     VMware网络配置详解一:三种网络模式简介 安装好虚拟机以后,在网络连接里面可以看到多了两块网卡: 其 中VMnet1是虚拟机Host-only模式的网络接口,VMnet8是NAT模式的网络接口, ...

  6. 深度分析Linux下双网卡绑定七种模式 多网卡的7种bond模式原理

    http://blog.csdn.net/abc_ii/article/details/9991845多网卡的7种bond模式原理 Linux网卡绑定mode共有七种(~) bond0.bond1.b ...

  7. Android中Activity的四种启动模式

    要了解Android的启动模式先要了解一下Activity的管理方式: 1.Activity的管理机制 Android的管理主要是通过Activity栈来进行的.当一个Activity启动时,系统根据 ...

  8. Spark on YARN两种运行模式介绍

    本文出自:Spark on YARN两种运行模式介绍http://www.aboutyun.com/thread-12294-1-1.html(出处: about云开发)   问题导读 1.Spark ...

  9. 后勤模块数据源的增量队列(Delta-Queue)三种更新模式(Update Mode)

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

随机推荐

  1. vue非父子组件间通信

    有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...

  2. 整个IT界可分为13块大领域

    IT界可以划分为13个领域 Location: NanJing

  3. 转:【Java并发编程】之十五:并发编程中实现内存可见的两种方法比较:加锁和volatile变量

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17290021 在http://blog.csdn.net/ns_code/article/ ...

  4. 第二次项目冲刺(Beta阶段)第一天

    a. 安排连续七天的敏捷冲刺. 2017.5.18完成冲刺计划安排 2017.5.20完善主页面 1st day(目前位置) 2017.5.21完善功能 2st day 2017.5.22添加自定义重 ...

  5. 201521123026《Java程序设计》第8周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 Q1.1.List中指定元素的删除(题目4-1) 1.1 实验总结 答: 1.通过equals ...

  6. 201521123122 《java程序设计》第九周学习总结

    201521123122 <java程序设计>第九周实验总结 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 常用异常 题目5-1 1.1 截图 ...

  7. Markdown编辑后

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  8. bom是什么?

  9. Mysql中的like模糊查询

    MySql的like语句中的通配符:百分号.下划线和escape %代表任意多个字符 _代表一个字符 escape,转义字符后面的%或_,使其不作为通配符,而是普通字符匹配   数据库数据如下: 1. ...

  10. overflow使用說明

    必須設置的CSS屬性: { display:block; //或者inline-block,text-overflow:ellipsis只對block或者inline-block有效 white-sp ...