Photo by chuttersnap on Unsplash

React Suspense — Load the Essentials

How to leverage code-splitting easily in React 16

Seth Corker
Mar 11, 2019 · 5 min read

Code-splitting is now easier than ever thanks to the work the React team has done on Suspense. If you aren’t code-splitting today, let’s take a look at why you might want to split code, what it means, and how to achieve it quickly and easily.

Why use code-splitting?

Load only what you need, when you need it.

Code-splitting is especially useful when some routes and/or components need to use a heavy library in places throughout your app. You may have a landing page that is very lightweight and a dashboard that displays a lot of data with charts and data visualizations that rely on heavier libraries. You shouldn’t need to load both when the user is requesting the landing page. So how can we start code-splitting in React 16?

How do I use code-splitting?

import MyComponent from "./MyComponent"; becomes React.lazy(() => import("./MyComponent.jsx"));

When React comes to render MyComponent, it will attempt to import it. The Suspense wrapper around the component will provide a fallback whilst the component is loading and swap it out when it’s complete.

React Suspense Lazy Loading Example

The router wrapped in a Suspense component to lazily load some more sizable routes

Take a further look at an example I created that shows code-splitting using React.lazy(). My example uses Parcel but it’s is just as easy to get it working with your favourite blunder like Webpack. The example illustrates using larger dependencies that you might want to include for very specific purposes. These are ideal for code-splitting because they can be logically separated where each dependency is isolated to its own route.

Demo

A clip showing each route loading and the network request

Take a look at the demo yourself, the full repository is available on my GitHub.


Generating a detailed report with Parcel

Single Bundle Detailed Report

Here is the output of running parcel build --detailed-report against the app without code-splitting.

Code-splitting Detailed Report

Here is the output of running parcel build --detailed-report against the app with code-splitting.

Takeaway

Resources:


If you are interested in more React 16 features then take a look at “React Hooks for Greater Good”, for more performance-related tips for React— take a look at how to “Save user’s data with a lighter alternative to React”. Preact is a great framework which can reduce your overall bundle size even more while being largely compatible with React.


Let me know if there is anything I can do to improve or topics I can investigate in more depth. Thanks for reading!

Benevolent Bytes

Thoughts, stories and ideas about development. Web development and beyond.

Seth Corker

Written by

Sharing ideas, facts, and opinions about programming. 📚 Learn more React and JavaScript. 🗺 Learn web development tips and tricks 🛸 Discover something new

Benevolent Bytes

Thoughts, stories and ideas about development. Web development and beyond.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade