最近在项目中经过各种对比webpack打包后的结果,还是决定暂时采用在生产环境使用带有orignal source code的sourcemap这样便于线上环境出错的时候调试
但是可能很多人都会有一些担心会不会影响页面性能之类的问题,所以深入研究了一下sourcemap 来澄清一下相关问题
- 什么是sourcemap
“A source map provides a way of mapping code within a compressed file back to it’s original position in a source file” - 怎么enable source map在不同的浏览器中?
大家可以参考这篇github的文章,我就不直接翻译过来的https://gist.github.com/jakebellacera/336c4982194bcb02ef8a - sourcemap是否会影响页面加载的性能?
https://indepth.dev/posts/1230/source-maps-from-top-to-bottom 这篇文章还是写的比较好,给我一些启发,所以推荐大家阅读一下- Chrome will only download a source map if DevTools is open (as they can be huge in size)
- Source maps will not appear as a network request (inside the network tab)
- Once you have your source map you can add breakpoints inside the “source” code (found under sources tab).