Add improved performance marks for development mode (#3297)

app/javascript/mastodon/main.js

+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()');
   });
 }
 

app/javascript/mastodon/performance.js

+//
+// 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);
+  }
+}

config/webpack/loaders/mark.js

+if (process.env.NODE_ENV === 'production') {
+  module.exports = {};
+} else {
+  module.exports = {
+    test: /\.js$/,
+    loader: 'mark-loader',
+  };
+}

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",

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"