阅读 81

webpack sourcemap 精简说明

对于一个 webpack 构建的项目,source-map 对于开发调试,打包速度还是影响很大的,但是 webpack 的官方说明却不那么清晰易懂,也没有找到很精简的说明文章,索性自己尝试下所有的参数,概述一下自己的理解。

有兴趣的同学可以自行创建一个简单的 webpack 项目,切换参数尝试下,会更容易理解

**注意尝试的时候,要把webpack mode设置为none, webpack4 mode 为 development和production时会有额外的行为 **

首先看下官网的那张说明图:

看上去是不是很烦!!其实抽离出其中的关键字,理解每个关键字的做了什么,起到什么作用,剩下的就是彼此间的组合了。

eval => 提升 rebuild 速度

eval 的作用是使得打包后的 bundle 文件中每个模块代码使用 eval 去执行,会保留每个模块的 eval 形式的文件,即便是指定了eval-source-map,仍然会在浏览器开发者工具中生成 webpack-internals:// 文件夹来保存一份里面是eval形式的模块文件。如图:

猜测这样做的目的:因为 eval 中为字符串形式,所以当源码变动的时候进行字符串处理会提升 rebuild 的速度,所以可以看到图表中所有带有 eval 的选项,rebuild 速度都很快。

因此 eval 的关键字就是 rebuild

source-map => 额…… source-map

这个貌似不需要说明,就是指定了这个关键字才会真正的进行 source-map 生成,生成 .map 文件, 会在 bundle 文件末尾追加 sourceURI= 指定 .map 文件路径,会在浏览器开发者工具中看到webpack://的文件夹

inline => dataURI

正常的source-map 的生成是在dist 目录下创建一个 .map 文件, inline 的含义就是不产生独立的 .map 文件,而把 source-map 的内容以 dataURI的方式追加到 bundle 件末尾,入股:

至于什么是 dataURI,请自行google ~~

所以 inline 的关键字是 dataURI

cheap => lines-only

cheap 的含义是忽略列信息,可以看到图表中所有带有 cheap 的说明中都有 lines-only.

忽略列信息的意思就是出了问题只能定位到某一行,不能定位到这行的哪一列, cheap 主要是为了提升打包速度,很好理解嘛,只关注行,不关注列,生成map的速度肯定快啊~~

所以 cheap 的关键字就是lines-only

module => loader

module 的作用是 maploader 处理前的文件,如果不加 module, 实际上是 map 到源文件经过对应 loader 处理后的样子。这个需要 loader 的支持

所以 module 的关键字是 loader

最下面的两个选项

hidden-source-map

就是不在 bundle 文件结尾处追加 sourceURL 指定其 sourcemap文件的位置,但是仍然会生成 sourcemap 文件。这样,浏览器开发者工具就无法应用sourcemap, 目的是避免把sourcemap文件发布到生产环境,造成源码泄露。

生产环境应该用错误报告工具结合 sourcemap 文件来查找问题

nosources-source-map

sourcemap 中不带有源码,这样,sourcemap 可以部署到生产环境而不会造成源码泄露,同时一旦出了问题,error stacks 中会显示准确的错误信息,比如发生在哪个源文件的哪一行,如图:

总结

以上所有关键字说明完毕,然后再去看官网的说明,会容易理解的多。什么时候用哪个选相也可以自行思考了。

本文仅从使用的角度来理解 sourcemap, 想要详细了解 sourcemap 原理的可自行搜索,如阮老师的 JavaScript Source Map 详解

最后附上主要关键字对应方便记忆:

  • evel => rebuild
  • inline => dataURI
  • cheap => lines-only
  • module => loader
关注下面的标签,发现更多相似文章
评论