了解javascript source Map（源映射）由于打包后的 js 文件都是经过压缩合并的，因此从浏览器的开发者

介绍

先来看看 Source Map（源映射）的作用，由于打包后的 js 文件都是经过压缩合并的，因此从浏览器的开发者工具查看源码，都是经过压缩解析后的代码，跟开发时你写的代码不一样，所以出错时很难定位到你的实际代码。而 Source Map 的作用用于将压缩后的 JavaScript 代码映射回原始源代码的文件。

作用

优点：若出现错误，可以在线上环境直接轻松定位到源代码，找到出问题的代码位置。
缺点：暴露了源码，打包后的文件由于添加了 Source Map 文件也会因此变大，也增加打包的时长。

我们再来看看 vue cli 的配置

module.exports = () => {
  return {
    ...
    productionSourceMap: true, // 是否开启SourceMap
    ...

    configureWebpack: {
       devtool: 'source-map' // 默认值
    }
 }
}

我们再来关注下 devtool，webpack 给我们提供了四种选项。

source-map
heap-module-source-map
eval-source-map
cheap-module-eval-source-map

这里我们重点展开 eval-source-map 和 source-map 来说

eval-source-map 这种模式会将 Source Map 作为 Data URL 嵌入到生成的 JavaScript 文件中，这样会增加文件的体积，但可以提高构建速度。在开发环境中通常使用这种模式，因为它可以提供更快的重新构建速度，同时仍然保留了对原始源代码的调试支持。
source-map 这种模式会生成独立的 Source Map 文件，并将其放置在输出目录中。这种模式会增加构建时间，但生成的 Source Map 文件相对较小，并且不会影响生成的 JavaScript 文件的体积。在生产环境中通常使用这种模式，因为它可以提供更好的调试支持，并且不会增加文件的体积。

因此当我们在正式环境时确实需要用到Source Map时，source-map模式是最好的选择，这里补充一下，由于这种模式会单独生成的Source Map 文件，因此是不会影响首屏加载的，只会影响到构建的包大小及时长，而什么时候会加载呢，就是当我们打开开发者工具(F12)时，浏览器才会去加载。

相反如果用到的是eval-source-map模式，由于它是嵌入到源js文件代码的，所以会影响到bundlejs的文件大小，可能会导致首屏加载的js文件变大而导致首屏加载时长变长，因此谨慎使用。

总结

Source Map（源映射）会影响构建时长及增加包的大小，也可能会暴露源码，但它能方便我们开发者调试的时候更直观发现错误代码的出处。该不该使用，我们权衡一下利弊即可。