Intermediate React, v2 Code Splitting Libraries & Child Components

Transcript from the "Code Splitting Libraries & Child Components" Lesson

[00:00:00]
>> Brian Holt: That's going to
>> Brian Holt: Details here. Well, first thing I wanted to call out here is notice the details has no concept that it's being lazily loaded, right? I just wrote a normal details component. I didn't modify anything inside of this to make it lazily loaded. It's blissfully unaware of how it is loaded.

[00:00:21] So that's pretty cool as well, I didn't have to modify anything in details. But let's just assume for a second that here I say import_from 'lodash' and let's import moment as well from moment. So these are two pretty big libraries, right? And here, just so that we can say we used them, we'll say console.log(_ moment).

[00:00:55]
>> Brian Holt: It is called moment, right?
>> Speaker 2: moment.js.
>> Brian Holt: moment.js?
>> Brian Holt: Let's check. I just choose those two cuz I know that they're relatively big.
>> Brian Holt: No, it's this one.
>> Brian Holt: So it's gonna go and install those really quickly.
>> Brian Holt: But notice that lodash and moment are not a part of the other bundle, right?

[00:01:32] They're not a part of SearchParams or anything like that, they're unique to details. So parcel is smart enough to say, hey, I know that this is never gonna be loaded in the other bundle, so I can just include it in this bundle,
>> Brian Holt: Okay?
>> Brian Holt: So now if I refresh the page, notice that this bundle got huge, right now it's 747 kilobytes.

[00:01:58] And you can see that there were loading out these two things are logging out rather.
>> Brian Holt: So one don't load all of moment and don't load all the lodash, I think that might be my point. But besides that point, you wanna find like heavy points to split your application and if you're not shaving off a significant amount, it's a worse user experience having to wait, right?

[00:02:22] So it's a tool that you should use, but you should be careful where you use it.
>> Brian Holt: So we can go back over to App here as well, and we can do the exact same thing with SearchParams as well.
>> Brian Holt: Now notice I didn't change Suspense, we're using the same Suspense thing here, right?

[00:02:43] But if I refresh the page, now notice that if you go to Network, SearchParams is its own bundle as well, right? So SearchParams, and then I go to the other one, and it'll load this one. But hey, you know what's cool? If I go back, now, to the other one, notice it doesn't load it again, right?

[00:03:04] It already has it so it is able to just instantly execute that. So, you'll only take that performance hit once.
>> Brian Holt: And you can do this anywhere, it doesn't have to just be on a route, we could go into details, right? And notice we're loading model up here, but we don't actually need Modal up front right we only need Modal to click on it.

[00:03:26] So we could get rid of this and say const Modal=lazy import./Modal.
>> Brian Holt: Right, because the Modal is not initially used, right? The Modal is only used if showModal happens, right? So now if I save this and go back over here, and I go to one of the animal pages

[00:04:10]
>> Brian Holt: Not sure what I did there. Yeah, you need to import lazy as well from React, cuz that's needs to be a real function. So I'm told,
>> Brian Holt: And then from there now this works. Now if you go into network, notice we've loaded app we've loaded details but if I click Adopt here, we get Modal there as well.

[00:04:35] Which is pretty cool as well. It makes code splitting on these places really simple, but this is even worse this is only 10 kilobytes, right? Because it's not that much JavaScript. But just to show you like you can split on libraries, you can split on a bunch of stuff as well, it doesn't just have to be on routes.

[00:04:55]
>> Brian Holt: And the other thing that's cool as well, that's worth calling out. Notice I didn't put a new Suspense component anywhere either, it's still using this top level one up here. So you can have different Suspense components in different places, or you can one top level one as well, that's up to you and how you wanna design your app.