이 글은 주로 NodeJS + Lighthouse + Gulp를 사용하여 자동화된 웹사이트 성능 테스트 도구를 구축하는 방법을 소개합니다. 이제는 도움이 필요한 친구들이 참고할 수 있도록 공유하겠습니다. Lighthouse is What

Lighthouse는 웹사이트 품질을 자동으로 감지할 수 있는 Google의 오픈 소스 도구입니다. 친숙한 인터페이스, 간단한 조작, 다양한 사용 방법 및 포괄적인 관점을 갖추고 있어 일반 사용자도 테스트할 수 있습니다. QA 및 개발자가 빠르게 시작할 수 있습니다.

시작 자세

난이도 +1

Lighthouse를 사용하는 방법에는 여러 가지가 있습니다. 가장 간단한 방법은 Chrome의 개발자 도구를 사용하는 것입니다.

명령줄을 사용할 수도 있습니다.

npm install -g lighthouse

npm install -g lighthouse
在命令行中run lighthouse <url></url>

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

难度系数+3

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

NodeJS + Lighthouse + Gulp를 사용하여 자동화된 웹사이트 성능 테스트 도구를 구축하는 방법

环境搭建

安装 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 (Error 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 <url></url>🎜🎜🎜🎜Above를 실행하세요. 두 가지 사용 방법 모두 이 기사의 초점이 아닙니다. 자세한 내용은 DevTools의 Run Lighthouse🎜🎜난이도 계수 +3🎜🎜최근에 NodeJS를 배우고 있기 때문에 저자는 Node 8 + Gulp를 사용하기로 결정했습니다. 결과를 개선하기 위해 Lighthouse를 실행합니다. 정확성을 위해 각 작업은 Lighthouse를 10번 실행하고 결과 표시기의 first-meaningful-paint 밀리초에만 관심을 갖습니다. 마지막으로 10번의 평균은 다음과 같습니다. 시각화 및 가독성을 위해 최종 결과는 웹 페이지 형식으로 표시됩니다. 사용자는 Lighthouse를 실행할 때마다 first-meaningful-paint의 시간을 확인할 수 있습니다. 사용자가 특정 항목을 실행하면 웹 페이지에서 평균값을 볼 수도 있습니다. 세부 사항에 관심이 있으면 링크를 클릭하여 볼 수 있습니다. 최종 결과는 다음과 같습니다. 🎜🎜 355591978 -5b484ee3e3c0f_articlex[1].png

355591978 -5b484ee3e3c0f_articlex[1].png

🎜🎜

NodeJS + Lighthouse + Gulp를 사용하여 자동화된 웹사이트 성능 테스트 도구를 구축하는 방법

🎜

환경 설정

🎜노드 8 설치🎜🎜종속성 패키지 설치🎜

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();
}

로그인 후 복사

구성

🎜프로젝트 루트 디렉터리에 Lighthouse 생성 구성 파일 lighthouse-config.js, 여기서는 모두 기본 구성을 사용합니다. 기본 구성을 사용하려면 구성에서 extends: 'lighthouse:default'를 선언해야 합니다. 파일. 🎜

gulp.task('start', async function() {
  let timestamp = Date.now();
  let spent = [];
  for(let i=0; i🎜더 자세한 구성 옵션이 필요한 경우 다음을 참조하세요.🎜🎜🎜🎜이 문서의 대부분은 명령줄 매개변수를 Node🎜🎜🎜🎜제한에 사용할 수도 있습니다. 🎜🎜🎜🎜Default Config 특정 기본 구성 매개변수 🎜🎜🎜🎜웹 페이지 테스트는 다양한 네트워크 속도를 시뮬레이션하고 🎜🎜🎜🎜Emulation은 프로젝트의 다양한 장치 🎜🎜🎜<h4>Coding</h4>🎜을 시뮬레이션합니다. 루트 디렉터리 <code>gulpfile.js</code>를 생성하고 먼저 모든 종속 도구를 도입합니다: 🎜<pre class="brush:php;toolbar:false">gulp start

로그인 후 복사

🎜 Lighthouse 사용을 시작하기 전에 먼저 파일을 작성하는 메서드를 생성하여 최종적으로 사용자 정의 보고서 파일을 생성합니다: 🎜

nbsp;html>


  <meta>
  <meta>
  <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>

로그인 후 복사

Performance Summary Report

Case No.	First Meaningful Paint	Link To Details

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<p>最后的最后， 执行：</p><pre class="brush:php;toolbar:false">gulp start

로그인 후 복사

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

nbsp;html>


  <meta>
  <meta>
  <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>

로그인 후 복사