source map是什么？生产环境怎么用？

[TieMuZhen]

source map是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性，想要调试源码就需要soucre map。

map文件只要不打开开发者工具，浏览器是不会加载的。

线上环境（生产环境）一般有三种处理方案：

• hidden-source-map：借助第三方错误监控平台 Sentry 使用
• nosources-source-map：只会显示具体行数以及查看源代码的错误栈。安全性比sourcemap高
• sourcemap：通过nginx设置将.map文件只对白名单开放(公司内网)

注意：

避免在生产环境（线上环境）中使用inline-和eval-

• inline-

inline-是将SourceMap内联到原始文件中，而不是创建一个单独的文件。

devtool为source-map的情况下打包后，有一个.map文件存储代码的映射关系：

devtool为inline-source-map的情况下，映射关系会一同写到编译后的代码中：

对比可知inline-会增加bundle体积大小，并降低整体性能

• eval-

eval- 会通过eval包裹每个模块打包后代码以及对应生成的SourceMap，因为eval中为字符串形式，所以当源码变动的时候进行字符串处理会提升rebuild的速度。
但同样因为是eval包裹js代码，很容易被XSS攻击，存在很大的安全隐患。所以，eval我们一般只用于开发环境，不会用于打包线上环境的代码。

参考文献

• 「吐血整理」再来一打Webpack面试题
• 一文搞懂SourceMap以及webpack devtool