一.概念

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" 选项来设置是否须要加载源映射

图1.png
注意: 源映射自己并不会影响代码的执行，只会在定位错误位置时被使用

二.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文件

图3png.png

.map文件作用 : 项目打包之后，代码是经过压缩加密的，如果运行报错是不知道哪里报错的.map文件就是就像未加密的文件，可以准确知道哪一行哪一列报错
.map文件大小 build之后占用体积最大的是.map文件, 由于这个问题可以通过 productionSourceMap配置很好解决这个问题,如:正式上线的项目不使用soucre map,在测试或者还需要调试的项目可以使用soucre map，

2.线上环境

配置后(productionSourceMap:true)

图5.png

未配置(productionSourceMap:false)

图4.png

3.本地调试

图9.png

配置后

图6.png
图7.png

未配置

图8.png

三.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