wwwillchen / react-perf-tool

Chrome DevTools extension for analyzing performance on React apps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Perf Tool

A Chrome DevTools extension to analyze the performance of your React app.

After reading React's 15.4 release notes, I learned that React already performance instrumentation using the window.performance API. This tool essentially provides a different view on the performance data already collected by React.

These are the types of questions that can be answered by this tool:

  • Which components are taking the longest time on load?
    • Insight: Defer loading certain components (e.g. don't render content below the fold right away).
  • What's taking the most time after certain user actions (e.g. scrolling a list-type view, clicking on a new route)?
    • Insight: Identify which components to write shouldComponentUpdate logic for.
  • How many component instances are there at a given moment?
    • Insight: Unmount unused component instances

Note: This is a proof-of-concept and may have bugs.

Demo

react-perf-tool-smaller-2

Running it locally

  1. Install modules: yarn / npm install (devDependency used for type checking)
  2. Compile Typescript file: yarn ts
  3. Go to chrome://extensions - click "Load unpacked extensions" - select react-perf-tool/extension
  4. We'll use sound-redux a nice open-source SoundCloud client written in React.
  • Clone my forked version of sound-redux (only recent versions of React have the performance instrumentation): git clone https://github.com/wwwillchen/sound-redux
  • Install modules: yarn / npm install
  • You'll need to modify one line in React so the performance measurements can be captured by the extension: In node_modules/react-dom/lib/ReactDebugTool.js: comment out the line: performance.clearMeasures(measurementName);
  • Start the dev server for sound-redux: yarn start
  1. Go to http://localhost:8080/?react_perf (you need the query param for React to measure performance timings)
  2. Open Chrome DevTools and select the "React Perf" tab.

About

Chrome DevTools extension for analyzing performance on React apps

License:Apache License 2.0


Languages

Language:TypeScript 95.5%Language:JavaScript 2.8%Language:HTML 1.8%