@flive/react-benchmark

A tool for benchmarking the render performance of Flive 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.

To have a reliable test, run it without any heavy process that could parasitize the results.

Usage

const pkg = require('../package.json');

const Benchmark = new ReactBenchmark({ pkg });

Benchmark.render([
  {
    name: 'My component description',
    filepath: path.join(path.resolve(), 'benchmark/tests/MyComponent.js')
  },
  ...
]);

Output

Table of component tests

Component name	Test	Test without styled primitives	Gap
My component 1 description	98.75 ops/sec ±16.59% (43 runs sampled)	136 ops/sec ±1.84% (42 runs sampled)	27.56%
My component 2 description	22.91 ops/sec ±22.95% (37 runs sampled)	44.52 ops/sec ±5.72% (38 runs sampled)	48.55%