webpack优化 - source-map

2020-04-27 本文已影响0人古月丶

source-map是一个信息文件，存储了转换后每一个代码的位置，在报错信息中心会显示代码报错信息在原始代码中的位置，便于问题定位，提升调试效率。

source-map文件内容：

{
    "version":3,  //版本信息
    "sources":["webpack:///webpack/bootstrap fc177c61f21ce7e0532a"], //转换前的文件
    "names":["parentJsonpFunction","window","chunkIds","moreModules",...], //转换后的所有变量名和属性名
    "mappings":"aACA,IAAAA,EAAAC,OAAA,aACAA,OAAA,sBAAAC,EAAAC,EAAAC,...", //记录转换前的代码位置信息
    "file":"static/js/manifest.fbd5a3eebc2aaba3cfff.js", //转换后的文件信息
    "sourcesContent":[" \t// install a JSONP callback for chunk loadi..."], //转换前的文件内容
    "sourceRoot":"" //转换前文件目录，如果转换前后目录一样则为空
}

mappings

‘，’：对应转化的一个内容。
‘；’：对象装转化前的一行内容。

mappings 每一个内容都是 “XXXXX” 五位字段组成。

第一位：对应转换后代码的第几列；
第二位：对应sources属性中的哪个文件；
第三位：对应转换前代码的第几行；
第四位：对应转换前代码的第几列；
第五位：对应names属性中的哪个属性（可省略，并不是每个）；

关键字	说明
eval	使用eval包裹模块代码
source-map	产生`.map`文件
cheap	忽略源代码的列信息，也不包含`loader`的sourceMap
module	包含`loader`的sourceMap
inline	不生成`.map`文件，将sourceMap内嵌到js文件中

开发环境：使用内联->更快 cheap-module-eval-source-map
生产环境：使用外联->减小js文件体积 cheap-module-source-map

webpack优化 - source-map

猜你喜欢

热点阅读