Code Split Components with React Lazy & Loadable Components
Code splitting is the process in which you only send to the browser the files necessary to render the current page. Instead of sending the entire app and all of its resources for all pages. Today there are many different ways to accomplish this React.lazy and Loadable Components.
https://reactjs.org/docs/code-splitting.html#reactlazy
https://github.com/gregberge/loadable-components
Instructor: [0:00] Let's watch what our network shows us we're downloading to the browser when we refresh the page. You'll notice that there's going to be pictures in here, some CSS and, of course, JavaScript.
[0:10] What I want to focus on is the bundle.js, zero chunk, and main chunk. These are the JavaScript files for our main application. Then, as I click through these other two pages of Products and Insights, notice that no additional chunks or JavaScript files are being downloaded to the page.
[0:30] Inside of our application, I have these three routes, an array here, separated in objects that define some key-value pairs for my app, such as the path and the component. They're being imported like a normal import syntax, as you would normally see. We're going to change this. First, we're going to import React from 'react.'
[0:56] Then, for those three components, Dashboard, Products, and Insights, we're going to import them with React.lazy().
[1:07] React.lazy() and this dynamic import is some magic brought to us by both React and our bundler, which is Webpack. This is where we can dynamically download the JavaScript to our browser only when necessary. If a user never goes to the Products and Insights page, then that JavaScript is never downloaded to the page.
[1:30] In order for these components to work, we need to bring in Suspense from React and wrap that at the top level. I'm going to bring in Suspense. Then, where I'm creating the routes, which is here, I'm going to add in a Suspense component.
[1:49] It has a prop, which is a fallback, and this is going to be some type of loading spinner or message. I'm going to keep it simple and just say loading, then obviously close it off.
[2:01] In our browser, you'll notice with our hot reload that we're seeing a lot more chunks of JavaScript coming to the page here. We just had the main and bundle and zero last time, but now, we've got four, two, three, and five that's coming in. Then, additionally, as we click to Products, we're loading in more chunks of JavaScript.
[2:23] You'll also notice that our fallback text of loading appears as we navigate between pages. Keep your eyes right here. You notice that, as we download additional JavaScript, there is that loading text that appears, and that's the Suspense fallback displaying that for us.
[2:42] React.lazy() and Suspense do not work for server-side rendering. However, there is a way to keep code-splitting in a server-rendered app, and that is going to be by using loadable components, which, thankfully enough, is basically the same syntax as React.lazy(). You just need to add that package. It's yarn add @loadable/component. Go ahead and add that.
[3:07] Then, inside of our code base, we just need to switch out the React.lazy() for loadable. I'll remove React here at the top, and then it's just a matter of changing React.lazy(), like that. Then also, before I forget, remove Suspense from our routes here.
[3:28] Now, if you haven't done so already, go ahead and rerun your code and remove Suspense as an import. There we go. Now, if you look at our browser, we're getting the exact same split-up chunks of JavaScript that dynamically load as we navigate to different pages.