前端：Source Map 那些事
1. Source Map 是什么？有什么用？
为了提高 WEB 应用首屏响应速度，最容易想到方法的就是：
- 降低请求数量：JS、CSS文件合并；
- 降低请求资源大小：JS、CSS文件压缩；
但是，这给线上环境的调试带来了麻烦。
图：没有 source map 的线上环境
Source Map，就是能让我们在线上调试时看到原始代码的一种技术，它实际是一个是个映射文件，它提供了【压缩合并后代码】到【原始代码】间的行列转换关系。
图：有 source map 的线上环境
图：修正错误后...
2. Source Map 怎么生成？
能生成 Source Map 的工具有很多
列举几个常用的
2.1. uglify-js
仓库： https://github.com/mishoo/UglifyJS2 安装： npm install uglify-js -g 示例： uglifyjs reducer.js --compress --mangle --output reducer.min.js --source-map "url='reducer.min.js.map'"
图：uglify 使用示例
2.2. babel
官网： https://babeljs.io/ 示例： npx babel src --out-dir lib --source-maps
图：babel 使用示例
2.3. webpack
官网： https://webpack.js.org/
图：webpack 使用示例
3. Source Map 表现形式
3.1. 外部独立 SourceMap
ES6源码：
Babel编译转换后：
npx babel square.js --out-file square.min.js --source-maps
外部SourceMap文件：
图：文件目录结构
3.2. 内联 SourceMap
ES6源码：
Babel编译转换后：
npx babel square.js --out-file square.min.js --source-maps inline
图：文件目录结构
4. Source Map 文件结构分析
以 square.js
编译生成的 square.js.map 为例
下面重点关注 mappings 字段
- 01. 编译后的“行”，由 “;” 分割；
;;;;;;;AAAA,IAAM,MAAM,GAAG,SAAT,MAAS,CAAC,CAAD;AAAA,SAAO,CAAC,GAAG,CAAX;AAAA,CAAf;;eAEe,M
- 02. “行”内用“,”分割为“段”，每个段由1位、4位或5位 【base64 VLQ】 字符组成；
;;;;;;;AAAA,IAAM,MAAM,GAAG,SAAT,MAAS,CAAC,CAAD;AAAA,SAAO,CAAC,GAAG,CAAX;AAAA,CAAf;;eAEe,M
- 03. “段”内各【base64 VLQ】编码位含义如下：
——摘抄自 Source Map 第三版规范
参考：
《An Introduction to Source Maps》： https://blog.teamtreehouse.com/introduction-source-maps https://demos.mattwest.io/source-maps/ 《Source Maps 101》： https://code.tutsplus.com/tutorials/source-maps-101--net-29173 Source Map 资料汇总： https://github.com/ryanseddon/source-map Source Map 可视化工具： https://github.com/pvdz/sourcemapper https://sokra.github.io/source-map-visualization/ Source Map 规范： https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.hval2vfopveu Source Map 原理： http://www.mattzeunert.com/2016/02/14/how-do-source-maps-work.html webpack 的 Source Map： https://survivejs.com/webpack/building/source-maps/ https://www.webpackjs.com/configuration/devtool/
