2-15webpack中sourcemap是什么?⽣产环境怎么⽤?
source map指的是将编译、打包、压缩后的代码映射回源代码的过程
经过webpack打包压缩后的代码基本上已经不具备可读性,此时若是代码抛出错误,想要回溯他的调⽤栈是⾮常困难的,⽽有了source map,加上浏览器调试⼯具(dev tools),要做到这⼀点就会变得很容易,同时对于线上问题的追查也有⼀定帮助。
原理:webpack对于⼯程源代码的每⼀步处理都有可能会改变代码的位置、结构、甚⾄是所处⽂件,因此每⼀步都需要⽣成对应的source map。
sourceMap就是⼀个信息⽂件,⾥⾯储存着打包前的位置信息。也就是说,转换后的代码的每⼀个位置,所对应的转换前的位置。具体如何编码。
如果我们启⽤了devtool配置,那么source map就会跟随源代码⼀步步被传递,直到⽣产最后的map⽂件,这个⽂件默认就是打包后的⽂件名字加上后缀.map,例如:bundle.js.map.
eval是做什么的
在⽣成map⽂件的同时,bundle⽂件中会追加⼀句注释来标识map⽂件的位置,例如:
// bundle.js
(function() {
// bundle的内容
...
})()
// # sourceMappingURL = bundle.js.map
map⽂件只要不打开开发者⼯具,浏览器是不会加载的
线上环境⼀般有三种处理⽅案
hidden-source-map:借助第三⽅错误监控平台Sentry使⽤
nosources-source-map:只会显⽰具体⾏数以及查看源代码的错误栈。安全性⽐source map⾼
source:通过nginx设置将.map⽂件只对⽩名单开放(公司内⽹)
注意的是:避免在⽣产中使⽤ inline- 和 eval- ,因为它们会增加bundle体积⼤⼩,并降低整体性能。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。