08_webpack_source-map

认识source-map

我们的代码通常运行在浏览器上时，是通过打包压缩的

• 在浏览器上跑的代码和我们编写的源代码是不一样的
• 比如ES6的代码可能被转换为ES5
• 比如代码可能进行丑化压缩，会将编码名称等修改
• 比如TS等方式的编码被转换为JS

那么当我们代码如果报错了，调式转化后的代码的时候会很麻烦

那么如何可以调试这种转化后不一致的代码呢？答案就是source-map

• source-map是从已转换的代码，映射到原始的源文件
• 使浏览器可以重构原始源，并在调试器中显示重建的原始源

已转换的代码+source-map 转换成源文件

 

 　　浏览器既会还原我们的源代码也会还原属于webpack的源代码

如何使用source-map

两个步骤

一：根据源文件，生成source-map文件，webpack在打包时，可以通过配置生成source-map
　　devtool:'source-map'

二：在转换后的代码，最后添加一个注释，这个注释指向source-map文件
　　浏览器会读取这个注释，然后自动的下载下来

浏览器会根据我们的注释，查找相应的source-map，并且根据source-map还原我们的代码，方便进行调试

 

分析source-map

最初source-map生成的文件是原始文件的10倍，第二版本减少了约50%,第三版本又减少了50%；所以目前是一个133kb，最终的source-map的大小大概在300kb

source-map文件长什么样子

• version:当前使用的版本
• source:从哪些文件转换过来的source-map和打包的代码(最初始的文件)
• names:转换前的变量和属性名称(development模式不保留转换前的名称)
• mappings:source-map用来和源文件映射的信息(比如位置等)，一串base64VLQ(variable-length-quantity可变长度值)编码
• file:打包后的文件(浏览器加载的文件)
• sourceContent：转换前的具体代码信息(和source是对应的关系)
• sourceRoot:所有的source相对的根目录

 

生成source-map

如何在使用webpack打包的时候，生成对应的source-amp呢?

• 　　webpack为我们提供了非常多的选项(目前是26个)，来处理source-map
• 　　Devtool | webpack 中文文档 (docschina.org)
• 　　选择不同值，生成的source-map会守卫有差异，打包的过程也会有性能的差异，可以根据不同的情况进行选择

下面几个值不会生成source-map

• none：生产环境下默认值，不生成source-map，这是一个缺省值(什么值都不写)，就是不设置devtool这个属性
• fasel：不使用source-map
• eval：development的默认值，在eval函数的后面会有//# sourceURL指向源地址,让浏览器执行的代码转回固定的文件中
• source-map：生成一个独立的source-map文件，并且在bundle文件中有一个注释，指向source-map文件；
  bundle文件中有如下注释：//# sourceMappingURL=bundle.js.map
  开发者工具会根据这个注释找到source-map文件，下载并且解析；
• eval-source-map：会生成sourcemap，但是source-map是以DataUrl(base64)添加到eval函数的后面
• inline-source-map：所有的sourcemap依然是按照base64进行编码，放在当前文件的最后
• cheap-source-map：会生成sourcemap,但是会更加高效一些(cheap低开销)，因为它没有生成列映射
  代表，它报错只会提示是哪一行，不会提示哪一列
• cheap-module-source-map：会生成sourcemap,类似于cheap-source-map,但是对源自loader的sourcemap处理会更好
  具体的意思就是我使用了babel转换后的代码会变成es5语法，你可以使用cheap-source-map，但是转换回源代码的时候里面的变量名等会发生改变

   

   但是如果你使用了cheap-module-source-map就会对loader等转换过后的文件的处理会更好
  

   

   

   

• hidden-souce-map：就相当于source-map,把生成的source-map最后的那一行注释给你删除掉了，//# sourceMappingURL=bundle.js.map，然后再调试的时候也不会还原称源文件，但是你在source-map文件的最后一行手动的指定sourceMappingURL还是可以进行还原的，这个选项一般用处不大
• nosources-source-map：会生成sourcemap,但是生成的sourcemap只有报错信息的提示，不会生成源文件代码

多个值的组合

实际上，webpack提供给我们26个值，是可以进行多组合的。

组合的规则如下：
　　inline-|hidden-|eval：三个值时三选一

　　nosources:可选值；

　　cheap可选值，并且可以跟随module的值；

　　[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map.

 

那么在开发中，最佳的实践是什么呢？

开发阶段:
　　vue:source-map
　　react:cheap-module-source-map

测试阶段：推荐使用source-map或者cheap-module-source-map

发布阶段：false、缺省值(不写)