摘要：實例啟動之后，我們就可以調用，調用時，須提供需要進行性能測試的網站，參數，以及前文創建好的配置，參數包含了啟動端口，啟動方式是否等信息。附上匯總界面的模板源碼源碼地址把最重要的放到最后附上源碼

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、開發都可以快速上手。

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

打開 Chrome 瀏覽器

按F12

在彈出來的窗口中打開 audits 標簽

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

Run audit

也可以使用命令行。

安裝Node

安裝Lighthouse npm install -g lighthouse

在命令行中run lighthouse

以上兩種使用方式都不是本文的重點，如果想深入了解，可參照 Run Lighthouse in DevTools

由于最近在學習 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 模擬不同的設備

在項目根目錄下創建 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

萬事大吉。
附上匯總界面的模板源碼：

  
  
  
  


Performance Summary Report

  
  

    

      Case No.
    
    

      First Meaningful Paint
    
    

      Link To Details
    
  
  

  

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