SourceMap 到底要不要打包到线上代码中?

SourceMap 到底要不要打包到线上代码中?

一般 web 项目开发中,会有几个环境:
开发环境
测试环境
预发布环境
生产环境

测试环境的时候,bug较多,有时候要排查问题,产出 sourcemap 可能是有帮助的。(查看问题的时候,方便在浏览器上看到源码。)
生产环境,代码是面向大众的,但是会遇到一个安全问题
你的注释可能含有用户名、密码、测试数据、敏感信息的注释等等。(更奇葩的是,你最好不要遇到虾米音乐的穷逼VIP的事情,哈哈哈)
面对这样的问题,我的个人选择是:禁止输出 SourceMap ,规避安全问题、信息泄露问题。

webpack 构建工具中,sourcemap 有 inline 内联到 js 中的方式,不要用这种,用外链的方式加载 SourceMap 更好。
webpack 通过配置 devtool 来控制 SourceMap ,
开发中,推荐使用:
devtool: 'source-map'
// eval 代码定位不如 source-map 精准
// cheap-module-eval-source-map 这个会导致调试中源码定位不准,source-map能解决此问题
// devtool: 'cheap-module-eval-source-map',
生产环境的时候,建议关闭 SourceMap 输出。


sourcemap 会影响产出的 dist 文件夹体积增大很多,这时候,写个统计,排除掉 sourcemap ,console.log 出其他文件的大小就好了。
后来发现,其实不需要:
webpack 通过 --report 参数,是可以输出详细的统计的。
他的统计能看到各个模块的文件大小、gzip大小,看到这些,你就能清晰的知道,页面体积优化,你能优化哪些地方。
强烈建议看看 --report 统计。


比如 vue-cli 构建的项目,打包构建的时候,这样查看详细报告了:
npm run build --report