如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具

這篇文章主要介紹瞭如何使用NodeJS Lighthouse Gulp建立自動化網站效能測試的工具，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

假設你還不知道Lighthouse是什麼

Lighthouse 是Google公司旗下一個開源的、可自動化檢測網站品質的工具，界面友好、操作簡單、使用方式多樣、視角全面，可以用它來測試任意網頁，普通使用者、QA、開發都可以快速上手。

啟動姿勢

難度係數1

使用Lighthouse的方式有很多種，最簡單的，可以使用Chrome 的開發者工具，步驟如下：

1. 開啟Chrome 瀏覽器

2. 按F12

3. 在彈出的視窗中開啟audits 標籤

4. 點選Perform an audit...勾選全部

5. #Run audit

## 難度係數2

也可以使用命令列。

1. 安裝Node

2. 安裝Lighthouse

   npm install -g lighthouse

3. 在命令列中run

   lighthouse

#以上兩種使用方式都不是本文的重點，如果想深入了解，可參考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'
}

如果讀者需要了解更詳細的設定選項，可參考：

1. #Lighthouse 這篇大部分內容是關於命令列的，命令列參數同樣可用於Node

2. throttling這篇是關於網路模擬的

3. #Default Config 具體的預設設定參數

4. #Web Page Test 模擬不同的網速

5. 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)。

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>

  

Performance Summary Report

                          

Case No.	First Meaningful Paint	Link To Details

<script> let timespent = %%TIME_SPENT%%; let timestamp = %%TIMESTAMP%%; let tableBody = document.getElementById("tableBody"); let content = &#39;&#39;; for(let i=0; i < timespent.length; i++) { content += `<tr style="border: 1px solid grey"> <td> ${i+1} <td> ${timespent[i]} <td> <a href="../../cases/lighthouse-report@${timestamp}-${i}.html">View Details ` } let total = timespent.reduce((i, j) => { return i + j; }) let count = timespent.filter(function(i) { return i}).length content += `<tr> <td> AVG <td> ${total / count} ` tableBody.innerHTML = content; </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

 jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能

关于vue中extend,mixins,extends,components,install的操作

Vue+Mock.js如何搭建前端独立开发环境

以上是如何使用NodeJS + Lighthouse + Gulp建立自動化網站效能測試的工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！