一.概念
1.什么是源映射
为了提高性能，很多站点都会先压缩 JavaScript 代码然后上线，但如果代码运行时出现错误，浏览器只会显示在已压缩的代码中的位置，很难确定真正的源码错误位置。
这时源映射(Source Map)就登场了。
源映射(Source Map)是一种数据格式，它存储了源代码和生成代码之间的位置映射关系。
源映射一般使用 .map 扩展名，源映射本质是一个 JSON 文本文档，其 MIME 类型也一般设为 application/json。
个人理解: 源映射(Source Map) 一种提供源代码到构建后代码映射 技术（如果构建后代码出错了，通过映射可以追踪源代码错误）
2.为什么要关心源映射
从源码转换来讲: JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。
常见的源码转换，主要是以下三种情况：
（1）压缩，减小体积 比如vue项目打包。
（2）多个文件合并，减少HTTP请求数。
（3）其他语言编译成JavaScript。最常见的例子就是CoffeeScript。
目前源映射仅在 未压缩/组合的 JavaScript 到 压缩/未组合的 JavaScript 之间起作用，但未来看起来很光明，因为谈到了诸如 CoffeeScript之类的编译为 JavaScript 的语言，甚至有可能添加对 CSS 预处理器（如 SASS 或 LESS）的支持.
CoffeeScript:一种JavaScript的开源工具，常用在Ruby On Rails项目中它的原理是写CoffeeScript脚本，然后CoffeeScript会把CoffeeScript转换成JavaScript脚本供你的网站使用
Ruby On Rails:Ruby On Rails一种全栈框架
将来我们可以轻松地使用几乎任何语言，就好像它在带有源映射的浏览器中原生支持一样：
ECMAScript 6 及更高版本
SASS/LESS 等
几乎所有编译成 JavaScript 的语言
所以~~~~~掌握源映射(Source Map)必不可少
3.如何使用源映射
在 JavaScript 代码中添加注释：
//# sourceMappingURL=file.js.map
在 Chrome 开发面板(按F12打开)的设置(按F1打开)中，能够经过勾选 "Enable Source Maps" 选项来设置是否须要加载源映射
注意: 源映射自己并不会影响代码的执行，只会在定位错误位置时被使用
二.vue2项目中使用
本地环境 vue.config.js文件中
module.exports = {
configureWebpack: (config) => {
//调试JS
config.devtool = "source-map"
},
css: {
//查看CSS属于哪个css文件
sourceMap: true,
},
}
线上环境 vue.config.js文件中
module.exports = {
productionSourceMap: true, // 生产环境的 source map 设置上线后是否加载webpack文件
}
三.配置和未配置对比
1. .map文件
首先需要清楚在vue中打包 默认 会生成.map文件，这个文件就是source map的文件，可以配置打包不使用source map，但是不配置那么一定会生成.map文件
.map文件作用 : 项目打包之后，代码是经过压缩加密的，如果运行报错是不知道哪里报错的.map文件就是就像未加密的文件，可以准确知道哪一行哪一列报错
.map文件大小 build之后占用体积最大的是.map文件, 由于这个问题可以通过 productionSourceMap配置很好解决这个问题,如:正式上线的项目不使用soucre map,在测试或者还需要调试的项目可以使用soucre map，
2.线上环境
配置后(productionSourceMap:true)
未配置(productionSourceMap:false)
3.本地调试
配置后
未配置
三.webpack里Source map的几种模式
| 模式 | 解释 |
|---|---|
| eval | 每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释//@sourceURL. |
| source-map | 生成一个SourceMap文件. |
| hidden-source-map | 和 source-map 一样，但不会在 bundle 末尾追加注释. |
| inline-source-map | 生成一个 DataUrl 形式的 SourceMap 文件. |
| eval-source-map | 每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap. |
| cheap-source-map | 生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）. |
| cheap-module-source-map | 生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。. |
注1 :bundle通常是由多个不同的模块产生，它是已经加载完毕和被编译后的源代码的最终版本。
注2 :webpack不仅支持这 7 种，而且它们还是可以任意组合上面的eval、inline、hidden关键字，就如文档
注3 :如果你的modules里面已经包含了SourceMaps，你需要用source-map-loader 来和合并生成一个新的 SourceMaps。所以，你可以设置 souremap 选项为 cheap-module-inline-source-map。
详情看https://www.cnblogs.com/wangyingblog/p/7027540.html
四.source map的优化
1.devtool的全部值及介绍
[inline-|hidden-|eval-] [nosources] [cheap-[module-]]source-map
source-map:外部--->错误代码准确信息, 源代码的错误位置
inline-source-map:内嵌--->错误代码准确信息 和源代码的错误位置
hidden-source-map:外部--->错误代码错误原因, 但没有错误位置,不能追踪源代码错误(隐藏源代码)
eval-source-map:内嵌--->错误代码准确信息, 源代码的错误位置
nosources-source-map:外联--->错误代码准确信息,但是没有任何源代码信息(隐藏源代码)
cheap-source-map:外部--->错误代码准确信息 和 源代码的错误位置,只能精确行
cheap-module-source-map外部--->错误代码准确信息, 源代码的错误位置
2.内联 和 外部的区别: ①. 外部生成了文件 , 内联没有文件, ②. 内联构建速度快
3.这么多source-map如何选择？
开发环境: 速度快，调试更友好
速度快（ eval>inline>cheap>··· ）
组合: eval-cheap-source-map > eval-source-map
调试更友好
组合source-map > cheap-module-source-map > cheap-source-map
最终结果：eval-source-map(速度快)和 cheap-module-source-map(性能更好) (vuecli与react脚手架默认)
生产环境: 源代码要不要隐藏？调试要不要更友好
内嵌会让代码体积变大，所以在生产环境下不用 内嵌
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
4.最终结果：
source-map 和 cheap-module-source-map
5.一般选择:
开发环境: eval-source-map 或者 cheap-module-source-map
生产环境: source-map 或者 cheap-module-source-map: source-map 或者 cheap-module-source-map
[参考文献1]:阮一峰Source Map详解
[参考文献2]:Introduction To JavaScript Source Maps
