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.
(Also check out Bandon's 3 Essential Tips for Managing State in React Applications)
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.
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.
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:
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.
babel-preset-env and specify the browsers and versions you need to support in your
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:
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).
Advice: Drop the Polyfill.io script into your main app HTML document and enjoy those new browser built-ins.
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.
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:
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.
Brandon is the founder of Carrot Pants Press, a maker education and publishing company, the founder and CEO of Tangible Labs and an avid tinkerer.
Subscribe to be the first to get our expert-written articles and tutorials for developers!