Browse Source

add docs for building with Rollup (#8799)

* add docs for building with Rollup

* Tiny unrelated fix
main
Rich Harris 8 years ago
committed by Dan Abramov
parent
commit
a0038f80df
  1. 6
      docs/installation.md
  2. 12
      docs/optimizing-performance.md

6
docs/installation.md

@ -101,7 +101,7 @@ If you use [Create React App](https://github.com/facebookincubator/create-react-
#### Webpack #### Webpack
-Include both `DefinePlugin` and `UglifyJsPlugin` into your production Webpack configuration as described in [this guide](https://webpack.js.org/guides/production-build/). Include both `DefinePlugin` and `UglifyJsPlugin` into your production Webpack configuration as described in [this guide](https://webpack.js.org/guides/production-build/).
> **Note:** > **Note:**
> >
@ -111,6 +111,10 @@ If you use [Create React App](https://github.com/facebookincubator/create-react-
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. 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.
#### 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.
### Using a CDN ### 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: 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:

12
docs/optimizing-performance.md

@ -25,6 +25,18 @@ new webpack.DefinePlugin({
new webpack.optimize.UglifyJsPlugin() new webpack.optimize.UglifyJsPlugin()
``` ```
* 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
plugins: [
require('rollup-plugin-replace')({
'process.env.NODE_ENV': JSON.stringify('production')
}),
require('rollup-plugin-commonjs')(),
// ...
]
```
The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does. 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 ## Profiling Components with Chrome Timeline

Loading…
Cancel
Save