Reorder sections in alphabetical order (#9143)
* Reorder sections in alphabetical order * Reorder here too
Dan Abramov committed
Mar 9, 2017 at 20:46 UTC
7fa311bcd95dbc8e1e0655c1aafc62ed61ddf022
2 files changed
+20
-20
docs/docs/installation.md
+8
-8
@@ -95,26 +95,26 @@ Similarly, you can render a React component inside a DOM element somewhere insid
95
96
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.
97
98
-#### Create React App
99
-
100
-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.
101
-
98
#### Brunch
99
100
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.
101
106
-#### Webpack
107
-
108
-Include both `DefinePlugin` and `UglifyJsPlugin` into your production Webpack configuration as described in [this guide](https://webpack.js.org/guides/production-build/).
109
-
102
#### Browserify
103
104
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.
105
106
+#### Create React App
107
+
108
+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.
109
+
110
#### Rollup
111
112
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.
113
114
+#### Webpack
115
+
116
+Include both `DefinePlugin` and `UglifyJsPlugin` into your production Webpack configuration as described in [this guide](https://webpack.js.org/guides/production-build/).
117
+
118
### Using a CDN
119
120
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:
docs/docs/optimizing-performance.md
+12
-12
@@ -11,21 +11,10 @@ Internally, React uses several clever techniques to minimize the number of costl
11
12
If you're benchmarking or experiencing performance problems in your React apps, make sure you're testing with the minified production build:
13
14
-* For Create React App, you need to run `npm run build` and follow the instructions.
14
* For single-file builds, we offer production-ready `.min.js` versions.
15
* For Brunch, you need to add the `-p` flag to the `build` command.
16
* For Browserify, you need to run it with `NODE_ENV=production`.
18
-* For Webpack, you need to add this to plugins in your production config:
19
-
20
-```js
21
-new webpack.DefinePlugin({
22
- 'process.env': {
23
- NODE_ENV: JSON.stringify('production')
24
- }
25
-}),
26
-new webpack.optimize.UglifyJsPlugin()
27
-```
28
-
17
+* For Create React App, you need to run `npm run build` and follow the instructions.
18
* 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).
19
20
```js
@@ -38,6 +27,17 @@ plugins: [
27
]
28
```
29
30
+* For Webpack, you need to add this to plugins in your production config:
31
+
32
+```js
33
+new webpack.DefinePlugin({
34
+ 'process.env': {
35
+ NODE_ENV: JSON.stringify('production')
36
+ }
37
+}),
38
+new webpack.optimize.UglifyJsPlugin()
39
+```
40
+
41
The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.
42
43
## Profiling Components with Chrome Timeline