About Automated auditing, performance metrics, and best practices for the web.
Lighthouse 可以自動檢查Web頁面的性能。
你可以以多種方式使用它。
瀏覽器插件
作為瀏覽器插件，訪問chrome網上商店 搜索Lighthouse 插件安裝。以兩種方式使用。
- 方式一
安裝成功后，訪問想要檢查的頁面，開發插件，點擊Generate report，稍等片刻，你將會得到一份頁面的檢查報告。
- 方式二
訪問想要檢查的頁面，打開開發者工具，切換到Lighthouse 標簽使用。
Node CLI
以Node CLI方式使用Lighthouse可以得到最大靈活性，Lighthouse提供了許多參數使用。
Linghthouse 需要Node 14 LTS（14.x） 或更高版本。
- 安裝
> npm install -g lighthouse
- 查看幫助
> lighthouse --help
- 使用
> lighthouse https://www.baidu.com --output html --output-path ./report.html
√ We're constantly trying to improve Lighthouse and its reliability.
...
--output 指定報告的類型；--output-path 指定報告的路徑。
以編程模式使用
創建lighthouse_demo.js 文件，腳本如下：
const fs = require('fs');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
(async () => {
const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
const runnerResult = await lighthouse('https://www.baidu.com/', options);
// `.report` is the HTML report as a string
const reportHtml = runnerResult.report;
fs.writeFileSync('lhreport.html', reportHtml);
// `.lhr` is the Lighthouse Result as a JS object
console.log('Report is done for', runnerResult.lhr.finalUrl);
console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);
await chrome.kill();
})();
有沒有自動化既視感，還可以設置 headless模式。
- 運行
> node lighthouse_demo.js
最終，會在當前目錄下生成 lhreport.html 結果文件。
Web網站
有一些Web網站基於lighthouse 提供服務，你可以登錄這些網站輸入URL檢測網絡性能。
-
Web Page Test
https://www.webpagetest.org/ -
Calibre
https://calibreapp.com/ -
Debug bear
https://www.debugbear.com/ -
Lighthouse Keeper
https://lighthouse-keeper.com/
...
以 web page test 為例：
