@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% |