New react-devtools: Check if your production build is really in production mode

With react-devtools 2.15, you can check if your build has properly removed all development helpers bundled with React.

  • : Your site is in production mode. All development helpers have been removed from your bundled JS.
  • : Your site is loading unnecessary development helpers. Your SPA is slowed down.

Pretty neat!

5 Likes

Indeed, but it is strange that my galaxy app is marked as development or am I missing something ?

1 Like

That’s exactly the point of this tool. It pinpoints you the possible errors that you may have encountered during the configuration of your build process.

In my customer’s apps, I use these settings:

  • .babelrc:
{
  "presets": ["es2015", "meteor"],
  "plugins": [
    "transform-class-properties",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    "transform-react-remove-prop-types"
  ]
}
1 Like

Others could share their best practice. That would be interesting to see how they are achieving real production build.

So your use of .babelrc + uglify package does or doesn’t produce a production build?

My react apps are all showing as development builds in production, but I didn’t have a .babelrc file or anything else because I had assumed Meteor took care of a sensible default config for us.

The comment at https://github.com/meteor/meteor/issues/6402#issuecomment-234135721 looked promising but React is still showing as development mode when I deploy to production.

@benjamn are you able to shed any light on this?

1 Like

It does. The .babelrc removes the PropTypes and ensures some speed optimizations. The modified uglifyjs ensures code mangling and dead code elimination.

Hmm, I couldn’t get your .babelrc to work, left me with some cannot read X of undefined issues on the client.

1 Like

+1 on getting an official answer for this

2 Likes

No official answer yet?

This problem is caused by the fact that React uses if (process.env.NODE_ENV !== 'production') { ... } checks throughout its code, and Meteor’s standard-minifier-js package does not convert process.node.NODE_ENV references into the envify style of plain strings that React is expecting. So after minification, React expects process.env.NODE_ENV !== 'production' to become 'production' !== 'production'. For example, making the following change in Meteor’s packages/minifier-js/minifier.js file demonstrates the issue:

var uglify;

meteorJsMinify = function (source) {
  var result = {};
  uglify = uglify || Npm.require("uglify-js");

  // NOTE: This is intended to demonstrate the issue; this is not a proper fix!
  source = source.replace(/process\.env\.NODE_ENV/g, '"production"');

  try {
    result.code = uglify.minify(source, {
      fromString: true,
      compress: {
        drop_debugger: false,
        unused: false,
        dead_code: false
      }
    }).code;

  } catch (e) {
    // Although Babel.minify can handle a wider variety of ECMAScript
    // 2015+ syntax, it is substantially slower than UglifyJS, so we use
    // it only as a fallback.
    result.code = Babel.minify(source).code;
  }

  return result;
};

By adding that one source = source.replace ... line, we’re replacing process.env.NODE_ENV references with "production" before minification, which then shows the React dev tools plugin that we’re using a production build:

(running locally with --production)

All of the above being said however, a fix for this might not be best suited in the standard-minifier-js (or associated) package(s). As @benjamn mentioned here:

This sounds like a case where you’d want to use something other than standard-minifier-js. Assuming process.env.NODE_ENV is a constant is not a sound decision for a generic minifier to make.

I’ll move all of this into a GH issue.

5 Likes

Nice!
Could you please post the link to that issue. Thanks!

Sure thing:

Instead of opening a new issue, I just added my comments to that one (since it was already open and refers to the same issue, albeit in a different context).

1 Like

I tried that But I get in my browser console:

UGLYFYJS_DEAD is not defined

Does happened to somebody this error?