Intermediate React, v2 Code Splitting Routes

Transcript from the "Code Splitting Routes" Lesson

[00:00:00]
>> Brian Holt: So we're going to do code splitting. Next I need to reset my repo. So that's back in a state where I can start without emotion cuz that we wanna start from ground zero like a good place in our repo. So what I'm gonna do is I'm gonna come in here, start my server.

[00:00:17] I'm gonna say git reset HEAD --hard. Now, just saying this is all very destructive operations. So, if you wanted to keep any of your code, don't do this, right? But I don't so I'm just gonna say, give me reset hard and so now you can see maybe the two things that I created will be here.

[00:00:45] And so again, don't do this unless you intend on like destroying everything. You can say git clean -f. That's going to clean everything that's not tracked in git. As you might imagine, that might be things that you wanted to keep, but I don't.
>> Brian Holt: I'm just telling you this because one of you is gonna delete something that you want it and you're gonna blame me and I'm gonna say I told you so.

[00:01:12] Okay, that's never happened before. So here after that, I'll do that I'm gonna say npm install again just to get things back in a good state as well.
>> Brian Holt: So after every single branch, you're gonna wanna have to do that or after every module here. So that you're back in kind of a ground zero state.

[00:01:31]
>> Brian Holt: Okay, so everything should be good. We're gonna move on to code splitting. Code splitting is essential for small applications, right? The idea behind code splitting is that you don't wanna have to load everything up front that's not essential for the first page load, right? So if I load a home page of my web page, let's go look at this one, the Adopt Me page.

[00:01:58] So let's go ahead and after we run the npm install, let's go ahead and get our dev server running. So I'm gonna say npm run dev again to get our server started.
>> Brian Holt: Once that's loaded, we can restart here at localhost 1234, okay.
>> Brian Holt: So now this is back in a normal state.

[00:02:30] So what I wanna talk about is code splitting. Code splitting allows you to split out pieces of your application so that you defer the loading to later. Now this is essential if you wanna have a small page size so that the first load is really quick and then you can defer the loading of other pieces of code until later, right.

[00:02:48] So for example, I'm on this homepage and then I also have a second page here called the details page, which is this page, right? I don't need all the code for the details page until later, right? So I can defer the loading of this code until later, okay?

[00:03:06]
>> Brian Holt: So what I can do here is I can use a couple of different techniques within React to defer the loading of these pieces of code later. So I can have the smallest, fastest initial page load, and then I can defer loading of new code until later.
>> Brian Holt: So I want you to go into app.js,

[00:03:29]
>> Brian Holt: Okay and then up here we're going to import two new things here, lazy, L-A-Z-Y and Suspense with a capital S.
>> Brian Holt: Okay, now I wanna defer the loading of Details until later, right? As soon as parcel sees import Details from something here, it's like, I need to load this, right?

[00:04:03] So it goes an includes that in your bundle, but I don't want it to do that anymore. So what I'm gonna do is I'm gonna delete that.
>> Brian Holt: So above App here, what I'm gonna say is I'm gonna say const Details = lazy, with a function that says import./Details.

[00:04:33]
>> Brian Holt: So now, what is Details? Well, Details is now a placeholder component that will not load this code until later when Details is actually tried to be rendered for the first time.
>> Brian Holt: So, we still have a little thing to do here. So, under our above router here, we're gonna put a suspense component, which we import from React here, around router.

[00:05:08]
>> Brian Holt: And then we're gonna give it a fallback.
>> Brian Holt: And here you're just gonna give it a bit of mark up, it's like show this if the code is not ready yet. So I'm just gonna say h1 Loading route.
>> Brian Holt: Okay, so now I have this Details component.

[00:05:39] This is a lazily loaded component, this function here whenever it runs, it's going to import Details, this is called dynamic import. This is not necessarily a React thing. This is a JavaScript thing that you're basically saying, dynamically import this from somewhere, right? And then Parcel is smart enough to say, I know what to do with this, and it does a code split here and splits this into a separate bundle, right?

[00:06:06]
>> Brian Holt: Now we've wrapped this suspense thing around our router that says, hey, if anything inside of here is loading, don't show it, show this h1 loading route first until this import promise resolves and then show it, right?
>> Brian Holt: So now, if I go over here and I'll hard refresh the page, and we'll look at the Network tab.

[00:06:37]
>> Brian Holt: Look at the JS here, so notice I've loaded style and App, right? But if I come in here and search for a pet and I go to Fat Boy Slim notice that it's going to load a details.js down here.
>> Brian Holt: Okay, so there's app.js coming in, and if I click on this details.js now is doing that.

[00:07:02] I show you that because it's pretty fast, it's really hard to notice the loading right? But if you notice very quickly up here in the top left it will say loading, right?
>> Brian Holt: So we split out 18 kilobytes, which is 18 kilobytes of uncompressed JavaScript. This would end up being like one kilobyte, probably.

[00:07:26] So this is not worth it, right? This is actually gonna be slower than, you would've just rather have included it in the main bundle to begin with. So, if you are gonna do code splitting, you should be splitting out at least 30 kilobytes plus.