ホームページ >ウェブフロントエンド >jsチュートリアル >NodeJS + Lighthouse + Gulp を使用して自動 Web サイト パフォーマンス テスト ツールを構築する方法
この記事では、主に NodeJS + Lighthouse + Gulp を使用して自動ウェブサイト パフォーマンス テスト ツールを構築する方法を紹介します。必要な友人はそれを参照できるようにします
Lighthouse は、Web サイトの品質を自動的に検出できるオープンソース ツールです。使いやすいインターフェイス、シンプルな操作方法、および包括的な視点を備えており、あらゆる Web ページをテストすることができます。 QA と開発者はすぐに始めることができます。
Lighthouseを使用する方法はたくさんありますが、最も簡単な方法はChromeの開発者ツールを使用することです:
Chromeブラウザを開きます
。
npm install -g lighthouse
npm install -g lighthouse
在命令行中run lighthouse <url></url>
以上两种使用方式都不是本文的重点,如果想深入了解,可参照 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 (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>
を実行します🎜🎜🎜🎜上記どちらの使用方法もこの記事の焦点ではありません。詳しく知りたい場合は、DevTools で Lighthouse を実行するを参照してください🎜🎜難易度係数 +3🎜🎜最近 NodeJS を学習しているため、著者は Node 8 + Gulp を使用することにしました。結果を改善するために Lighthouse を実行します。精度を高めるために、各タスクは Lighthouse を 10 回実行し、結果インジケーターの first-meaningful-paint
ミリ秒のみを考慮します。最終的に、10 回の平均は次のようになります。視覚化と読みやすさのために、ユーザーは Lighthouse を実行するたびに、first-meaningful-paint
のミリ秒数を確認できます。 Web ページでは、ユーザーが特定の実行を評価した場合の平均値も確認できます。詳細に興味がある場合は、リンクをクリックして表示できます。最終結果は次のようになります: 🎜🎜🎜🎜🎜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-config.js
。ここではすべてデフォルト設定を使用します。デフォルト設定を使用するには、設定内で extends: 'lighthouse:default'
を宣言する必要があります。ファイル。 🎜gulp.task('start', async function() { let timestamp = Date.now(); let spent = []; for(let i=0; i🎜読者がさらに詳細な設定オプションを知りたい場合は、🎜🎜🎜🎜Lighthouse を参照してください。この記事のほとんどは、コマンド ライン パラメータを Node🎜🎜🎜 スロットリングにも使用できます。ネットワーク シミュレーションについてです。🎜🎜🎜🎜Default Config 固有のデフォルト設定パラメータ🎜🎜🎜🎜 Web ページ テストは、さまざまなネットワーク速度をシミュレートします。🎜🎜🎜🎜エミュレーションは、プロジェクト内のさまざまなデバイスをシミュレートします。ルートディレクトリ <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>
Case No. | First Meaningful Paint | Link To Details |
---|
--headless
は、ブラウザ ウィンドウを開かないことを意味します。 🎜rrreee🎜 Chrome インスタンスが起動したら、Lighthouse を呼び出すことができます。呼び出すときは、パフォーマンス テストが必要な Web サイト、パラメーター、および以前に作成した構成を指定する必要があります。パラメーターには、Chrome の起動ポート、起動方法 (かどうか) が含まれます。ヘッドレスなど)。 🎜rrreee🎜Lighthouse の返される結果は、パフォーマンス テストの結果、設定パラメーターの最終バージョン、インジケーターのグループ化、その他の情報を含む json オブジェクトです。読者は、より深く理解するために「結果の理解」を参照できます。 result.lhr
で渡され、2 番目のパラメータが宣言されていることに注意してください。 HTML レポートを生成します (CSV およびその他の形式のレポートも生成できます)。 🎜rrreee🎜 次に、上記のメソッドを連結する関数を作成します。まず、Chrome インスタンスを起動し、Chrome インスタンスのいくつかのパラメーターを Lighthouse に渡し、Lighthouse によって実行された結果を使用してレポートを生成し、それを HTML に書き込みます。ファイルには、一意の識別子としてタイムスタンプと実行順序が必要です。 start
メソッドは結果として first-meaningful-paint
を返します (これは私たちが最も懸念しているインジケーターです。読者は必要に応じてこれを置き換えることができます。特定のインジケーターの場合) 、灯台を参照してください)。 🎜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>
Case No. | First Meaningful Paint | Link To Details |
---|
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
jQuery+AJAX+PHP+MySQL开发搜索无跳转无刷新的功能
关于vue中extend,mixins,extends,components,install的操作
以上がNodeJS + Lighthouse + Gulp を使用して自動 Web サイト パフォーマンス テスト ツールを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。