本文主要介绍如何使用NodeJS + Lighthouse + Gulp构建自动化网站性能测试工具。有一定的参考价值。现在我就和大家分享一下。有需要的朋友可以参考一下

假设你还不知道 Lighthouse 是什么，Lighthouse 是 Google 旗下的一个开源工具，可以自动检测网站质量。它界面友好、操作简单、使用方法多样、视角全面。您可以使用它来测试任何网页。通常用户、QA 和开发人员都可以快速上手。

启动姿势难度系数+1 Lighthouse的使用方法有很多种。最简单的一种是使用 Chrome 的开发者工具。步骤如下：

打开 Chrome 浏览器

按F12

在弹出窗口中打开审核选项卡

单击执行审核...检查全部

运行审核

难度系数+2 您也可以使用命令行。

安装节点

安装 Lighthouse npm install -g lighthouse

在命令行运行 lighthouse

以上两种使用方法不是本文的重点。如果想了解更多，可以参考DevTools中运行Lighthouse

难度系数+3 由于最近在学习NodeJS，所以决定使用Node 8 + Gulp来运行lighthouse。为了提高结果的准确性，我对每个任务跑了10次lighthouse，并且只关心结果指标中的第一个。有意义——画毫秒，最后取10次的平均值。为了可视化和可读性，最终结果以网页的形式显示。用户可以在网页上看到每次执行 Lighthouse 后第一次有意义的绘制的毫秒数。 ，您还可以看到平均值。如果用户对某个执行的详细信息感兴趣，可以点击链接查看。最终效果如下：

环境设置和安装节点8

安装依赖包

npm 我灯塔 --save-dev

npm 我的 chrome 启动器 --save-dev

npm i fs-extra --save-dev

npm i gulp --save-dev 配置在项目根目录中创建 Lighthouse 配置文件 lighthouse-config.js。这里我们都使用默认的配置。要使用默认配置，需要在配置文件中声明extends: "lighthouse:default"。 ”。

module.exports = {

扩展：“灯塔：默认”

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

Lighthouse 本文的大部分内容是关于命令行的。命令行参数也可用于 Node

节流这篇文章是关于网络模拟的

默认配置特定默认配置参数

网页测试模拟不同网速

仿真模拟不同的设备

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

const gulp = require("gulp");

const 灯塔 = require("灯塔");

const chromeLauncher = require("chrome-launcher");

const 打印机 = 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之前，首先创建一个写入文件的方法，最终生成自定义的报告文件：

异步函数写入（文件，报告）{

尝试{

等待fs.outputFile（文件，报告）;

} catch（错误 e）{

console.log("写报告时出错", e);

}

} 在调用 Lighthouse 之前，我们需要首先启动一个 Chrome 实例并向 Lighthouse 提供端口号。 --headless 表示不打开浏览器窗口。

异步函数 launchChrome() {

让铬；

尝试{

chrome = 等待 chromeLauncher.launch({

chromeFlags：[

“--禁用GPU”，

“--无沙盒”，

“--无头”

],

启用扩展：true，

日志级别：“错误”

});

console.log(chrome.port)

返回{

端口：chrome.port，

chromeFlags：[

“--无头”

],

日志级别：“错误”

}

} 抓住 (e) {

console.log("启动 Chrome 时出错", e);

}

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

异步函数 lighthouseRunner(opt) {

尝试{

return wait lighthouse("https://m.fjsmjj.com", opt, config);

} 抓住 (e) {

console.log("运行灯塔时出错");

}

}Lighthouse的返回结果是一个json对象，包含性能测试结果、最终版本的配置参数、指标分组等信息。读者可以参考理解结果进行更深入的理解。

由于我们需要使用官方的Lighthouse模板来生成报告，所以我们调用官方的方法。注意，第一个参数在result.lhr中传递，第二个参数声明为生成html报告（也可以生成csv等格式的报告）。

函数genReport（结果）{

return Reporter.generateReport(result.lhr, "html");

} 接下来我们编写一个将上述方法串在一起的函数。首先启动一个Chrome实例，然后将Chrome实例的一些参数传递给Lighthouse，使用lighthouse运行的结果生成报告，并将其写入html文件中。 ，html文件应该有一个时间戳和执行顺序作为唯一标识符。 start方法返回结果中的first-meaningful-paint（这是我们最关心的指标，读者可以根据自己的需求进行替换，具体指标请参考Lighthouse）。

异步函数运行（时间戳，num）{

让chromeOpt =等待launchChrome();

让结果=等待lighthouseRunner(chromeOpt);

让报告 = genReport(结果);

等待打印机.write(报告, "html", `./cases/lighthouse-report@${timestamp}-${num}.html`);

返回 result.lhr.audits["first-meaningful-paint"].rawValue;

等待 chrome.kill();

} 现在，我们可以正式开始编写 gulp 任务了。首先，获取用于命名最终生成的报告的当前时间戳，然后声明一个数组来记录每次运行 Lighthouse 时生成的第一个有意义的绘制毫秒数。计数，然后运行Lighthouse 10次，使用预先创建的模板文件，并根据这10次的结果生成总结报告。这里，作者使用Lighthouse暴露的工具函数来替换字符串。

gulp.task("开始", 异步函数() {

让时间戳 = m.fjsmjj.com();

让花=[];

for（令 i=0；i<5；i++）{

花费.push（等待运行（时间戳，i））;

}

let template = wait fs.readFileSync("./summary/template/template.html", "utf-8");

让摘要= Reporter.replaceStrings（模板，[{

搜索：“%%TIME_SPENT%%”，

替换：JSON.stringify（已用）

}，{

搜索：“%%TIMESTAMP%%”，

替换：时间戳

}]);

write(`./summary/report/summary@${timestamp}.html`, 摘要)

}）最后执行：

吞下一切美好的开始。

附摘要界面模板源码：

绩效总结报告