This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "React Loadable" Lesson
[00:00:00]
>> Brian Holt: Code splitting is this idea that you don't need all of your code upfront to run all your application, right? If I have a big single page application I don't need 100% of the code loaded upfront for everything to work. So that means I can differ loading some of that code to later so that I can load that web page faster.
[00:00:18] This is really, really key, particularly if you have a large scale applications that you don't wanna load everything upfront that doesn't make sense. So a big way you can cut down your initial bundle size is by doing code splitting. So this is a big performance optimization. So we get to identify to parcel or to webpack or whatever bundler you are using points that it can split out.
[00:00:43] And by doing that, it'll make multiple different JavaScript files. And then whenever we go to load those files, it'll actually go behind the scenes, load those extra JavaScript files. And then once they're ready, it'll load your application. So the first thing I need you to do, actually you can stop your service quick and say, npm install.
[00:01:06] And we're gonna install a library called react-loadable, like that.
>> Brian Holt: react-loadable is a component that basically you provide to it, the component you want to load and the component to show while it's loading. As well you can also define a component to show if there's an error. So it's really, really convenient if we're doing code splitting.
[00:01:35] So let's go back and run our service again, npm run dev.
>> Brian Holt: And we are gonna go into app.js from the application here. So app.js, this one right here.
>> Brian Holt: And we're gonna show you how to do code-splitting by route, which is kinda the easiest one to do, right?
[00:02:00] If I'm on the home page, I don't need to load the about page. Or in our case here, if I'm on the results page, I don't necessarily need to load the details page, until the user actually clicks on it. So what I'm going to do here, is I'm actually just going to delete details.
[00:02:17] The way that the bundler knows which routes to split out, sorry, which components to include, which modules to include in your code as it reads these input statements. So if I want to split out details, I have to make sure that it doesn't import it at the top or else we have done nothing useful, right?
[00:02:35] But now we need to import, we'll do it here underneath the petfinder-client, import loadable from react-loadable, okay? This is a function that we provide a loader to it, some sort of loading component. And then it will give us back a component that we can use instead of the one that's coming.
[00:03:06] So above the class here, what I want you to do is I want you to say, const loadable, it's a function that we provide an object to. Sorry, const loadableDetails = loadable, like that. So the first thing we need to give it is something to load, right? So we wanna load the details route.
[00:03:31] So we're gonna say loader:, and this needs to be some sort of function that's going to run once it's actually been invoked. So we're gonna give it a arrow function that's going to return some sort of promise, right? The promise of the details route being loaded. So let me introduce to you to something called the import function import('./Details').
[00:03:59] So now we just have the this import statement at the top. This isn't a function in invocation, this is a module declaration, right? This is static, you can't use the variables up here or anything like that. This is static, so you can statically and analyze your bundles. Over this, this is a function, right?
[00:04:17] So it's dynamic. Whenever I use this component, this loadableDetails component that I have constructed, it's going to call this function that I've provided here. And this function calls the import function. What import does is a dynamic loader, right? So parcel goes through, sees this, and it's going to split out details automatically into a separate bundle.
[00:04:41] And parcel knows how to load stuff off from your project, right? So it does all that wiring up for you, it's all kinda little bit magical, if we're being honest, okay? Okay, and the next thing we have to provide here is a loading component called loading. Right now, I'm gonna say return <h1>loading split out code.
[00:05:11] As you might imagine this might be more sophisticated, it might be like a loading spinner or something better than just an h1 that says it's loading, right? So now, I have this thing called loadableDetails. And this is a component that I can use inside of my code. So down here, instead of having details, which should be underlined right now, right?
[00:05:34] I'm gonna say, loadableDetails. So the first thing I want you to notice, let's just restart, or clear, npm run. You don't have to do this, I'm just gonna do it to show you. It should tell you that it split out a different route. Nope, it doesn't, webpack does.
[00:05:59] But in any case, if we go back to our application here. So let's refresh and let's watch the network tab here, and we'll just watch the JavaScript files. So notice I loaded here App.js, right? That's our main bundle. That's our main entry point into our application. But as soon as I click into one of these animals here, notice that it's gonna load another file.
[00:06:21] This is another JavaScript file that it loaded from my application. So that's pretty cool, right? We didn't really have to do very much. We just had to identify a point, just like this point can be split out, this component can be split out. Here's what you do while it's loading and here's what to do when it's loaded.
[00:06:40] Pretty compelling, right? I think it is.