From 2469fd1cdcbb3778878a33a7879d5f1fa563c476 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Thu, 25 May 2017 05:09:55 -0700 Subject: [PATCH] Add improved performance marks for development mode (#3297) --- app/javascript/mastodon/main.js | 5 ++++- app/javascript/mastodon/performance.js | 24 ++++++++++++++++++++++++ config/webpack/loaders/mark.js | 8 ++++++++ package.json | 2 ++ yarn.lock | 8 ++++++++ 5 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 app/javascript/mastodon/performance.js create mode 100644 config/webpack/loaders/mark.js diff --git a/app/javascript/mastodon/main.js b/app/javascript/mastodon/main.js index d11cb8521..44148fa92 100644 --- a/app/javascript/mastodon/main.js +++ b/app/javascript/mastodon/main.js @@ -1,3 +1,5 @@ +const perf = require('./performance'); + // allow override variables here require.context('../../assets/stylesheets/', false, /variables.*\.scss$/); @@ -14,10 +16,10 @@ function onDomContentLoaded(callback) { } function main() { + perf.start('main()'); const Mastodon = require('mastodon/containers/mastodon').default; const React = require('react'); const ReactDOM = require('react-dom'); - window.Perf = require('react-addons-perf'); require.context('../images/', true); @@ -29,6 +31,7 @@ function main() { const props = JSON.parse(mountNode.getAttribute('data-props')); ReactDOM.render(, mountNode); + perf.stop('main()'); }); } diff --git a/app/javascript/mastodon/performance.js b/app/javascript/mastodon/performance.js new file mode 100644 index 000000000..64fd47bb3 --- /dev/null +++ b/app/javascript/mastodon/performance.js @@ -0,0 +1,24 @@ +// +// Tools for performance debugging, only enabled in development mode. +// Open up Chrome Dev Tools, then Timeline, then User Timing to see output. +// Also see config/webpack/loaders/mark.js for the webpack loader marks. +// + +let marky; + +if (process.env.NODE_ENV === 'development') { + marky = require('marky'); + require('react-addons-perf').start(); +} + +export function start(name) { + if (process.env.NODE_ENV === 'development') { + marky.mark(name); + } +} + +export function stop(name) { + if (process.env.NODE_ENV === 'development') { + marky.stop(name); + } +} diff --git a/config/webpack/loaders/mark.js b/config/webpack/loaders/mark.js new file mode 100644 index 000000000..e62a526b0 --- /dev/null +++ b/config/webpack/loaders/mark.js @@ -0,0 +1,8 @@ +if (process.env.NODE_ENV === 'production') { + module.exports = {}; +} else { + module.exports = { + test: /\.js$/, + loader: 'mark-loader', + }; +} diff --git a/package.json b/package.json index 7a2d1d38c..edded55c6 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,8 @@ "is-nan": "^1.2.1", "js-yaml": "^3.8.3", "lodash": "^4.17.4", + "mark-loader": "^0.1.6", + "marky": "^1.2.0", "mkdirp": "^0.5.1", "node-sass": "^4.5.2", "npmlog": "^4.0.2", diff --git a/yarn.lock b/yarn.lock index a45352c53..31ba0ee6f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4018,6 +4018,14 @@ map-obj@^1.0.0, map-obj@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" +mark-loader@^0.1.6: + version "0.1.6" + resolved "https://registry.yarnpkg.com/mark-loader/-/mark-loader-0.1.6.tgz#0abb477dca7421d70e20128ff6489f5cae8676d5" + +marky@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.0.tgz#9617ed647bbbea8f45d19526da33dec70606df42" + math-expression-evaluator@^1.2.14: version "1.2.14" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab"