Puppeteer – 代码覆盖率

代码覆盖率（Code Coverage）用于衡量一个源文件里有多少代码是被用到的。例如，某个网页引用了一个css文件，通常该网页只会使用css文件中的一部分代码，这样就可以计算用到的代码量与文件中全部代码量的比率。

代码覆盖率统计功能是作为Chrome v59的一部分正式引入的，通过统计代码覆盖率，可以减少无用代码，加快页面加载速度。

Puppeteer中，可用通过Page.coverage使用代码覆盖率统计功能。

示例

计算百度首页内，javascript文件与css文件的有效代码量。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 开始收集JS和CSS文件的覆盖率信息
  await Promise.all([page.coverage.startJSCoverage(), page.coverage.startCSSCoverage()]);

  await page.goto('https://www.baidu.com');
  await page.waitForSelector('title');

  // 停止收集覆盖率信息
  const [jsCoverage, cssCoverage] = await Promise.all([
    page.coverage.stopJSCoverage(),
    page.coverage.stopCSSCoverage()
  ]);

  // 根据覆盖率计算使用了多少字节
  const calculateUsedBytes = (type, coverage) =>
    coverage.map(({ url, ranges, text }) => {
      let usedBytes = 0;

      ranges.forEach(range => (usedBytes += range.end - range.start - 1));

      return {
        url,
        type,
        usedBytes,
        totalBytes: text.length
      };
    });

  console.info([
    ...calculateUsedBytes('js', jsCoverage),
    ...calculateUsedBytes('css', cssCoverage)
  ]);

  await browser.close();
})();

上面示例中，

• 首先为JavaScript和CSS文件收集覆盖率信息，直到页面加载完成。
• 然后，定义calculateUsedBytes函数，它将遍历收集的覆盖率数据，计算使用了多少字节(基于覆盖率)。
• 最后，对收集到覆盖率信息：jsCoverage与cssCoverage，调用calculateUsedBytes函数，计算使用到的字节数。

运行脚本的输出:

[ { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 0,
    totalBytes: 115 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 40,
    totalBytes: 41 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 57,
    totalBytes: 705 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 12,
    totalBytes: 83 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 39,
    totalBytes: 40 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 2431,
    totalBytes: 2500 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 3639,
    totalBytes: 3743 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 311,
    totalBytes: 323 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js',
    type: 'js',
    usedBytes: 40198,
    totalBytes: 93747 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 111232,
    totalBytes: 112037 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 2588,
    totalBytes: 5338 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/plugins/every_cookie_4644b13.js',
    type: 'js',
    usedBytes: 2032,
    totalBytes: 3421 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/js/all_async_search_2d18882.js',
    type: 'js',
    usedBytes: 37362,
    totalBytes: 289361 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 313,
    totalBytes: 314 },
  { url: 'https://www.baidu.com/',
    type: 'js',
    usedBytes: 95,
    totalBytes: 96 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/js/nu_instant_search_068a951.js',
    type: 'js',
    usedBytes: 930,
    totalBytes: 20395 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/plugins/swfobject_0178953.js',
    type: 'js',
    usedBytes: 1523,
    totalBytes: 9216 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/js/tu_77547af.js',
    type: 'js',
    usedBytes: 1431,
    totalBytes: 13881 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/amd_modules/@baidu/search-sug_73a0f48.js',
    type: 'js',
    usedBytes: 81,
    totalBytes: 82 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/amd_modules/@baidu/search-sug/sug/index_4c46888.js',
    type: 'js',
    usedBytes: 5993,
    totalBytes: 36143 },
  { url: 'https://www.baidu.com/',
    type: 'css',
    usedBytes: 4401,
    totalBytes: 18037 },
  { url: 'https://www.baidu.com/',
    type: 'css',
    usedBytes: 0,
    totalBytes: 33 },
  { url: 'https://www.baidu.com/',
    type: 'css',
    usedBytes: 924,
    totalBytes: 4233 },
  { url: 'https://www.baidu.com/',
    type: 'css',
    usedBytes: 34,
    totalBytes: 240 },
  { url:
     'https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/css/soutu.css',
    type: 'css',
    usedBytes: 1402,
    totalBytes: 13607 } ]

可以看出，百度首页还有不少可以优化的余地。