w3resource
React Tutorial

Optimizing Performance


Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.

Use the Production Build

If you?re experiencing performance problems in your React apps, make sure you?re testing with the minified production build.

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.

If you aren?t sure whether your build process is set up correctly, you can check it by installing React Developer Tools for Chrome. If you visit a site with React in production mode, the icon will have a dark background:

optimizing-performance-1

.

If you visit a site with React in development mode, the icon will have a red background:

optimizing-performance-2

.

It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.

You can find instructions for building your app for production below.

Create React App

If your project is built with Create React App, run:

npm run build

This will create a production build of your app in the build/ folder of your project.

Remember that this is only necessary before deploying to production. For normal development, use npm start.

Single-File Builds

We offer production-ready versions of React and React DOM as single files:

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
.

Remember that only React files ending with production.min.js are suitable for production.

Brunch

For the most efficient Brunch production build, install the terser-brunch plugin:

# If you use npm
npm install --save-dev terser-brunch
# If you use Yarn
yarn add --dev terser-brunch

Then, to create a production build, add the -p flag to the build command:

brunch build -p

Remember that you only need to do this for production builds. You shouldn?t pass the -p flag or apply this plugin in development, because it will hide useful React warnings and make the builds much slower.

Browserify

For the most efficient Browserify production build, install a few plugins:

# If you use npm
npm install --save-dev envify terser uglifyify 
# If you use Yarn
yarn add --dev envify terser uglifyify

To create a production build, make sure that you add these transforms (the order matters):

  • The envify transform ensures the right build environment is set. Make it global (-g).
  • The uglifyify transform removes development imports. Make it global too (-g).
  • Finally, the resulting bundle is piped to terser for mangling (read why).

For example:

browserify ./index.js \
  -g [ envify --NODE_ENV production ] \
  -g uglifyify \
  | terser --compress --mangle > ./bundle.js

Remember that you only need to do this for production builds. You shouldn?t apply these plugins in development because they will hide useful React warnings, and make the builds much slower.

Rollup

For the most efficient Rollup production build, install a few plugins:

# If you use npm
npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser
# If you use Yarn
yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser

To create a production build, make sure that you add these plugins (the order matters):

  • The replace plugin ensures the right build environment is set.
  • The commonjs plugin provides support for CommonJS in Rollup.
  • The terser plugin compresses and mangles the final bundle.
plugins: [
  // ...
  require('rollup-plugin-replace')({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  require('rollup-plugin-commonjs')(),
  require('rollup-plugin-terser')(),
  // ...
]

Remember that you only need to do this for production builds. You shouldn?t apply the terser plugin or the replace plugin with 'production' value in development because they will hide useful React warnings, and make the builds much slower.

webpack

Note:

If you?re using Create React App, please follow the instructions above.

This section is only relevant if you configure webpack directly.

Webpack v4+ will minify your code by default in production mode.

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  mode: 'production'
  optimization: {
    minimizer: [new TerserPlugin({ /* additional options here */ })],
  },
};

Remember that you only need to do this for production builds. You shouldn?t apply TerserPlugin in development because it will hide useful React warnings, and make the builds much slower.