说在前面
近日团队成员反馈前端项目修订部分内容后需要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 !