使用webpack时如何临时打开/关闭React开发模式？

Question

I'm using webpack as my bundler and I'd like to test the real performance sometimes without having to actually bundle the whole application. Is there a way how to temporarily turn off React development mode? As far as I know, the production version of React is actually a different file with all the extra debug info stripped but I don't know how to enforce which version should be loaded.

Answer 1

Tell Webpack to use Node's production environment. One way of doing this is to use DefinePlugin in your Webpack config to set the process.env to production:

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify("production")
    }
  })
]

Also make sure to use a production-ready devtool option, eg devtool: 'cheap-module-source-map' and not devtool: 'eval' (also in your Webpack config).

Answer 2

The production version of React is just the .min.js version. From the download page :

We provide two versions of React: an uncompressed version for development and a minified version for production. The development version includes extra warnings about common mistakes, whereas the production version includes extra performance optimizations and strips all error messages.

So if you include this in your asset pipeline, instead of the uncompressed version, you will be able to test your app in 'production' mode.

Answer 3

Assuming you install React 15.0.1 with npm, import react from 'react' or react = require('react') will run ./mode_modules/react/lib/React.js which is React's raw source.

The React docs suggest you use ./mode_modules/react/dist/react.js for development and react.min.js for production.

Should you minify /lib/React.js or /dist/react.js for production, React will display a warning message that you've minified non-production code:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

react-dom, redux, react-redux behave similarly. Redux displays a warning message. I believe react-dom does too.

So you are clearly encouraged to use the production version from /dist .

However if you minify the /dist versions, webpack's UglifyJsPlugin will complain.

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

You cannot avoid this message because UglifyJsPlugin can only exclude webpack chunks, not individual files.

I use the both the development and production /dist versions myself.

• Webpack has less work to do and finishes a bit sooner. (YRMV)
• React docs say /dist/react.min.js is optimised for production. I've read no proof, just handwaving, that 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } plus uglify does as good a job as '/dist/react.min.js`.
• I get 1 warning message from uglify rather than 3 from the react/redux ecosystem.

You can have webpack use the /dist versions with:

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }