为什么要用Source Map?

为什么要用Source Map?

目前主流的代码库和框架在上线之前，都需要经过压缩转换才能投入生产环境。

因为压缩后会减少文件的数量，从而减少http的请求次数，并且文件的体积也会大大减少。（eg : jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。）

什么是Source Map?

Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

sourceMap常用的配置项

• source-map

  会⽣成map格式的⽂件，⾥⾯包含映射关系的代码

• inline-source-map

  不会⽣成map格式的⽂件，包含映射关系的代码会放在打包后⽣成的代码中

• inline-cheap-source-map

  cheap有两种作⽤：⼀是将错误只定位到⾏，不定位到列。⼆是映射业务代码，不映射loader和
  第三⽅库等。 会提升打包构建的速度。

• inline-cheap-module-source-map

  module会映射loader和第三⽅库

• eval

  ⽤eval的⽅式⽣成映射关系代码，效率和性能最佳。但是当代码复杂时，提示信息可能不精确

其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。

+++ 非常快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢

devtools.png

• 推荐使⽤

  开发环境： devtool: 'cheap-module-eval-source-map'

  ⽣产环境： devtool: 'cheap-module-source-map'

---

图片来源webpack官网