Cómo utilizar NodeJS Lighthouse Gulp para crear una herramienta automatizada de prueba de rendimiento de sitios web
Suponiendo que usted. Todavía no sé qué es Lighthouse, una herramienta automatizada de detección de calidad de sitios web de código abierto lanzada por Google. La empresa es una herramienta automatizada de prueba de calidad de sitios web de código abierto con una interfaz amigable, operación simple, diversos métodos de uso y perspectivas integrales. Puede usarse para probar cualquier página web, y los usuarios comunes, el control de calidad y los desarrolladores pueden comenzar rápidamente. .
Hay muchas formas de utilizar Lighthouse, la más sencilla de las cuales es utilizar las herramientas de desarrollo del navegador Chrome, de la siguiente manera:
Abra el navegador Chrome
Presione F12
Abra la pestaña Auditoría en la ventana emergente
Haga clic en Realizar auditoría...Seleccionar todo
Ejecutar auditoría
Nivel de dificultad 2 También puedes utilizar la línea de comando.
Instalar Nodo
Instalar lighthouse npm install -g lighthouse
Ejecutar lighthouse lt;
Ninguno de los dos usos anteriores es; incluido en este artículo Si desea obtener más información al respecto, consulte "Ejecutar Lighthouse en DevTools"
Nivel de dificultad 3 Como he estado aprendiendo NodeJS recientemente, decidí usar Node 8 Gulp para ejecutar faro. Para mejorar la precisión de los resultados, ejecuté Beacon 10 veces para cada tarea y solo me preocupé por los primeros milisegundos significativos en las métricas resultantes, luego tomé el promedio de las 10 ejecuciones. Para lograr visualización y legibilidad, los resultados finales se muestran en forma de página web. Los usuarios pueden ver los primeros milisegundos de extracción significativos y el valor promedio de cada ejecución del faro si están interesados en los detalles de una determinada ejecución. , también pueden hacer clic en el enlace. Si está interesado en los detalles de una determinada ejecución, puede hacer clic en el enlace para verlo. El resultado final es el siguiente:
Configuración de entorno para instalar Node 8
Instalar dependencias
npm i lighthouse --save-dev
npm i chrome-launcher --save-dev
npm i fs-extra -- save-dev
npm i gulp ---save-dev configuración crea un archivo de configuración de Lighthouse en el directorio raíz del proyecto lighthouse-config. Cree el archivo de configuración de Lighthouse lighthouse-config.js en el directorio raíz del proyecto, donde usaremos la configuración predeterminada, que requiere declarar la extensión: 'lighthouse: default'.default'.
module.exports = {
extends: 'lighthouse: default'
} Para obtener una descripción más detallada de las opciones de configuración, consulte:
Lighthouse La mayor parte está relacionada con la línea de comando, Node también puede usar parámetros de línea de comando
La limitación está relacionada con la simulación de red
Parámetros de configuración predeterminados específicos de la configuración predeterminada
La prueba de página web simula diferentes velocidades de red
Simula diferentes dispositivos
La codificación crea un archivo gulp en el directorio raíz del proyecto. Crea un archivo gulp en el directorio raíz del proyecto:
const gulp = require('gulp');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
p>
const impresora = require('lighthouse/lighthouse-cli/printer');
const Reporter = require(' faro/lighthouse-core/report/report -generador');
const Reporter = require('faro/lighthouse-core/report/report-generator');
p>
const fs = require(' fs-extra');
const config = require('.lighthouse-config.js'); antes de comenzar a usar el faro, primero creamos un método de escritura que se utiliza para generar. un archivo de informe personalizado al final:
función asíncrona escribir(archivo, informe) {
intente {
aguardar archivo de salida(archivo, informe);
} catch (Error e) {
console.log("error al escribir el informe ", e);
}
}
} Antes de llamar a Lighthouse, debemos iniciar una instancia del navegador Chrome y proporcionar el número de puerto a Lighthouse. --headless significa que la ventana del navegador no está abierta.
función asíncrona launchChrome() {
dejar que chrome;
probar {
chrome = esperar chromeLauncher.launch({
chromeFlags: [
"--disable-gpu",
"--no-sandbox",
"--headless"
],
enableExtensions: verdadero,
logLevel: "error"
});
consola. log(chrome.port)
return {
puerto: chrome.port,
chromeFlags: [
"--headless"
],
logLevel: "error"
}
}
} captura (e) {
console.log("Error al iniciar Chrome ", e);
}
}
} Después de que la instancia de Chrome sea iniciado, podemos llamar a Lighthouse, que incluirá el sitio web para realizar pruebas de rendimiento, los parámetros y la configuración creada en la sección anterior, que contiene información sobre el puerto de inicio de Chrome, el modo de inicio (sin cabeza o sin cabeza), etc.
Lighthouse se llama con los siguientes parámetros.
función asíncrona lighthouseRunner(opt) {
intentar {
return await lighthouse("", opt, config);
} catch (e) {
console.log("Error al ejecutar lighthouse");
}
}El resultado devuelto por Lighthouse es un objeto json, donde Contiene resultados de pruebas de rendimiento, parámetros de configuración de la versión final, agrupación de indicadores, etc. Se remite a los lectores al artículo "Comprensión de los resultados" para obtener una comprensión más profunda.
Dado que necesitamos usar la plantilla oficial de Lighthouse para generar el informe, llamamos al método oficial. Tenga en cuenta que el primer parámetro se pasa a result.lhr y el segundo parámetro se declara para generarlo. el informe html (también se puede generar en formato csv).
función genReport(resultado) {
return Reporter.generateReport(result.lhr, 'html');
} Así es como concatenamos los métodos anteriores Arriba, inicie una instancia de Chrome, luego pase algunos parámetros de la instancia de Chrome a Lighthouse y use los resultados de la ejecución de Lighthouse para generar un informe y escribirlo en un archivo html, que debe identificarse de forma única mediante la marca de tiempo y el orden de ejecución. El método start devuelve el primer valor significativo del resultado (la métrica que más nos importa). El método de inicio devolverá la primera imagen significativa en los resultados (este es el indicador que más nos preocupa, los lectores pueden reemplazarlo según sus propias preferencias, consulte el faro para conocer indicadores específicos).
función asíncrona ejecutar(marca de tiempo, num) {
let chromeOpt = await launchChrome();
let resultado = await lighthouseRunner(chromeOpt);
>let report = genReport(resultado);
await Printer.write(report, 'html', `.../cases/lighthouse-report@${timestamp}- ${num}.html`);
return result.lhr.audits['first-meaningful-paint'].rawValue;
await chrome.kill(); p>
} Así es como comenzamos oficialmente a escribir tareas gulp. Primero, obtenemos la marca de tiempo actual (que se usará para nombrar el informe final), luego declaramos una matriz que contiene los primeros milisegundos de pintura significativa producidos cada vez que se ejecuta Lighthouse, hasta 10 veces. Laihuisi utilizó un archivo de plantilla creado de antemano para generar un informe resumido basado en los resultados de estos 10 veces. En el informe, el autor utilizó la función de herramienta disponible públicamente de Laihuisi para el reemplazo de cadenas.
gulp.task('start', async function() {
let timestamp = Date.now();
let gastado = [];
for(let i=0; ilt; 5; i) {
gastado.push(await run(timestamp, i));
}
let template = await fs.readFileSync('./summary/template/template.html', 'utf-8');
let resumen = Reporter.replaceStrings(template, [{
buscar: 'TIME_SPENT',
reemplazar: JSON.stringify(gastado)
}, {
buscar: TIMESTAMP',
reemplazo: marca de tiempo
}]);
escribir(`./summary/report/summary@${timestamp}.html`, resumen)
}) Al final del día, ejecuta:
gulp para comenzar todo.
Adjunto el código fuente de la plantilla de pantalla de resumen:
lt;! doctype htmlgt;
lt; html lang="en"gt;
lt;
lt; meta name="viewport" content="ancho=ancho del dispositivo, escala inicial=1, escala mínima=1"gt;
lt; Informe resumidolt;/titlegt;
lt;stylegt;
body {
font-family: sans-serif
}
tabla {
margen: auto
}
tr {
borde: 1px gris sólido;
}
h1 {
alineación de texto: centro
margen: 30px automático 50px automático
}
lt;/stylegt;
lt;/headgt;
lt;bodygt;
lt;tablegt;
lt;h1gt;Informe resumido de desempeñolt;/h1gt;
lt;trgt;
lt;thgt;
Número de caso.
lt;/thgt;
lt;thgt;
lt;thgt;
Primera pintura significativa
p>lt;/thgt;
lt./tablegt;
lt;scriptgt;
dejar tiempo gastado = TIME_SPENT;
let timestamp = TIMESTAMP;
let tableBody = document.getElementById("tableBody");
let content = '';
for(let i =0 ; i lt; tiempo gastado.length; i ) {
contenido = `lt; tr style="border: 1px solid grey"gt;
p>
${i 1}
lt;/tdgt;
lt;tdgt;
${timespent[i]}
lt;/tdgt;
lt;tdgt;
lt;a href="./.../cases/lighthouse-report@${ marca de tiempo}- ${i}.html"gt;Ver detalleslt;/agt;
lt;/tdgt;
lt;/trgt;`
}
let total = timespent.reduce((i, j) =gt; {
return i j;
})
let count = timespent.filter(function(i) { return i}).length
content = `lt;trgt;
lt;tdgt;
AVG
p>lt;/tdgt;
lt;tdgt;
lt;tdgt;
${total/count}
lt;/tdgt;
lt;/trgt;`
tableBody.innerHTML = contenido;
lt;/scriptgt;
lt;/bodygt;
lt;/htmlgt;