diff --git a/docs/installation.md b/docs/installation.md index 15da2f4d..d4ee06ae 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -95,26 +95,26 @@ Similarly, you can render a React component inside a DOM element somewhere insid By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app. -#### Create React App - -If you use [Create React App](https://github.com/facebookincubator/create-react-app), `npm run build` will create an optimized build of your app in the `build` folder. - #### Brunch To create an optimized production build with Brunch, just add the `-p` flag to the build command. See the [Brunch docs](http://brunch.io/docs/commands) for more details. -#### Webpack - -Include both `DefinePlugin` and `UglifyJsPlugin` into your production Webpack configuration as described in [this guide](https://webpack.js.org/guides/production-build/). - #### Browserify Run Browserify with `NODE_ENV` environment variable set to `production` and use [UglifyJS](https://github.com/mishoo/UglifyJS) as the last build step so that development-only code gets stripped out. +#### Create React App + +If you use [Create React App](https://github.com/facebookincubator/create-react-app), `npm run build` will create an optimized build of your app in the `build` folder. + #### Rollup Use [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace) plugin together with [rollup-plugin-commonjs](https://github.com/rollup/rollup-plugin-commonjs) (in that order) to remove development-only code. [See this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0) for a complete setup example. +#### Webpack + +Include both `DefinePlugin` and `UglifyJsPlugin` into your production Webpack configuration as described in [this guide](https://webpack.js.org/guides/production-build/). + ### Using a CDN If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `dist` folders, which are hosted on a CDN: diff --git a/docs/optimizing-performance.md b/docs/optimizing-performance.md index 86acb8cd..cbb1b984 100644 --- a/docs/optimizing-performance.md +++ b/docs/optimizing-performance.md @@ -11,21 +11,10 @@ Internally, React uses several clever techniques to minimize the number of costl If you're benchmarking or experiencing performance problems in your React apps, make sure you're testing with the minified production build: -* For Create React App, you need to run `npm run build` and follow the instructions. * For single-file builds, we offer production-ready `.min.js` versions. * For Brunch, you need to add the `-p` flag to the `build` command. * For Browserify, you need to run it with `NODE_ENV=production`. -* For Webpack, you need to add this to plugins in your production config: - -```js -new webpack.DefinePlugin({ - 'process.env': { - NODE_ENV: JSON.stringify('production') - } -}), -new webpack.optimize.UglifyJsPlugin() -``` - +* For Create React App, you need to run `npm run build` and follow the instructions. * For Rollup, you need to use the [replace](https://github.com/rollup/rollup-plugin-replace) plugin *before* the [commonjs](https://github.com/rollup/rollup-plugin-commonjs) plugin so that development-only modules are not imported. For a complete setup example [see this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0). ```js @@ -38,6 +27,17 @@ plugins: [ ] ``` +* For Webpack, you need to add this to plugins in your production config: + +```js +new webpack.DefinePlugin({ + 'process.env': { + NODE_ENV: JSON.stringify('production') + } +}), +new webpack.optimize.UglifyJsPlugin() +``` + The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does. ## Profiling Components with Chrome Timeline