代码覆盖率在性能优化上的一种可行应用

作者 |  若冰,You can't manage what you can't measure.,一件事如果你无法衡量它，你就无法管理它。——管理大师 彼得·德鲁克,JavaScript 是前端应用主要语言，相较于其他平台编程语言，JS资源多数情况下要通过网络进行加载，那么代码的体积直接影响了页面加载执行时间。“无效的代码”的多寡直接影响到了我们的代码质量，所以度量代码的执行覆盖率是一项重要的优化前置工作。,Dead code 也叫无用代码，这个概念应是在编译时静态分析出的对执行无影响的代码，举个例子：,通常我们用 Tree Shaking 在编译时移除这些 dead code以减小代码体积。,而代码覆盖率里所提到的冗余代码 和 Dead Code 又略有不同，简单来说Dead code适用于编译时，而 Code coverage 适用于运行时。,Dead code 是任何情况下都不会执行的代码，所以可以再编译阶段将其剔除。,冗余代码是某些特定的业务逻辑之下并不会执行到这些代码逻辑(比如：在首屏加载时，某个前端组件完全不会加载，那么对于“首屏”这个业务逻辑用例来讲，该前端代码就是冗余的)。,代码覆盖率(Code coverage)是软件测试中的一种度量指标。即描述测试过程中(运行时)被执行的源代码占全部源代码的比例。,chrome 浏览器的 DevTools 给我们提供了度量页面代码(JS、CSS)覆盖率的工具 Coverage。,
,
,TIPS：当然，如果在拥有 source map 的情况下也是可以用浏览器查看源代码的覆盖率的：,（1）在 source tab 中找到当前页面的 js 资源文件(当然已经被混淆的面目全非)。,（2）输入 sourcemap URL(以 def 发布平台为例，在构建结果中可找到)。,（3）在 webpack:// 目录下即可查看对应源码的大致覆盖率(不过没有什么消费价值)。,那么问题来了，有没有一种方法可以令开发者了解 源代码 的代码覆盖率的值呢?,这个软件以土耳其最大城市伊斯坦布尔命名，因为土耳其地毯世界闻名，而地毯则是用来覆盖的。,Istanbul或者 NYC(New York City，基于 istanbul 实现) 是度量 JavaScript 程序的代码覆盖率工具，目前绝大多数的node代码测试框架使用该工具来获得测试报告，其有四个测量维度：,我们可以使用 babel-plugin-istanbul 插件在对源代码在 AST 级别进行包装重写，这种编译方式也叫 代码插桩 / 插桩构建(instrument)。,我们如果要度量这一段代码哪些代码执行了 哪些代码没有执行，我们会怎么做呢?,我们可以很容易的想到加一些“装饰性”的代码在我们的源码里面，那么当代码一行一行的执行到某处时，那么我们就在全局环境变量中记录一下：,istabul 确实也是这么做的，babel-plugin-istanbul 在构建过程中分析 AST 并将相应统计单元(语句、函数、分支等)做装饰代码的添加，最终在代码运行之后，输出一份 json 格式的数据：,当我们在运行代码过后，得到了上面的 json 便可以消费它了。,tips：tbox 每平每屋 消费者端 本地开发套件。,既然我们知道了源代码的代码覆盖率，我们可以用它为性能优化做些什么贡献呢?,当工程主 bundle 较大，那么采用拆包较大的/无用的前端组件来瘦身首屏主 JS 包不失为一种可行的选择，此时就可以根据代码覆盖率来决定优化哪些代码。,React.lazy 已经为我们提供了一种不错的思路，就是利用动态加载模块规范 import() (webpack对import()解析为代码分割)的能力来实现前端组件代码懒加载/动态加载。,以此为灵感，那么为何不将某些组件通过动态引入的方式加载，来以此换取首页 bundle 的瘦身呢?,我们能通过代码覆盖率统计出哪些组件的代码首屏使用率为0(或者门槛值30%以下)，并在项目工程中自动生成一个持久化的文件配置(app.json中)，之后依据配置将这些低使用率的组件代码在生产构建时将产物代码改写为动态引入。,于是有了以下方案：,（1）该功能需要项目下安装以下 build 插件(如 tbox 新建的项目已安装以下插件可忽略)：,（2）build.json,运行 Tbox：,（3）插桩构建,（4） 分析自动化生成配置,此时我们条件加载被异步化的组件会发现，BigMod 组件已经被动态的拆包引入了，页面主 js 包也得到了瘦身，搞定!,istanbul 在 node 环境下跑测试用例代码能度量覆盖率是由于其对运行时模块加载器的源代码拦截，但是比较遗憾的是，本文介绍的代码插桩分析覆盖率这会引入一些多余的桩代码，或许采用 puppeteer 无头浏览器提供的Coverage api + sourceMap 逆编译的思路来进行度量是一种更加完美的方式，期待与诸君一起探索，继续努力!