npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

anta

v0.4.0

Published

CLI tool and lib to gather app audits via [Lighthouse](https://github.com/GoogleChrome/lighthouse/).

Downloads

75

Readme

CLI tool and lib to gather app audits via Lighthouse. IN BETA.

Based on the code in pwmetrics, this repository removes features such as Upload / Command Line Chart. Thanks in addition to pwmetrics for additional work on the lighthouse basis: stripping out the perf test section separately; supporting flexible customization of audit metrics; and a single command to run multiple times.

此仓库在 pwmetrics 的代码基础上,去掉了“上传”/"命令行图表"等功能。 另外感谢 pwmetrics 在 lighthouse 的基础上额外做出的这些工作:单独剥离出了 perf 测试部分;支持灵活的定制 audit 指标;一个命令可以运行多次。

$ npm i

API

const Metrics = require('anta');

const options = {
  flags: {
    // runs: '1', // number or runs
    // expectations: false // turn on assertation metrics results against provides values
    chromeFlags: ['--headless', '--disable-gpu', '--no-sandbox'] // CentOS need it.
  }
};

> Note: on real device of Alipay APP, the options may not work!

const pwMetrics = new Metrics('http://example.com/'/*, options */);
pwMetrics.start().then((results) => {
    console.log(JSON.stringify(results.runs[0], null, 2));
  }).catch((e) => {
    console.error(e);
  });

Added umi-perf view

Use like this:

const getHtml = require('anta/recipes/umi-perf/scripts/getHtml.js');
const { getSummaryData } = require('anta/recipes/umi-perf/src/utils.js');

// reportData's format should be below
const reportData = [
  {
    name: 'index.html',
    score: '0.8333',
    resultUrl: {
      url: 'https://gw.alipayobjects.com/os/rmsportal/UnsXMxlzPUJRReyKflNJ.js'
    }
  },
  {
    name: 'index1.html',
    score: '0.9333',
    resultUrl: {
      url: 'https://gw.alipayobjects.com/os/rmsportal/UnsXMxlzPUJRReyKflNJ.js'
    }
  }
];
// appInfo's format should be below
const appInfo = {
  appName: 'yfd', userName: 'jm', version: '1.0.0', submitTime: '2018-03-21'
};

const html = getHtml(JSON.stringify(reportData), JSON.stringify(appInfo));
const summaryData = getSummaryData(reportData);
// summaryData like this
{
  fail: [
    { name: 'index.html', score: '0.8333', resultUrl: [Object] },
    { name: 'index1.html', score: '0.9333', resultUrl: [Object] }
  ],
  pass: [],
  great: [],
}

CLI Usage

$ anta <url> <flags>
$ anta --help

anta https://mobile.ant.design/kitchen-sink/

# --runs=n     Does n runs (eg. 3, 5), and reports the median run's numbers.
#              Median run selected by run with the median TTI.
anta https://mobile.ant.design/kitchen-sink/ --runs=3

# --json       Reports json details to stdout.
anta https://mobile.ant.design/kitchen-sink/ --json

# --output-path       File path to save results.
anta https://mobile.ant.design/kitchen-sink/ --json --output-path='./lh-report.json'

# --config        Provide configuration (defaults to `package.json`). See _Defining config_ below.
anta --config=anta-config.js

# --expectations  Assert metrics results against provides values.
# run anta with config in package.json
anta --expectations

All available configuration options

# run anta with config in package.json
anta --config

package.json

...
  "anta": {
    "url": "http://example.com/",
    // other configuration options
    "expectations": {
      ...
    }
  }
...

anta-config.js

module.exports = {
  url: 'http://example.com/',
  flags: { // AKA feature flags
    runs: '3', // number or runs
    // submit: true, // turn on submitting to Google Sheets
    // upload: true, // turn on uploading to Google Drive
    // view: true, // open uploaded traces to Google Drive in DevTools
    expectations: true // turn on assertation metrics results against provides values
    chromePath: '/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary' //optional path to specific Chrome location
    chromeFlags: [] // custom flags to pass to Chrome. For a full list of flags, see http://peter.sh/experiments/chromium-command-line-switches/.
    // Note: supports all flags from Lighthouse
  },
  expectations: {
    // these expectations values are examples, for your cases set your own
    // it's not required to use all metrics, you can use just a few of them
    // Read _Available metrics_ where all keys are defined
    ttfcp: {
      warn: '>=1500',
      error: '>=2000'
    },
    ttfmp: {
      warn: '>=2000',
      error: '>=3000'
    },
    fv: {
      ...
    },
    psi: {
      ...
    },
    vc85: {
      ...
    },
    vs100: {
      ...
    },
    ttfi: {
      ...
    },
    ttci: {
      ...
    }
  }
}
# run anta with config in anta-config.js
anta --expectations --config=anta-config.js

Available metrics:

  • ttfcp - First Contentful Paint

  • ttfmp - First Meaningful Paint

  • psi - Perceptual Speed Index

  • fv - First Visual Change

  • vc - Visually Complete 100%

  • ttfi - First Interactive (vBeta)

  • ttci - Time to Consistently Interactive (vBeta)

  • vc85 - Visually Complete 85%

  • dom-size - dom size

Read article Performance metrics. What’s this all about? or 前端感官性能的衡量和优化实践 which is decoding this metrics.

Recipes