There are a number of ways to squeeze more performance out of a React app with simple changes. This blog covers three easy steps that help you make sure your React app is as efficient as possible.
When building modern web applications, app performance is critically important. As developers, we strive to ship code that not only delivers on customer expectations and is bug-free, but also performs well. After all, poor performance is a bug in itself, and can quickly lead to a failed app.
And while we're fortunate to have a bevy of great front-end frameworks and libraries, sometimes these libraries come with a cost to performance. Thankfully, in nearly every case, there are easy things that we can do in our apps that ensure that our frameworks don't slow down our experiences.
If you're building React apps, here are three simple things you can do to make sure that your apps run as fast as possible once in production.
1 - Use babel-preset-env to Keep Your Cross-Platform JS Code Compact
One of the things that draws many developers to React is the ability to use modern JavaScript features before they are implemented in all browsers and runtimes. This ability comes from React's use of the Babel compiler. Babel compiles your code by taking your React source, which uses many ES6/2015+ features, and producing a cross-browser-compatible equivalent.
Babel does this via plugins you specify, or in the case of React, by default (assuming you've created a new app with create-react-app), using a preset, or collection of plugins.
Until recently, React used the es2015 and react presets, by default, which covered a number of ES6/2015 features used for React apps. You could also use newer ES7 or 8 presets, if preferred.
And while this was great, the code compiled by babel was targeted at the oldest supported browser version, meaning that all browsers were getting the same code, no matter what versions your app needed to support.
With babel-preset-env, developers now have control over how babel compiles their code. After installation, you can activate the env preset via a simple entry in your package.json. For instance, if my app needs to support the last two versions of all major browsers and Safari 7 and up, I can specify that, like so:
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}
This powerful configuration means that you can target babel to the browsers you know your app needs to support, and get the smallest compiled code out the other end, making your client-side downloads—and your app—faster.
Advice: Use babel-preset-env and specify the browsers and versions you need to support in your package.json file.
2 - Use Polyfill.io to Target Polyfill-Loading to Actual Browser Usage
Babel is a fantastic tool for giving us modern language features, and has played a huge role in the acceleration of JavaScript language improvements, but it's not a polyfill, meaning that it doesn't provide support for browser built-ins and features that might not be present in every browser you need to target.
If you prefer to use new built-ins and features, and you're stuck supporting an older browser, you have two options. One is to load polyfills on a case-by-case basis, either via libraries or by creating them yourself. There are a ton of great polyfills out there, and if you want to write your own, MDN usually has copy-pastable polyfill source in its docs for new features. (Here's an example for Array.prototype.fill)
Another option, and one I suggest, is to use Polyfill.io, a library that uses your visitor's User-Agent header to determine which browser they are using.
It's easy to install. You add a script tag to your root HTML doc like so:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
And you're off! Once in place, Polyfill.io will examine the User-Agent string of every browser user that visits your app, and deterministically load only the polyfills needed. You can even use the API to only load polyfills you need.
If you want to verify how cool this is, paste the CDN Url into two different browsers (like Chrome and Safari or IE/Edge). The script file will load and you'll quickly see a difference. For example, here's what Polyfill.io loads for Safari 11 (on the left), versus Chrome 63 (on the right).
![3 Performance Tips to Speed Up Your React Applications]( "3 Performance Tips to Speed Up Your React Applications")
Advice: Drop the Polyfill.io script into your main app HTML document and enjoy those new browser built-ins.
3 - Perform Tree-Shaking with Webpack 2+
The first two tips are centered around keeping your babel compiled code and polyfills small and compact. This last one is about ensuring that the code you write doesn't accidentally ship dependencies you don't need. We can do this via something called tree-shaking.
Tree-shaking is a term often used in JavaScript to refer to dead-code elimination. When automated, tree-shaking scans your JavaScript code for dependencies you don't need, and removes them automatically.
This comes in especially handy when you use 3rd party libraries like Lodash, Bootstrap and the like, some of which can be huge. Tree-shaking allows you to use features from these, and removes the dead code you’re not using in your app.
The good news is that, for React apps, tree-shaking is easy, and requires you to do three things:
- Use ES2015 module syntax (i.e. import and export) in your code
- Use Webpack 2, or above
- Use a minifier that supports tree-shaking, like UglifyJS, Rollup or Babel.
If you created your app with create-react-app you should be good to go as Webpack and Babel are configured out-of-the-box. ES2015 module syntax are also used in the boilerplate code, and you should continue to use import and export as you build out the app, for JavaScript, CSS and even media assets. If you load any of these using HTML tags, your minifier won't be able to detect or remove dead code in those files.
Further, when performing imports, especially from 3rd party libraries, make sure you import only the objects and functions you need, as opposed to the library itself. For instance, if you’re using lodash and need the Array flatten function, import it at the top of your JavaScript file directly:
// Instead of this
import _ from ‘lodash’
// Do this
import { flatten } from ‘lodash’
Advice: Make sure you're using ES2015 module syntax to import dependencies, along with Webpack 2 and a minifier that supports tree-shaking to ensure that you’re shipping the smallest, fastest code to browsers.
There are many ways to boost web app performance. Many times the biggest performance gains come from small, simple tweaks that reduce file sizes and speed up network calls. Using these three tips, you can ensure that your React apps and loading and running as fast as possible for all your users.
For more tips, tricks and considerations for starting a new React application, check out our "Planning a React Application" whitepaper.
Plan Your React App
