diff --git a/docs/installation.md b/docs/installation.md index 16cc67ef..2f3d8dd2 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -101,7 +101,7 @@ If you use [Create React App](https://github.com/facebookincubator/create-react- #### 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:** > @@ -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. +#### 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 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 af343e94..d5853e0a 100644 --- a/docs/optimizing-performance.md +++ b/docs/optimizing-performance.md @@ -25,6 +25,18 @@ new webpack.DefinePlugin({ 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. ## Profiling Components with Chrome Timeline