Adding in React + Redux Performance monitoring

- react-addons-perf
- redux-perf middleware
- React perf widget for !production environments
- React perf in the assinged to window in !production environments
- React perf in the assinged to window in !production environments

Update NODE to NODE_ENV

Adding in React + Redux Performance monitoring
This commit is contained in:
Alex Windett 2017-03-27 14:20:48 +01:00 committed by Judit Greskovits
parent 97a4537330
commit 52117a19e2
6 changed files with 126 additions and 14 deletions

View File

@ -97,9 +97,12 @@
"node-hook": "^0.4.0", "node-hook": "^0.4.0",
"nyc": "^10.1.2", "nyc": "^10.1.2",
"pre-commit": "^1.2.2", "pre-commit": "^1.2.2",
"react-addons-perf": "^15.4.2",
"react-addons-test-utils": "^15.4.2", "react-addons-test-utils": "^15.4.2",
"react-dev-utils": "^0.5.1", "react-dev-utils": "^0.5.1",
"react-perf": "^1.0.1",
"redux-ava": "^2.2.0", "redux-ava": "^2.2.0",
"redux-perf-middleware": "^1.2.2",
"require-hacker": "^2.1.4", "require-hacker": "^2.1.4",
"simple-mock": "^0.7.3", "simple-mock": "^0.7.3",
"style-loader": "^0.13.2", "style-loader": "^0.13.2",

View File

@ -10,6 +10,7 @@ import Home from '@containers/home';
import NotFound from '@containers/not-found'; import NotFound from '@containers/not-found';
import Nav from '@components/navigation'; import Nav from '@components/navigation';
import OrgNavigation from '@components/navigation/org'; import OrgNavigation from '@components/navigation/org';
import PerfProfiler from '../perf-profiler';
import React from 'react'; import React from 'react';
const App = connect()(React.createClass({ const App = connect()(React.createClass({
@ -49,17 +50,21 @@ const App = connect()(React.createClass({
})); }));
export default (props) => ( export default (props) => (
<App {...props}> <div>
<Header /> { process.env.NODE_ENV !== 'production' && <PerfProfiler /> }
<Nav name='application-org-navigation'>
<OrgNavigation /> <App {...props}>
</Nav> <Header />
<Article name='application-content'> <Nav name='application-org-navigation'>
<Switch> <OrgNavigation />
<Route component={Home} path='/:org?/:section?' /> </Nav>
<Route component={NotFound} /> <Article name='application-content'>
</Switch> <Switch>
</Article> <Route component={Home} path='/:org?/:section?' />
<Footer name='application-footer' /> <Route component={NotFound} />
</App> </Switch>
</Article>
<Footer name='application-footer' />
</App>
</div>
); );

View File

@ -5,6 +5,7 @@ import qs from 'querystring';
import a11y from 'react-a11y'; import a11y from 'react-a11y';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import React from 'react'; import React from 'react';
import Perf from 'react-addons-perf';
import App from '@containers/app'; import App from '@containers/app';
import MockStateTesting from './mock-state-testing.json'; import MockStateTesting from './mock-state-testing.json';
@ -17,6 +18,8 @@ if (process.env.NODE_ENV !== 'production') {
a11y(React, { a11y(React, {
ReactDOM ReactDOM
}); });
window.Perf = Perf;
} }
const states = { const states = {

View File

@ -0,0 +1,78 @@
import React from 'react';
import Perf from 'react-addons-perf';
import styled from 'styled-components';
const Profiler = styled.div`
display: flex;
flex-direction: column;
position: absolute;
right: 50px;
top: 20px;
padding: 10px;
background: #bada55;
border: 2px solid black;
text-align: center;
& > h1 {
font-size: 1.5em;
}
& > h1 {
font-size: 1.5em;
}
`;
export default class PerfProfiler extends React.Component {
constructor(props) {
super(props);
this.state = {
started: false
};
}
handleToggle = () => {
const {
started
} = this.state;
started ? Perf.stop() : Perf.start();
this.setState({
started: !started
});
}
handlePrintWasted = () => {
const lastMeasurements = Perf.getLastMeasurements();
Perf.printWasted(lastMeasurements);
}
handlePrintOperations = () => {
const lastMeasurements = Perf.getLastMeasurements();
Perf.printOperations(lastMeasurements);
}
render() {
const {
started
} = this.state;
return (
<Profiler>
<h1>Performance Profiler</h1>
<button onClick={this.handleToggle}>
{started ? 'Stop' : 'Start'}
</button>
<button onClick={this.handlePrintWasted}>
Print Wasted
</button>
<button onClick={this.handlePrintOperations}>
Print Operations
</button>
</Profiler>
);
}
}

View File

@ -3,6 +3,7 @@ import { enableBatching } from 'redux-batched-actions';
import promiseMiddleware from 'redux-promise-middleware'; import promiseMiddleware from 'redux-promise-middleware';
import { createStore, compose, applyMiddleware } from 'redux'; import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import perflogger from 'redux-perf-middleware';
import createReducer from '@state/reducers'; import createReducer from '@state/reducers';
@ -16,7 +17,8 @@ export default (state = Object.freeze({})) => {
applyMiddleware( applyMiddleware(
createLogger(), createLogger(),
promiseMiddleware(), promiseMiddleware(),
thunk thunk,
process.env.NODE_ENV !== 'production' && perflogger
) )
) )
); );

View File

@ -5825,6 +5825,10 @@ prepend-http@^1.0.0, prepend-http@^1.0.1:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
present@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/present/-/present-1.0.0.tgz#6d2f865be7a96885118f4660e83e2161fb71cf2b"
preserve@^0.2.0: preserve@^0.2.0:
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b" resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
@ -5991,6 +5995,13 @@ react-a11y@^0.3.3:
dependencies: dependencies:
object.assign "^4.0.3" object.assign "^4.0.3"
react-addons-perf:
version "15.4.2"
resolved "https://registry.yarnpkg.com/react-addons-perf/-/react-addons-perf-15.4.2.tgz#110bdcf5c459c4f77cb85ed634bcd3397536383b"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"
react-addons-test-utils@^15.4.2: react-addons-test-utils@^15.4.2:
version "15.4.2" version "15.4.2"
resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2" resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.4.2.tgz#93bcaa718fcae7360d42e8fb1c09756cc36302a2"
@ -6046,6 +6057,10 @@ react-intl@^2.2.3:
intl-relativeformat "^1.3.0" intl-relativeformat "^1.3.0"
invariant "^2.1.1" invariant "^2.1.1"
react-perf:
version "1.0.1"
resolved "https://registry.yarnpkg.com/react-perf/-/react-perf-1.0.1.tgz#11c9ef3330b8f7d9431150d3dfc9dd7d1a781a3e"
react-redux@^5.0.3: react-redux@^5.0.3:
version "5.0.3" version "5.0.3"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.3.tgz#86c3b68d56e74294a42e2a740ab66117ef6c019f" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.3.tgz#86c3b68d56e74294a42e2a740ab66117ef6c019f"
@ -6270,6 +6285,12 @@ redux-logger@^2.8.1:
dependencies: dependencies:
deep-diff "0.3.4" deep-diff "0.3.4"
redux-perf-middleware:
version "1.2.2"
resolved "https://registry.yarnpkg.com/redux-perf-middleware/-/redux-perf-middleware-1.2.2.tgz#099b4ca38d1f0a3beb77b66617d196ed0ef2f514"
dependencies:
present "^1.0.0"
redux-promise-middleware@^4.2.0: redux-promise-middleware@^4.2.0:
version "4.2.0" version "4.2.0"
resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-4.2.0.tgz#052a7ac2df0e3468e196279f14bdefe711d10cac" resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-4.2.0.tgz#052a7ac2df0e3468e196279f14bdefe711d10cac"