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

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公司旗下一個(gè)開源的、可自動(dòng)化檢測網(wǎng)站質(zhì)量的工具，界面友好、操作簡單、使用方式多樣、視角全面，可以用它來測試任意網(wǎng)頁，普通用戶、QA、開發(fā)都可以快速上手。

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

打開 Chrome 瀏覽器

按F12

在彈出來的窗口中打開 audits 標(biāo)簽

點(diǎn)擊 Perform an audit...勾選全部

Run audit

也可以使用命令行。

安裝Node

安裝Lighthouse npm install -g lighthouse

在命令行中run lighthouse

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

由于最近在學(xué)習(xí) NodeJS， 因此筆者決定使用 Node 8 + Gulp 來跑 lighthouse，為了提高結(jié)果的準(zhǔn)確性，每次task都跑10次 lighthouse， 并且只關(guān)心結(jié)果指標(biāo)中的 first-meaningful-paint 毫秒數(shù)，最終取10次的平均值，為了可視化與可讀性，最終的結(jié)果以網(wǎng)頁的形式展示，用戶可在網(wǎng)頁上看到每次執(zhí)行 Lighthouse 之后 first-meaningful-paint 的毫秒數(shù)，也可以看到平均值，如果用戶對某次執(zhí)行的細(xì)節(jié)感興趣，可以點(diǎn)擊鏈接察看。最終的結(jié)果長這個(gè)樣子：

安裝 Node 8

安裝依賴包

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

在項(xiàng)目根目錄下創(chuàng)建Lighthouse的配置文件 lighthouse-config.js, 這里我們?nèi)渴褂媚J(rèn)配置，使用默認(rèn)配置需在配置文件中聲明 extends: "lighthouse:default"。

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

如果讀者需要了解更詳細(xì)的配置選項(xiàng)，可參考：

Lighthouse 這篇大部分內(nèi)容是關(guān)于命令行的，命令行參數(shù)同樣可用于Node

throttling這篇是關(guān)于網(wǎng)絡(luò)模擬的

Default Config 具體的默認(rèn)配置參數(shù)

Web Page Test 模擬不同的網(wǎng)速

Emulation 模擬不同的設(shè)備

在項(xiàng)目根目錄下創(chuàng)建 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 之前，首先創(chuàng)建一個(gè)寫入文件的方法， 用于最后生成自定義的 report 文件:

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

調(diào)用 Lighthouse 之前，我們需要首先啟動(dòng)一個(gè) Chrome 的 instance ，并將端口號(hào)提供給 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 實(shí)例啟動(dòng)之后，我們就可以調(diào)用 Lighthouse ， 調(diào)用時(shí)，須提供需要進(jìn)行性能測試的網(wǎng)站，參數(shù)，以及前文創(chuàng)建好的配置，參數(shù)包含了 Chrome 啟動(dòng)端口，啟動(dòng)方式（是否 headless 等信息）。

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

Lighthouse 的返回結(jié)果是一個(gè)包含性能測試結(jié)果， 最終版的配置參數(shù)， 指標(biāo)分組等信息的 json 對象，讀者可以參考 Understanding Results 獲得更深入的理解。
由于這里我們需要使用 Lighthouse 官方的模板生成報(bào)告，因此調(diào)用官方提供的方法，注意第一個(gè)參數(shù)傳入 result.lhr， 第二個(gè)參數(shù)聲明生成 html 報(bào)告（還可以生成 csv 等格式的報(bào)告）。

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

下面我們寫一個(gè)將上面幾個(gè)方法串起來的函數(shù)，首先啟動(dòng)一個(gè) Chrome 實(shí)例， 然后將 Chrome 實(shí)例的某些參數(shù)傳遞給 Lighthouse，使用 lighthouse 跑出來的結(jié)果生成報(bào)告，并寫入 html 文件， html文件應(yīng)帶有時(shí)間戳和執(zhí)行順序作為唯一標(biāo)識(shí)。start 方法返回結(jié)果中的first-meaningful-paint（這是我們最關(guān)心的指標(biāo)，讀者可根據(jù)自身需要替換，具體指標(biāo)可參考 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();
}

下面， 我們可以正式開始寫一個(gè) gulp task 啦，首先獲得當(dāng)前時(shí)間戳，用于最終生成的報(bào)告命名，然后聲明一個(gè)數(shù)組，用于記錄每次跑 Lighthouse 生成的 first-meaningful-paint 毫秒數(shù)，然后跑10次 Lighthouse， 使用提前創(chuàng)建的模板文件，根據(jù)這10的結(jié)果，生成一個(gè)匯總報(bào)告，這里，筆者使用了Lighthouse對外暴露的工具函數(shù)進(jìn)行字符串的替換。

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

最后的最后， 執(zhí)行：

gulp start

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

  
  
  
  


Performance Summary Report

  
  

    

      Case No.
    
    

      First Meaningful Paint
    
    

      Link To Details
    
  
  

  

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