Awesome

react-benchmark

Demo

A tool for benchmarking the render performance of React components.

It compiles the benchmark code into a minified production bundle using Webpack and then runs it in headless Chrome to benchmark the real production code in a real production environment.

Note: the benchmark numbers aren՚t completely accurate and should only be used relatively to compare the performance difference of code changes or different implementations.

Install

yarn global add react-benchmark
# or
npm install -g react-benchmark

Usage

Usage
  $ react-benchmark <path>

Options
  <path>          Path to a JavaScript or TypeScript file that exports the function to be benchmarked.
  --debug, -d     Run a development build instead of a production build to aid debugging.
  --devtools, -t  Run Chrome in windowed mode with the devtools open.
  --cpuThrottle=X Run Chrome with CPU throttled X times.
  --version       Prints the version.
  --help          Prints this message.

Examples
  $ react-benchmark benchmark.js

The <path> file should export a function that returns the component instance you want to benchmark. For example:

import React from 'react'
import Component from './src'

export default function () {
  return <Component hello="world" />
}

You can import anything that Webpack supports out of the box and your code will be transpiled with Babel using your local Babel config. TypeScript files are also supported out of the box.

API

react-benchmark exports a ReactBenchmark class that instantiates an event emitter with a .run() method. Calling the .run() method will start the benchmark with the provided options.

const ReactBenchmark = require('react-benchmark')
const reactBenchmark = new ReactBenchmark()

reactBenchmark.on('progress', (currentStats) => {
  console.log(currentStats)
})

const result = await reactBenchmark.run('benchmark.js')

See the CLI code for a full implementation example.

.run(filepath, options)

Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.

filepath

Type: String

Path to the benchmark file to run. See the Usage section for more details.

options

Type: Object Default: { debug: false, devtools: false, cpuThrottle: 1 }

Optional object containing additional options.

debug

Type: Boolean<br> Default: false

Run a development build instead of a production build to aid debugging.

devtools

Type: Boolean<br> Default: false

Run Chrome in windowed mode with the devtools open.

cpuThrottle

Type: number<br> Default: 1

Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.

Events

webpack

Fired when the Webpack build has started.

server

Fired when the webserver has started.

chrome

Fired when Chrome has launched.

start

Fired when the actual benchmark starts.

progress

Fired every time a benchmark cycle has been completed. Gets passed a Benchmark object with the current stats. This event will be fired multiple times per run.

console

Fired every time something is logged to Chrome՚s console. Gets passed a {type, text} object.

License

react-benchmark is released under the ISC license.