mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
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
Judit Greskovits
parent
97a4537330
commit
52117a19e2
@ -97,9 +97,12 @@
|
||||
"node-hook": "^0.4.0",
|
||||
"nyc": "^10.1.2",
|
||||
"pre-commit": "^1.2.2",
|
||||
"react-addons-perf": "^15.4.2",
|
||||
"react-addons-test-utils": "^15.4.2",
|
||||
"react-dev-utils": "^0.5.1",
|
||||
"react-perf": "^1.0.1",
|
||||
"redux-ava": "^2.2.0",
|
||||
"redux-perf-middleware": "^1.2.2",
|
||||
"require-hacker": "^2.1.4",
|
||||
"simple-mock": "^0.7.3",
|
||||
"style-loader": "^0.13.2",
|
||||
|
||||
@ -10,6 +10,7 @@ import Home from '@containers/home';
|
||||
import NotFound from '@containers/not-found';
|
||||
import Nav from '@components/navigation';
|
||||
import OrgNavigation from '@components/navigation/org';
|
||||
import PerfProfiler from '../perf-profiler';
|
||||
import React from 'react';
|
||||
|
||||
const App = connect()(React.createClass({
|
||||
@ -49,17 +50,21 @@ const App = connect()(React.createClass({
|
||||
}));
|
||||
|
||||
export default (props) => (
|
||||
<App {...props}>
|
||||
<Header />
|
||||
<Nav name='application-org-navigation'>
|
||||
<OrgNavigation />
|
||||
</Nav>
|
||||
<Article name='application-content'>
|
||||
<Switch>
|
||||
<Route component={Home} path='/:org?/:section?' />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</Article>
|
||||
<Footer name='application-footer' />
|
||||
</App>
|
||||
<div>
|
||||
{ process.env.NODE_ENV !== 'production' && <PerfProfiler /> }
|
||||
|
||||
<App {...props}>
|
||||
<Header />
|
||||
<Nav name='application-org-navigation'>
|
||||
<OrgNavigation />
|
||||
</Nav>
|
||||
<Article name='application-content'>
|
||||
<Switch>
|
||||
<Route component={Home} path='/:org?/:section?' />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</Article>
|
||||
<Footer name='application-footer' />
|
||||
</App>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -5,6 +5,7 @@ import qs from 'querystring';
|
||||
import a11y from 'react-a11y';
|
||||
import ReactDOM from 'react-dom';
|
||||
import React from 'react';
|
||||
import Perf from 'react-addons-perf';
|
||||
|
||||
import App from '@containers/app';
|
||||
import MockStateTesting from './mock-state-testing.json';
|
||||
@ -17,6 +18,8 @@ if (process.env.NODE_ENV !== 'production') {
|
||||
a11y(React, {
|
||||
ReactDOM
|
||||
});
|
||||
|
||||
window.Perf = Perf;
|
||||
}
|
||||
|
||||
const states = {
|
||||
|
||||
78
frontend/src/perf-profiler/index.js
Normal file
78
frontend/src/perf-profiler/index.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,7 @@ import { enableBatching } from 'redux-batched-actions';
|
||||
import promiseMiddleware from 'redux-promise-middleware';
|
||||
import { createStore, compose, applyMiddleware } from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
import perflogger from 'redux-perf-middleware';
|
||||
|
||||
import createReducer from '@state/reducers';
|
||||
|
||||
@ -16,7 +17,8 @@ export default (state = Object.freeze({})) => {
|
||||
applyMiddleware(
|
||||
createLogger(),
|
||||
promiseMiddleware(),
|
||||
thunk
|
||||
thunk,
|
||||
process.env.NODE_ENV !== 'production' && perflogger
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
@ -5825,6 +5825,10 @@ prepend-http@^1.0.0, prepend-http@^1.0.1:
|
||||
version "1.0.4"
|
||||
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:
|
||||
version "0.2.0"
|
||||
resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
|
||||
@ -5991,6 +5995,13 @@ react-a11y@^0.3.3:
|
||||
dependencies:
|
||||
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:
|
||||
version "15.4.2"
|
||||
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"
|
||||
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:
|
||||
version "5.0.3"
|
||||
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.3.tgz#86c3b68d56e74294a42e2a740ab66117ef6c019f"
|
||||
@ -6270,6 +6285,12 @@ redux-logger@^2.8.1:
|
||||
dependencies:
|
||||
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:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/redux-promise-middleware/-/redux-promise-middleware-4.2.0.tgz#052a7ac2df0e3468e196279f14bdefe711d10cac"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user