Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
@parca/react-benchmark
Advanced tools
Readme
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.
yarn global add react-benchmark
# or
npm install -g react-benchmark
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.
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.
Starts the benchmark. Returns a Promise that will resolve to a Benchmark object containing the stats once the benchmark has been completed.
Type: String
Path to the benchmark file to run. See the Usage section for more details.
Type: Object
Default: { debug: false, devtools: false, cpuThrottle: 1 }
Optional object containing additional options.
Type: Boolean
Default: false
Run a development build instead of a production build to aid debugging.
Type: Boolean
Default: false
Run Chrome in windowed mode with the devtools open.
Type: number
Default: 1
Run Chrome with CPU throttled X times. Useful to receive more precise results between runs.
Fired when the Webpack build has started.
Fired when the webserver has started.
Fired when Chrome has launched.
Fired when the actual benchmark starts.
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.
Fired every time something is logged to Chrome՚s console. Gets passed a {type, text}
object.
react-benchmark is released under the ISC license.
Copyright © 2018, Roland Warmerdam.
FAQs
A tool for benchmarking the render performance of React components.
The npm package @parca/react-benchmark receives a total of 560 weekly downloads. As such, @parca/react-benchmark popularity was classified as not popular.
We found that @parca/react-benchmark demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.