From 2469fd1cdcbb3778878a33a7879d5f1fa563c476 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
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 d11cb852192..44148fa92cb 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(<Mastodon {...props} />, mountNode);
+ perf.stop('main()');
});
}
diff --git a/app/javascript/mastodon/performance.js b/app/javascript/mastodon/performance.js
new file mode 100644
index 00000000000..64fd47bb3c3
--- /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 00000000000..e62a526b02a
--- /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 7a2d1d38c29..edded55c6d0 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 a45352c5384..31ba0ee6fe8 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"