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:
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:
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.
With 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.
Instructions
Task 1
Go to the project’s home page (‘/‘), and then click on “Exercise 6: Code Splitting Components”.
Task 2
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.
Task 3
Open ./src/pages/Exercise6/index.js. In this component, we import another component named <Details>.
Inside the <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?
Hint
Since the <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.
Task 4
In <Exercise6>, located at ./src/pages/Exercise6/index.js, use React.lazy() to import the <Details> component.
Hint
First, remove the existing line that imports the <Details> component:
Then, use React.lazy() to import <Details>. Its syntax looks like this:
If you’re stuck, you can find the solution code in ./src/pages/Exercise6/solution/index.js.
Task 5
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.