NodeJS + Lighthouse + Gulp 搭建自动化网站性能测试工具

假设你还不知道Lighthouse是什么

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

Lighthouse 是Google公司旗下一个开源的、可自动化检测网站质量的工具，界面友好、操作简单、使用方式多样、视角全面，可以用它来测试任意网页，普通用户、QA、开发都可以快速上手。

启动姿势

难度系数 +1

使用Lighthouse的方式有很多种，最简单的，可以使用 Chrome 的开发者工具，步骤如下：

打开 Chrome 浏览器
按F12
在弹出来的窗口中打开 audits 标签
点击 Perform an audit...勾选全部
Run audit

难度系数+2

也可以使用命令行。

安装Node
安装Lighthouse npm install -g lighthouse
在命令行中run lighthouse <url>

以上两种使用方式都不是本文的重点，如果想深入了解，可参照 Run Lighthouse in DevTools

难度系数+3

由于最近在学习 NodeJS，因此笔者决定使用 Node 8 + Gulp 来跑 lighthouse，为了提高结果的准确性，每次task都跑10次 lighthouse，并且只关心结果指标中的 first-meaningful-paint 毫秒数，最终取10次的平均值，为了可视化与可读性，最终的结果以网页的形式展示，用户可在网页上看到每次执行 Lighthouse 之后 first-meaningful-paint 的毫秒数，也可以看到平均值，如果用户对某次执行的细节感兴趣，可以点击链接察看。最终的结果长这个样子：

环境搭建

安装 Node 8

安装依赖包

npm i lighthouse --save-dev
npm i chrome-launcher --save-dev
npm i fs-extra --save-dev
npm i gulp --save-dev

配置

在项目根目录下创建Lighthouse的配置文件 lighthouse-config.js, 这里我们全部使用默认配置，使用默认配置需在配置文件中声明 extends: 'lighthouse:default'。

module.exports = {extends: 'lighthouse:default'
}

如果读者需要了解更详细的配置选项，可参考：

Lighthouse 这篇大部分内容是关于命令行的，命令行参数同样可用于Node
throttling这篇是关于网络模拟的
Default Config 具体的默认配置参数
Web Page Test 模拟不同的网速
Emulation 模拟不同的设备

Coding

在项目根目录下创建 gulpfile.js，首先引入所有依赖的工具：

const gulp = require('gulp');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
const printer = require('lighthouse/lighthouse-cli/printer');
const Reporter = require('lighthouse/lighthouse-core/report/report-generator');
const fs = require('fs-extra');
const config = require('./lighthouse-config.js');

在开始使用 lighthouse 之前，首先创建一个写入文件的方法，用于最后生成自定义的 report 文件:

async function write(file, report) {try {await fs.outputFile(file, report);} catch (e) {console.log("error while writing report ", e);}
}

调用 Lighthouse 之前，我们需要首先启动一个 Chrome 的 instance ，并将端口号提供给 Lighthouse 。--headless表示不打开 browser 窗口。

async function launchChrome() {let chrome;try {chrome =  await chromeLauncher.launch({chromeFlags: ["--disable-gpu","--no-sandbox","--headless"],enableExtensions: true,logLevel: "error"});console.log(chrome.port)return {port: chrome.port,chromeFlags: ["--headless"],logLevel: "error"}} catch (e) {console.log("Error while launching Chrome ", e);}
}

Chrome 实例启动之后，我们就可以调用 Lighthouse ，调用时，须提供需要进行性能测试的网站，参数，以及前文创建好的配置，参数包含了 Chrome 启动端口，启动方式（是否 headless 等信息）。

async function lighthouseRunner(opt) {try {return await lighthouse("https://www.baidu.com", opt, config);} catch (e) {console.log("Error while running lighthouse");}
}

Lighthouse 的返回结果是一个包含性能测试结果，最终版的配置参数，指标分组等信息的 json 对象，读者可以参考 Understanding Results 获得更深入的理解。
由于这里我们需要使用 Lighthouse 官方的模板生成报告，因此调用官方提供的方法，注意第一个参数传入 result.lhr，第二个参数声明生成 html 报告（还可以生成 csv 等格式的报告）。

function genReport(result) {return Reporter.generateReport(result.lhr, 'html');
}

下面我们写一个将上面几个方法串起来的函数，首先启动一个 Chrome 实例，然后将 Chrome 实例的某些参数传递给 Lighthouse，使用 lighthouse 跑出来的结果生成报告，并写入 html 文件， html文件应带有时间戳和执行顺序作为唯一标识。start 方法返回结果中的first-meaningful-paint（这是我们最关心的指标，读者可根据自身需要替换，具体指标可参考 Lighthouse)。

async function run(timestamp, num) {let chromeOpt = await launchChrome();let result = await lighthouseRunner(chromeOpt);let report = genReport(result);await printer.write(report, 'html', `./cases/lighthouse-report@${timestamp}-${num}.html`);return result.lhr.audits['first-meaningful-paint'].rawValue;await chrome.kill();
}

下面，我们可以正式开始写一个 gulp task 啦，首先获得当前时间戳，用于最终生成的报告命名，然后声明一个数组，用于记录每次跑 Lighthouse 生成的 first-meaningful-paint 毫秒数，然后跑10次 Lighthouse，使用提前创建的模板文件，根据这10的结果，生成一个汇总报告，这里，笔者使用了Lighthouse对外暴露的工具函数进行字符串的替换。

gulp.task('start', async function() {let timestamp = Date.now();let spent = [];for(let i=0; i<5; i++) {spent.push(await run(timestamp, i));}let template = await fs.readFileSync('./summary/template/template.html', 'utf-8');let summary = Reporter.replaceStrings(template, [{search: '%%TIME_SPENT%%',replacement: JSON.stringify(spent)}, {search: '%%TIMESTAMP%%',replacement: timestamp}]);write(`./summary/report/summary@${timestamp}.html`, summary)
})

最后的最后，执行：

gulp start

万事大吉。
附上汇总界面的模板源码：

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"><title>Lighthouse Summary Report</title><style>body {font-family: sans-serif;}table {margin: auto;}tr {border: 1px solid grey;}h1 {text-align: center;margin: 30px auto 50px auto}</style>
</head>
<body>
<table><h1>Performance Summary Report</h1><tr><th>Case No.</th><th>First Meaningful Paint</th><th>Link To Details</th></tr><tbody id="tableBody"></tbody>
</table>
<script>
let timespent = %%TIME_SPENT%%;
let timestamp = %%TIMESTAMP%%;
let tableBody = document.getElementById("tableBody");
let content = '';
for(let i=0; i < timespent.length; i++) {content += `<tr style="border: 1px solid grey"><td>${i+1}</td><td>${timespent[i]}</td><td><a href="../../cases/lighthouse-report@${timestamp}-${i}.html">View Details</a></td></tr>`
}
let total = timespent.reduce((i, j) => {return i + j;
})
let count = timespent.filter(function(i) { return i}).length
content += `<tr>
<td>AVG
</td>
<td>
${total / count}
</td>
</tr>`
tableBody.innerHTML = content;
</script>
</body>
</html>

源码地址

把最重要的放到最后附上github源码
lighthouse-node