Создание собственных пакетов

Для начала необходимо установить Lighthouse как npm-пакет. Это позволяет интегрировать его функционал в проекты на Node.js и использовать программно, а не через Chrome DevTools.

npm install -g lighthouse

Либо локально для проекта:

npm install --save-dev lighthouse

После установки доступна CLI-команда lighthouse, а также возможность импортировать модуль в Node.js скрипты через require или import.

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

Программный запуск Lighthouse

Программное использование подразумевает запуск Chrome с удаленным дебагging-портом и передачу этого подключения в Lighthouse:

async function runLighthouse(url, opts, config) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  opts.port = chrome.port;

  const result = await lighthouse(url, opts, config);
  await chrome.kill();
  return result.lhr;
}

Ключевой момент — передача opts.port, чтобы Lighthouse мог подключиться к запущенному экземпляру Chrome.

Создание собственного пакета

Для создания собственного npm-пакета, использующего Lighthouse, необходимо:

  1. Инициализировать проект:
npm init -y
  1. Добавить зависимости:
npm install lighthouse chrome-launcher
  1. Создать главный модуль, например index.js, с программным вызовом Lighthouse, обработкой отчёта и экспортом функций:
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function analyzePage(url) {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {port: chrome.port, output: 'json'};
  const runnerResult = await lighthouse(url, options);
  
  await chrome.kill();
  return runnerResult.lhr;
}

module.exports = { analyzePage };

Настройка конфигурации

Lighthouse поддерживает кастомные конфигурации для аудитов, категорий и настроек производительности. Конфиг может быть объектом Jav * aScript:

const customConfig = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    throttling: {
      rttMs: 150,
      throughputKbps: 1638,
      cpuSlowdownMultiplier: 4,
    }
  }
};

Передача конфига в вызов:

const result = await lighthouse(url, options, customConfig);

Генерация отчётов

Отчёты могут быть в формате json, html или csv. В программном режиме удобнее работать с JSON и затем преобразовывать его для визуализации:

const fs = require('fs');

fs.writeFileSync('report.json', JSON.stringify(result, null, 2));

Для HTML-отчёта:

fs.writeFileSync('report.html', runnerResult.report[0]);

Публикация пакета

Чтобы пакет стал доступен другим проектам:

  1. Убедиться, что package.json корректно заполнен: имя, версия, main-модуль, скрипты.
  2. Добавить .npmignore, если есть файлы, не предназначенные для публикации.
  3. Авторизоваться в npm и опубликовать:
npm login
npm publish

После этого пакет можно устанавливать через:

npm install имя_пакета

Продвинутая интеграция

Собственные пакеты на основе Lighthouse можно расширять:

  • Автоматизация аудитов: запуск анализов на нескольких страницах с параллельной обработкой.
  • Сбор метрик: создание собственных индикаторов на основе результатов Lighthouse.
  • Интеграция с CI/CD: автоматическая проверка производительности и доступности при каждом деплое.
  • Кастомизация категорий: добавление пользовательских аудитов и изменение веса существующих.

Пример асинхронного запуска на нескольких URL:

async function analyzeMultiplePages(urls) {
  return Promise.all(urls.map(url => analyzePage(url)));
}

Работа с пользовательскими аудитами

Lighthouse позволяет создавать свои аудиты, расширяя возможности оценки страниц:

class CustomAudit extends lighthouse.Audit {
  static get meta() {
    return {
      id: 'custom-audit',
      title: 'Проверка кастомного условия',
      description: 'Проверяет наличие определенного элемента на странице',
      requiredArtifacts: ['DOM']
    };
  }

  static audit(artifacts) {
    const elementExists = artifacts.DOM.querySelector('#custom-element') !== null;
    return {
      score: elementExists ? 1 : 0
    };
  }
}

Для подключения пользовательского аудита необходимо указать его в конфигурации:

const config = {
  extends: 'lighthouse:default',
  audits: [CustomAudit]
};

Обработка результатов

Lighthouse возвращает структуру с метриками и деталями по каждой категории:

  • categories.performance.score — оценка производительности.
  • audits['first-contentful-paint'].displayValue — значение ключевой метрики.
  • audits содержит подробные данные по каждому аудиту.

Для интеграции в пакет часто создают функцию, которая агрегирует метрики и возвращает только необходимые значения:

function extractMetrics(lhr) {
  return {
    performance: lhr.categories.performance.score,
    accessibility: lhr.categories.accessibility.score,
    firstContentfulPaint: lhr.audits['first-contentful-paint'].displayValue
  };
}

Это позволяет разработчикам, использующим пакет, получать компактный и удобный результат без разбора полного отчёта.

Оглавление