{"id":13679547,"url":"https://github.com/Rowno/react-benchmark","last_synced_at":"2025-04-29T19:31:24.170Z","repository":{"id":28269731,"uuid":"117788936","full_name":"Rowno/react-benchmark","owner":"Rowno","description":"A tool for benchmarking the render performance of React components","archived":false,"fork":false,"pushed_at":"2023-03-15T04:09:12.000Z","size":1875,"stargazers_count":113,"open_issues_count":8,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T03:36:37.149Z","etag":null,"topics":["babel","benchmark","chrome","command-line","command-line-tool","javascript","react","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rowno.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-17T05:31:17.000Z","updated_at":"2025-03-11T05:57:05.000Z","dependencies_parsed_at":"2024-01-13T17:11:28.953Z","dependency_job_id":"dedb0e20-01e6-402b-b8bb-b5730aa2a2d5","html_url":"https://github.com/Rowno/react-benchmark","commit_stats":{"total_commits":114,"total_committers":8,"mean_commits":14.25,"dds":0.368421052631579,"last_synced_commit":"b9cc34860f1b4730b2bfe77cae2cb174379340e0"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rowno%2Freact-benchmark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rowno%2Freact-benchmark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rowno%2Freact-benchmark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rowno%2Freact-benchmark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rowno","download_url":"https://codeload.github.com/Rowno/react-benchmark/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251569548,"owners_count":21610575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","benchmark","chrome","command-line","command-line-tool","javascript","react","typescript","webpack"],"created_at":"2024-08-02T13:01:06.699Z","updated_at":"2025-04-29T19:31:23.620Z","avatar_url":"https://github.com/Rowno.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-benchmark\n\n![Demo](demo.gif)\n\nA tool for benchmarking the render performance of React components.\n\nIt 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.\n\n_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._\n\n## Install\n\n```sh\nyarn global add react-benchmark\n# or\nnpm install -g react-benchmark\n```\n\n## Usage\n\n```\nUsage\n  $ react-benchmark \u003cpath\u003e\n\nOptions\n  \u003cpath\u003e          Path to a JavaScript or TypeScript file that exports the function to be benchmarked.\n  --debug, -d     Run a development build instead of a production build to aid debugging.\n  --devtools, -t  Run Chrome in windowed mode with the devtools open.\n  --cpuThrottle=X Run Chrome with CPU throttled X times.\n  --version       Prints the version.\n  --help          Prints this message.\n\nExamples\n  $ react-benchmark benchmark.js\n```\n\nThe `\u003cpath\u003e` file should export a function that returns the component instance you want to benchmark. For example:\n\n```js\nimport React from 'react'\nimport Component from './src'\n\nexport default function () {\n  return \u003cComponent hello=\"world\" /\u003e\n}\n```\n\nYou 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.\n\n## API\n\n`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.\n\n```js\nconst ReactBenchmark = require('react-benchmark')\nconst reactBenchmark = new ReactBenchmark()\n\nreactBenchmark.on('progress', (currentStats) =\u003e {\n  console.log(currentStats)\n})\n\nconst result = await reactBenchmark.run('benchmark.js')\n```\n\nSee the [CLI code](lib/cli.js) for a full implementation example.\n\n### .run(filepath, options)\n\nStarts the benchmark. Returns a Promise that will resolve to a [Benchmark](https://benchmarkjs.com/docs) object containing the stats once the benchmark has been completed.\n\n#### filepath\n\nType: `String`\n\nPath to the benchmark file to run. See the [Usage](#usage) section for more details.\n\n#### options\n\nType: `Object`\nDefault: `{ debug: false, devtools: false, cpuThrottle: 1 }`\n\nOptional object containing additional options.\n\n##### debug\n\nType: `Boolean`\u003cbr\u003e\nDefault: `false`\n\nRun a development build instead of a production build to aid debugging.\n\n##### devtools\n\nType: `Boolean`\u003cbr\u003e\nDefault: `false`\n\nRun Chrome in windowed mode with the devtools open.\n\n##### cpuThrottle\n\nType: `number`\u003cbr\u003e\nDefault: `1`\n\nRun Chrome with CPU throttled X times. Useful to receive more precise results between runs.\n\n### Events\n\n#### webpack\n\nFired when the Webpack build has started.\n\n#### server\n\nFired when the webserver has started.\n\n#### chrome\n\nFired when Chrome has launched.\n\n#### start\n\nFired when the actual benchmark starts.\n\n#### progress\n\nFired every time a benchmark cycle has been completed. Gets passed a [Benchmark](https://benchmarkjs.com/docs) object with the current stats. This event will be fired multiple times per run.\n\n#### console\n\nFired every time something is logged to Chrome՚s console. Gets passed a `{type, text}` object.\n\n## License\n\nreact-benchmark is released under the ISC license.\n\nCopyright © 2018, Roland Warmerdam.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRowno%2Freact-benchmark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRowno%2Freact-benchmark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRowno%2Freact-benchmark/lists"}