Comment utiliser NodeJS + Lighthouse + Gulp pour créer un outil de test automatisé des performances de sites Web

不言

Libérer： 2018-07-13 16:46:11

original

2663 Les gens l'ont consulté

Cet article présente principalement comment utiliser NodeJS + Lighthouse + Gulp pour créer des outils de test automatisés des performances de sites Web. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Hypothèses. Vous ne savez toujours pas ce qu'est Lighthouse

Lighthouse est un outil open source appartenant à Google qui peut détecter automatiquement la qualité d'un site Web. Il possède une interface conviviale, un fonctionnement simple, des méthodes d'utilisation diverses et des perspectives complètes. utilisez-le pour tester n'importe quelle page Web, les utilisateurs ordinaires, le contrôle qualité et les développeurs peuvent démarrer rapidement.

Position de démarrage

Facteur de difficulté +1

Il existe de nombreuses façons d'utiliser Lighthouse. La plus simple consiste à utiliser les outils de développement de Chrome. Les étapes sont les suivantes :

Ouvrez le navigateur Chrome
Appuyez sur F12
Ouvrez l'onglet Audits dans la fenêtre contextuelle
Cliquez sur Effectuer un audit...Vérifiez tout
Exécuter un audit

Facteur de difficulté + 2

Vous pouvez également utiliser la ligne de commande.

Installer Node
Installer Lighthouse
npm install -g lighthouse
exécuter en ligne de commande
lighthouse <url></url>

Les deux méthodes d'utilisation ci-dessus ne font pas l'objet de cet article. Si vous souhaitez en savoir plus, vous pouvez vous référer à Run Lighthouse dans DevTools

Facteur de difficulté +3.

Depuis que j'apprends NodeJS récemment, j'ai décidé d'utiliser Node 8 + Gulp pour exécuter Lighthouse. Afin d'améliorer la précision des résultats, j'ai exécuté Lighthouse 10 fois pour chaque tâche et je ne me souciais que du <.> millisecondes dans l'indicateur de résultat, et finalement pris La moyenne de 10 fois Par souci de visualisation et de lisibilité, le résultat final est affiché sous forme de page web L'utilisateur peut voir le nombre de millisecondes

après. chaque exécution de Lighthouse sur la page Web. La valeur moyenne peut également être vue si l'utilisateur Si vous êtes intéressé par les détails d'une certaine exécution, vous pouvez cliquer sur le lien pour la voir. Le résultat final ressemble à ceci : first-meaningful-paintfirst-meaningful-paint

Comment utiliser NodeJS + Lighthouse + Gulp pour créer un outil de test automatisé des performances de sites Web

Comment utiliser NodeJS + Lighthouse + Gulp pour créer un outil de test automatisé des performances de sites Web Configuration de l'environnement

Installer le nœud 8

Installer les dépendances Package

Configuration

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

Copier après la connexion

Créez le fichier de configuration Lighthouse

dans le répertoire racine du projet. Ici, nous utilisons tous la configuration par défaut. Pour utiliser la configuration par défaut, vous devez la déclarer. dans le fichier de configuration

. lighthouse-config.jsextends: 'lighthouse:default'

Si les lecteurs ont besoin de connaître des options de configuration plus détaillées, veuillez vous référer à :

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

Copier après la connexion

dans le projet Créez

dans le répertoire racine et introduisez d'abord tous les outils dépendants :

gulpfile.js

Avant de commencer à utiliser Lighthouse, créez d'abord une méthode pour écrire des fichiers pour enfin générer un fichier de rapport personnalisé :

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');

Copier après la connexion

Avant d'appeler Lighthouse, nous devons d'abord démarrer une instance Chrome et fournir le numéro de port à Lighthouse.

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

Copier après la connexion

signifie ne pas ouvrir la fenêtre du navigateur.

--headless

Après le démarrage de l'instance Chrome, nous pouvons appeler Lighthouse. Lors de l'appel, nous devons fournir le site Web dont les performances doivent être testées, les paramètres et la configuration créée précédemment. et la méthode de démarrage (informations telles que s'il est sans tête ou non).

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

Copier après la connexion

Le résultat renvoyé par Lighthouse est un objet json contenant les résultats des tests de performances, la version finale des paramètres de configuration, le regroupement des indicateurs et d'autres informations. Les lecteurs peuvent se référer à Comprendre les résultats pour une compréhension plus approfondie.

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

Copier après la connexion

Puisque nous devons utiliser le modèle officiel Lighthouse pour générer le rapport, nous appelons la méthode officielle. Notez que le premier paramètre est passé dans

, et le deuxième paramètre est déclaré pour générer un rapport html (rapports en csv. et d'autres formats peuvent également être générés) ).
result.lhr

Ensuite, nous écrivons une fonction qui regroupe les méthodes ci-dessus. Tout d'abord, démarrez une instance Chrome, puis transmettez certains paramètres de l'instance Chrome à Lighthouse et utilisez les résultats exécutés par Lighthouse pour générer un rapport. . Et écrivez dans le fichier HTML, le fichier HTML doit avoir un horodatage et un ordre d'exécution comme identification unique. La méthode

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

Copier après la connexion

renvoie

dans le résultat (c'est l'indicateur qui nous préoccupe le plus. Les lecteurs peuvent le remplacer selon leurs propres besoins. Pour des indicateurs spécifiques, veuillez vous référer à Lighthouse). start

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

Copier après la connexion

下面，我们可以正式开始写一个 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

Copier après la connexion

万事大吉。
附上汇总界面的模板源码：

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>

Copier après la connexion