As our apps grow, we may start to create React components that are filled with complex logic and functionality, like a component to present a map with driving directions. This component would be large. Instead of including a large component in our app’s main bundle, we can separate it into a chunk, which will allow users to download it after our app’s main bundle.
Normally, we’d import a React component like this:
import DrivingDirectionsMap from './DrivingDirectionsMap';
Importing a component like this will include it in our app’s main bundle.
To split the
DrivingDirectionsMap component into its own chunk, we can use
React.lazy(), which has the following syntax:
const DrivingDirectionsMap = React.lazy(() => import('./DrivingDirections));
React.lazy() accepts a callback function as an argument. Inside the callback, we use the
import() function, which we discussed in the previous exercise. Then,
React.lazy() will return the
<DrivingDirectionsMap> component. When the user loads the page, they’ll download this component as its own chunk, which we’ll be able to see in the Developer Tools Network tab.
React.lazy(), we can make sure that components that are large and non-essential to the first rendering of our app are downloaded separately from our app’s main bundle.
Go to the project’s home page (‘/‘), and then click on “Exercise 6: Code Splitting Components”.
Open the Network Tab in the Developer Tools and reload the page.
Note: We might need to right click on the reload icon in our browser, then select “Empty Cache and Hard Reload” to make sure our browser does not cache any network requests.
Take note of the “bundle.js” size.
./src/pages/Exercise6/index.js. In this component, we import another component named
<Details> component, located at
./src/pages/Exercise6/Details.js, we have a component that renders restaurant reservation details. In the bottom of the
<Details> component, we’ve also added a large amount of commented out text to simulate a component that requires a large amount of code to render.
Why might we want to make the
<Details> component into its own chunk?
<Details> component includes thousands of characters, users will have to download the entirety of the
<Details> component before they’re able to see any part of our app. Since its contents are not essential on the first rendering of our app, we can defer loading that component and make the initial loading of our app quicker.
<Exercise6>, located at
React.lazy() to import the
First, remove the existing line that imports the
import Details from './Details';
React.lazy() to import
<Details>. Its syntax looks like this:
const ExampleComponent = React.lazy(() => import('path'));
If you’re stuck, you can find the solution code in
Reload the page and open the Network tab in the Developer Tools. Again, we might need to right click on the browser’s reload button and select “Empty Cache and Hard Reload”.
Notice that the bundle.js size has decreased by multiple kilobytes.
Also, notice that there is a line item named “src_pages_Exercise6_Details_js.chunk.js”. This chunk is the component we split out from the main bundle.