Webpack中SourceMap简介以及提升前端项目编译效率实践

说在前面

近日团队成员反馈前端项目修订部分内容后需要build很久，内存占用很大。我启动项目后查看确实存在这个问题（解决方案在文末）。之前了解过相关的内容，前端的代码想要在生产环境运行，肯定需要进行编译之类的操作，这时就很难调试了，因为只能看到构建后代码中错误的位置，无法定位到源代码对应的位置。这个时候就需要一个Map来映射构建后的代码和源代码之间的关系。

SourceMap

SourceMap是一个信息文件，里面存储着位置信息，有了他，出错的时候控制台就能直接显示原始代码，而不是转换后的代码。JQuery在2013年的1.9版本中首次支持该特性，压缩后的JQuery从252KB缩小为32KB，这有助于让它更加轻量化。

Webpack中的Source Map

webpack中需要配置的属性是 devtool，这个模式可以选择的模式有很多种，由于操作的粒度不同，每种模式对于代码生成的速度和效果都不一致，我们需要根据项目的实际情况来选择需要的模式。

下面简单介绍几种模式的关键词，所有的模式基本上是以下关键词的组合：

eval: 使用eval包裹模块儿代码,并且会追加注释 // @ sourceURL
source-map: 产出.map文件，即以map形式映射
cheap: 不包含列信息（只定位到具体行数）也不包含loader（babel，jsx等）
module: 包含loader
inline: 将 .map作为DataUrl嵌入（不常用）

具体webpack官网提供的配置模式选择可参考：devtool

这里解释下eval模式，eval是JavaScript中的一个函数，可以运行字符串的代码。

eval('console.log('are you ready?')')

此模式下会通过追加 source-url的方式来定位方式，如果仅使用eval模式，构建速度会很快，但是他并不能定位到具体的行列信息。刚才了解到source-map是通过产出.map文件来定位，他是可以定位到代码的行列信息的，那是不是可以把这两种组合呢？ 可以的。

上图是使用eval-source-map展示的效果。

上图是使用source-map 展示的效果。

eval-source-map在 source-map先锁定了每个文件的定位，处理下来操作速度会优于直接采用.map方式索引。

模式选择中有一个选项叫 eval-cheap-module-source-map,添加了module之后，给我们解析出来的源代码和源代码一模一样，如果不添加module,解析出来的代码是Loader加工后的结果。

解决

通过查看vue.config.js文件，发现配置如下：

devtool: process.env.NODE_ENV === 'development' ? 'eval-source-map' : '',

阅读可知，当判断当前为开发环境时，会使用eval-source-map模式，生产环境中则会使用 none，

由上述的分析可知，这个开发环境的模式重新构建时由于需要索引完整的源代码，速度会偏慢，由于通常我们编写代码一行不会有太多的内容，所以这里通过将模式修改为eval-cheap-module-source-map模式，只保留行信息，这样既加快了编译速度，也不会太影响错误的定位。

经过项目反馈，编译速度会比之前快不少。

至于生产环境，none yyds !