Merge pull request #1397 from silvenon/docs/production

Document how to use react-hot-loader in production

README.md

@@ -17,14 +17,15 @@ Watch
 **[Dan Abramov's talk on Hot Reloading with Time Travel](https://www.youtube.com/watch?v=xsSnOQynTHs).**
 
 # Deprecation note
+
 React-Hot-Loader was your friendly neightbour, living outside of React. But it was limiting it's powers and causing not the greatest experience. It's time to make a next step.
 
-__React-Hot-Loader is expected to be replaced by [React Fast Refresh](https://github.com/facebook/react/issues/16604)__. Please remove React-Hot-Loader is Fast Refresh is supported at your environment.
+**React-Hot-Loader is expected to be replaced by [React Fast Refresh](https://github.com/facebook/react/issues/16604)**. Please remove React-Hot-Loader if Fast Refresh is supported at your environment.
 
-- `React Native` - [supports Fast Refresh](https://facebook.github.io/react-native/docs/fast-refresh) since 0.61.
-- `parcel 2` - [supports Fast Refresh](https://github.com/facebook/react/issues/16604#issuecomment-556082893) since alpha 3.
-- `webpack` - no support yet, use React-Hot-Loader
-- `other bundler` - no support yet, use React-Hot-Loader
+* `React Native` - [supports Fast Refresh](https://facebook.github.io/react-native/docs/fast-refresh) since 0.61.
+* `parcel 2` - [supports Fast Refresh](https://github.com/facebook/react/issues/16604#issuecomment-556082893) since alpha 3.
+* `webpack` - no support yet, use React-Hot-Loader
+* `other bundler` - no support yet, use React-Hot-Loader
 
 ## Install
 
@@ -161,6 +162,20 @@ export default hot(module)(App);
 webpack-dev-server --hot
 ```
 
+## What about production?
+
+The webpack patch, `hot`, Babel plugin, `@hot-loader/react-dom` etc. are all safe to use in production; they leave a minimal footprint, so there is no need to complicate your configuration based on the environment. Using the Babel plugin in production is even recommended because it switches to cleanup mode.
+
+Just ensure that the production mode has been properly set, both as an environment variable and in your bundler. E.g. with webpack you would build your code by running something like:
+
+```
+NODE_ENV=production webpack --mode production
+```
+
+`NODE_ENV=production` is needed for the Babel plugin, while `--mode production` uses [`webpack.DefinePlugin`](https://webpack.js.org/plugins/define-plugin/) to set `process.env.NODE_ENV` inside the compiled code itself, which is used by `hot` and `@hot-loader/react-dom`.
+
+Make sure to watch your bundle size when implementing react-hot-loader to ensure that you did it correctly.
+
 ## Limitations
 
 * (that's the goal) React-Hot-Loader would not change the past, only update the present - no lifecycle event would be called on component update.
@@ -437,7 +452,9 @@ export default hot(Hello); // <-- module will reload itself
 Wrapping this root component with `hot()` will ensure that it is hot reloaded correctly.
 
 ### Out-of-bound warning
+
 You may see the following warning when code-split components are updated:
+
 ```console
 React-Hot-Loader: some components were updated out-of-bound. Updating your app to reconcile the changes.
 ```