gatsby-performance-budget/src/helpers.js

A package to check performance budget against the page weight of every page

const { readdirSync } = require("fs");
const { resolve } = require("path");
const lighthouse = require("lighthouse");
const chromeLauncher = require("chrome-launcher");
const prettyBytes = require("pretty-bytes");
const chalk = require("chalk");
const ui = require("cliui")();
const setWidth = require("fixed-width-string");

const getPages = dir => [
  dir,
  ...readdirSync(dir, { withFileTypes: true }).flatMap(dirent =>
    dirent.isDirectory() &&
    dirent.name !== "static" &&
    dirent.name !== "page-data" &&
    dirent.name !== "icons"
      ? getPages(resolve(dir, dirent.name))
      : []
  )
];

const formatReport = (slug, data) => {
  let result = {};
  result.Page = slug;
  data.forEach(item => {
    let size = prettyBytes(item.size);
    let excess =
      item.sizeOverBudget === undefined
        ? ""
        : `(${chalk.red(`+${prettyBytes(item.sizeOverBudget)}`)})`;

    result[item.label] = `${size} ${excess}`;
  });

  return result;
};

const getReport = async (slugs, options, config) => {
  const budget = config.settings.budgets;
  const resources = budget[0].resourceSizes.map(
    i => i.resourceType.charAt(0).toUpperCase() + i.resourceType.slice(1)
  );
  const headers = resources.map(i => ({ text: i, width: 20 }));

  // get report
  const chrome = await chromeLauncher.launch({
    chromeFlags: options.chromeFlags
  });
  options.port = chrome.port;

  ui.div({ text: "Page", width: 50 }, ...headers);
  console.log(ui.toString());

  for (let slug of slugs) {
    const { lhr } = await lighthouse(
      `http://localhost:9000${slug}`,
      options,
      config
    );
    const noData = lhr.audits["performance-budget"].details === undefined;

    if (!noData) {
      const report = formatReport(
        slug,
        lhr.audits["performance-budget"].details.items
      );

      const page = slug === '' ? '/' : slug;  

      const sortedReport = resources.map(i => setWidth(report[i], 20));
      const output = [setWidth(page, 40), ...sortedReport].join("");

      console.log(output);
    }
  }
  await chrome.kill();
};

exports.getPages = getPages;
exports.getReport = getReport;