奇技淫巧：Chrome DevTools 代码覆盖率功能详解

共 1812 字，读完需 3 分钟。工欲善其事必先利其器，前端周刊本周起每周会加餐 1 篇工具技巧，里面辅以动图，让你们看完就能学会，并上手使用。本文会介绍 Chrome Canary 新增的代码覆盖率功能、如何收集数据、如何基于它收集的数据来改进 WEB 应用的性能。

Chrome Canary 开发者工具中本周新增了 Coverage 功能，该功能同时适用于 JS 和 CSS，并有望很快登录 Chrome 正式版。

Coverage 顾名思义就是代码覆盖率的意思，本文会跟你们介绍 Coverage 功能是什么、如何收集数据、及如何基于它收集的数据来改进 WEB 应用的性能。

Coverage 功能使用动态分析（Dynamic Analysis）法来收集代码运行时的覆盖率，让开发者可以窥探他的代码到底有多大比例在发光发热。动态分析是指在应用运行状态下收集代码执行数据的过程，换句话说，覆盖率数据就是在代码执行过程当中经过标记收集到的。

Coverage 工具怎么用？

在探讨 Coverage 工具带来的好处以前，先快速看下如何使用它来收集覆盖率数据：

1. 调起 Coverage 面板

2. 录制 Coverage 数据

与 Performance 面板相似，Coverage 面板左上角有 3 个按钮，点击录制的时候会开始录制，同时录制按钮变红，再次点击录制按钮会中止录制并把录制到的覆盖率数据展现出来。此外，能够点击中间的快捷按钮，“刷新并开始录制”，待页面加载完以后中止录制。

Coverage 工具要求咱们手动录制的缘由是：动态分析过程须要监控每行代码的执行状况，也就意味着录制过程当中执行的代码要比原始的应用的代码要多，由于动态分析过程须要对你的代码进行某种变换才知道哪些行被执行了。

3. 查看 Coverage 数据

如上图所示，Coverage 录制结果表格展现了录制过程当中加载的全部 JS 和 CSS 文件，以及每一个文件的大小、运行时覆盖率，汇总数据展现在页面底部的状态栏中（上面的截图没有展现）。单击单个静态资源能将其在 Sources 面板中打开，代码行号的左边用红绿色的条来标识代码是否在录制过程当中被执行到。

Coverage 数据有啥用？

上面录制的数据中，最大的文件是 vendor.js，其中 55% 的代码都没有执行过，约 80 KB，这已经至关于一张典型图片的文件大小了。

若是某个文件覆盖率低（即未使用代码比例很高），一般意味着用户加载了太多没必要要的代码（要么真的是无用代码，要么是当前时点还没执行到的代码），有性能常识的同窗不难推断出，这会致使页面的彻底加载时间、或单页应用的启动时间变慢，在慢速网络下的性能损耗会尤为明显；此外，更多代码的解析、编译也就意味着更多的硬件资源消耗，在低端设备上也会存在明显的性能问题。

在笔者看来，Coverage 数据至少能从下面 2 个方面指导咱们进行 WEB 应用的优化：

除移死代码

以 Coverage 数据为参考，咱们能了解页面重无用代码的比例到底有多大。现实世界中，不少工程师多是在遗留代码库上工做，而且遗留代码库存在的时间还很长，那么极可能这个代码库中存在大量的无用代码，可是谁也不敢删除他们，由于 JS 这门语言的动态性，你不能粗暴的把哪些看起来“没有被使用”的代码直接删掉，除非你很清楚全部的代码执行路径，很显然这对于大型应用或者遗留代码库来讲是不现实的。

怎么移除死代码呢？咱们能够依赖打包工具，好比 UglifyJS 在压缩代码时支持直接删除死代码的配置项。而 Webpack 2 中引入了 Tree Shaking 的特性，可以自动把项目中没有用到的代码从打包中去掉，可是这种优化仅限于被 export 的代码。总而言之，死代码要尽量想办法去掉，Coverage 工具能提供一个判断基准。

懒加载代码

若是能删的死代码都删了，可是 Coverage 数据仍是居高不下，那么你应该换个角度思考。就像前文所说，JS 是动态语言，可能部分代码在页面加载时并无用到，可是用户后来的操做会触发这些代码的执行，为何不让这些代码在须要的时候再加载呢？聪明的你可能已经想到了，这就是懒加载的技术。

使用 Webpack 打包且没有对配置作特别调优的话，它默认会把全部依赖打包成一个巨大的文件，很容易出现首次加载覆盖率很低的状况，在 Webpack 中实现懒加载能够参考 Code Splitting 和 bundle-loader，具体的配置细节这里不展开讲。使用懒加载以后能够极大的减小页面初次下载的代码，从而提升性能。须要注意的是，懒加载优化须要在模块数量和模块大小之间把握一个平衡，不然过多的模块懒加载反而对性能不利，由于每一个 HTTP 请求也是有额外开销的。

One More Thing

本文做者王仕军，商业转载请联系做者得到受权，非商业转载请注明出处。若是你以为本文对你有帮助，请点赞！若是对文中的内容有任何疑问，欢迎留言讨论。想知道我接下来会写些什么？欢迎订阅知乎专栏：《前端周刊：让你在前端领域跟上时代的脚步》。